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

}

猜你喜欢

转载自www.cnblogs.com/zhangqie/p/10731133.html
今日推荐