flutter -------- GridView的使用
阿新 • • 發佈:2019-04-19
使用GridView將widget放置為二維列表。 GridView提供了兩個預製list,或者您可以構建自定義網格。當GridView檢測到其內容太長而不適合渲染框時,它會自動滾動。
GridView 概覽
- 在網格中放置widget
- 檢測列內容超過渲染框時自動提供滾動
- 構建您自己的自定義grid,或使用一下提供的grid之一:
GridView.count
允許您指定列數GridView.extent
允許您指定項的最大畫素寬度
案例效果:
官方文件(相關屬性)介紹:
https://docs.flutter.io/flutter/widgets/GridView-class.html
案例程式碼:
/***
* 列表GridView
*/
class UITest3_GridView extends StatelessWidget{
List<Container> buildGridList(int count){
return new List<Container>.generate(count,
(int index) =>
new Container(
child: new Image.asset("images/lake.jpg"),
)
);
}
Widget builGrid(){
return new GridView.extent(
maxCrossAxisExtent: 150.0,
padding: EdgeInsets.all(4),
mainAxisSpacing: 4,
crossAxisSpacing: 4,
children: buildGridList(30)
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(
title: new Text("GridView"),
),
body: new Center(
child: builGrid(),
),
);
}
}