Flutter折腾学习成长记(22)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

今日目标

今天来学习前两天剩下的最后一种布局，网格布局，主要用于商品布局中。今天主要学习两种常用的，GridView.count实现网格布局，GridView.builder实现网格布局。

GridView常用属性

名称	类型	说明
scrollDirection	Axis	滚动方法
padding	EdgeInsets	内边距
resolve	bol	组件反向排序
crossAxisSpacing	double	水平子Widget之间间距
mainAxisSpacing	double	垂直子Widget之间间距
crossAxisCount	int	一行Widget数量
childAspectRation	double	子Widget宽高比例
children	*	[]
gridDelegate	SliverGridelgateWithFixedCrossAxisCount SliverGridDelegateWithMaxCrossAxisExtent	控制布局主要用在GridView.builder里面

GridView.count

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      children: <Widget>[
        Text('this is line 1'),
        Text('this is line 1'),
        Text('this is line 1'),
        Text('this is line 1'),
        Text('this is line 1'),
      ],
      crossAxisCount: 3,
    );
  }
}
复制代码

如上，我们就很快速的实现了一个简单的网格布局\

class HomeContent extends StatelessWidget {
  List<Widget> _getListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        child: Text(
          '这是第$i条数据',
          style: TextStyle(color: Colors.red[500], fontSize: 12 + i*1.0),
        ),
        color: Colors.blue[i * 100],
        // height: 20.0, // 这里设置高度是没有效果的
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      children: this._getListData(),
      crossAxisCount: 3, // 控制一行有多少个Widget
      crossAxisSpacing: 20.0,
      mainAxisSpacing: 10.0,
      padding: EdgeInsets.all(10.0),
      childAspectRatio: 0.7,
    );
  }
}
复制代码

结合我们之前学习的动态列表的实现，我们很轻松的就得到一个动态的网格样式。 如果我们直接对Container设置高度height属性是没有效果的，高度由子元素来决定或者通过childAspectRation属性来设置

GridView.builder

class HomeContent extends StatelessWidget {
  Widget _getListData(context, i) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        '这是第$i条数据',
        style: TextStyle(
            color: Colors.red[500], fontSize: (12 + i * 1.0).toDouble()),
      ),
      color: Colors.blue[i * 100],
      // height: 20.0, // 这里设置高度是没有效果的
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.builder(
      itemCount: 20,
      itemBuilder: _getListData,
      padding: EdgeInsets.all(10.0),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, mainAxisSpacing: 10.0, crossAxisSpacing: 10.0),
    );
  }
}
复制代码

如上我们就通过builder方式实现了网格布局，要注意gridDelegate这个属性对应的方法。
其实相信大家也发现了，不管ListView还是GridView基本实现起来都是差不多的形式，大家只需要基本记住里面常用的一些属性就好了。

ending

持续学习如有错误的地方还请指正谢谢