使用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(), ), ); } }