1. 程式人生 > >flutter -------- GridView的使用

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

}