flutter GridView和Wrap

GridView有2种gridDelegate;

  • [记录小嵌套冲突的问题,SingleChildScrollView,ListView,GrilView嵌套问题解决,子布局添加属性]
  physics: NeverScrollableScrollPhysics(),
  shrinkWrap: true,

  1. SliverGridDelegateWithMaxCrossAxisExtent:
    没有固定行数,这种类似于wrap,可以自动换行,布局适配性较好
 return GridView.builder(
     // physics: NeverScrollableScrollPhysics(),
      //shrinkWrap: true,
      padding: const EdgeInsets.all(0.0),
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        //单个widget的水平最大宽度
        maxCrossAxisExtent: 110,
        //垂直单个子widget间距
        mainAxisSpacing: 4,
        //水平单个子widget间距
        crossAxisSpacing: 4,
      ),
      itemBuilder: (context, index) {
          return Image.file(_imageFileList[index], fit: BoxFit.fill);
      },
      itemCount: _imageFileList.length,
    );

  1. SliverGridDelegateWithFixedCrossAxisCount
    固定行数,这种相比第一种,固定了item宽高比,适配起来比较麻烦
  return GridView.builder(
      padding: const EdgeInsets.all(0.0),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
          crossAxisCount: 3,
          //垂直单个子widget间距
          mainAxisSpacing: 4,
          //水平单个子widget间距
          crossAxisSpacing: 4,
          //item宽高比例
          childAspectRatio: 1.0),
      itemBuilder: (context, index) {
          return Image.file(_imageFileList[index], fit: BoxFit.fill);
      },
      itemCount: _imageFileList.length,
    );
  1. wrap部分地方也是可代替GrildView来进行使用的,并且它的布局适配性也是很nice的,不过并不能替代,GridView可以根据index更好的去添加头部,尾部;在slivers下也使用不了,只能使用对应的SliverGrid,SliverList;使用上没什么好说的,一搜一大堆;
Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: [
    Chip(
      avatar: CircleAvatar(
          backgroundColor: Colors.blue.shade900, child: new Text('AH', style: TextStyle(fontSize: 10.0),)),
      label: Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(
          backgroundColor: Colors.blue.shade900, child: new Text('ML', style: TextStyle(fontSize: 10.0),)),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(
          backgroundColor: Colors.blue.shade900, child: new Text('HM', style: TextStyle(fontSize: 10.0),)),
      label: Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(
          backgroundColor: Colors.blue.shade900, child: new Text('JL', style: TextStyle(fontSize: 10.0),)),
      label: Text('Laurens'),
    ),
  ],
)

你可能感兴趣的:(flutter)