GridView组件初体验

拉维

发布于 2019-08-12 16:01:46

5140

发布于 2019-08-12 16:01:46

文章被收录于专栏：iOS小生活iOS小生活

前文我们聊了Flutter的ListView组件，其类似于OC中的UITableView；今天我们来聊聊GridView组件，其实现的效果类似于OC中的UICollectionView。

GridView的构造方法有很多，我们今天主要介绍以下两种：

GridView.count和GridView.builder。

GridView.count

GridView.count是静态网格布局，也就是说，事先需要将各个子Widget都创建好。代码如下：

class HomeContent extends StatelessWidget {

  //创建各个子元素的自定义方法
  List<Widget> _getChildren() {
    var children = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value["imgUrl"]),
            SizedBox(height: 10),//设置Image和text的上下间距
            Text(
              value["title"],
              style: TextStyle(
                fontSize: 14,
              ),
            )
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.blue,
            width: 2,
          ), //设置Container的边框
        ),
      );
    });
    return children.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      children: this._getChildren(),
      crossAxisCount: 3, //交叉轴（默认情况下为横轴）上的子widget个数，即列数（默认情况下）
      crossAxisSpacing: 10, //交叉轴（默认情况下为横轴）上的子widget之间的距离，即列与列之间的距离（默认）
      mainAxisSpacing: 10, //主轴（默认情况下为纵轴）上的子widget之间的距离，即行与行之间的距离（默认）
      padding: EdgeInsets.all(10), //设置GridView的内边距
      // childAspectRatio: 0.5, //子Widget元素的宽/高比
    );
  }
}

GridView.builder

class HomeContent extends StatelessWidget {
  Widget _getItemBuilder(context, index) {
    return Column(
      children: <Widget>[
        Image.network(listData[index]["imgUrl"]),
        Text(listData[index]["title"])
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: listData.length,
      itemBuilder: this._getItemBuilder,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,//交叉轴（默认情况下为横轴）上的子widget个数，即列数（默认情况下）
          crossAxisSpacing: 10,//交叉轴（默认情况下为横轴）上的子widget之间的距离，即列与列之间的距离（默认）
          mainAxisSpacing: 10,//主轴（默认情况下为纵轴）上的子widget之间的距离，即行与行之间的距离（默认）
          childAspectRatio: 1.0),//子Widget元素的宽/高比
    );
  }
}

以上。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-08-03，如有侵权请联系 cloudcommunity@tencent.com 删除

flutter