Flutter--GridView组件-摩杜云开发者社区

属性

属性	释义
scrollDirection	滚动方向
padding	内边距
resolve	组件反向排序
crossAxisSpacing	控件水平间距
mainAxisSpacing	控件垂直边距
crossAxisCount	每行控件数量
childAspectRatio	每个控件的宽高比
gridDelefate	一般在GridView.builder中使用SliverGridDelegateWithFixedCrossAxisCount来使用上述属性

通过GridView.count创建网格布局

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,  //网格布局的列数
      children: <Widget>[
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本')
      ],
    );
  }

使用GridVIew.count创建动态网格

class HomeContent extends StatelessWidget {
  List<Widget> _getListData() {
    List<Widget> list = new List();
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        child: Text("$i"),
      ));
    }
    return list;
  }


  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      crossAxisSpacing: 20.0,
      mainAxisSpacing: 20.0,
      childAspectRatio: 0.7,
      children: this._getListData(),
      padding: EdgeInsets.all(10),
    );
  }
}

使用GridView.builder创建网格

class HomeContent extends StatelessWidget {
  Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]["imageUrl"]),
          SizedBox(height: 12),
          Text(
            listData[index]["title"],
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          )
        ],
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 20.0,
        mainAxisSpacing: 20.0,
      ),
      itemBuilder: this._getListData,
      itemCount: listData.length,
    );
  }
}