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

}