flutter -------- GridView的使用

使用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 buildGridList(int count){
    return new List.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(),
      ),
    );
  }

}