Flutter学习之GridView

本文主要介绍下Flutter中GridView的介绍和使用

GridView 是一个可滚动的组件。类似我们iOS中的collectionView，我看下简单的使用

import 'package:flutter/material.dart';

class GridViewPage extends StatelessWidget {
  const GridViewPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('GridView'),),
      body: GridView(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
        ),
        children: [
          _createGridViewItem(Colors.primaries[0]),
          _createGridViewItem(Colors.primaries[1]),
          _createGridViewItem(Colors.primaries[2]),
          _createGridViewItem(Colors.primaries[3]),
          _createGridViewItem(Colors.primaries[4]),
          _createGridViewItem(Colors.primaries[5]),
          _createGridViewItem(Colors.primaries[6]),
          _createGridViewItem(Colors.primaries[7]),

        ],
      )

    ,
    );
  }
  _createGridViewItem(Color color){
    return Container(
      height: 80,
      color: color,
    );
  }
}

或者我们使用GridView.count来指定

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: <Widget>[
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.teal[100],
      child: const Text("He'd have you all unravel at the"),
    ),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.teal[200],
      child: const Text('Heed not the rabble'),
    ),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.teal[300],
      child: const Text('Sound of screams but the'),
    ),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.teal[400],
      child: const Text('Who scream'),
    ),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.teal[500],
      child: const Text('Revolution is coming...'),
    ),
    Container(
      padding: const EdgeInsets.all(8),
      color: Colors.teal[600],
      child: const Text('Revolution, they...'),
    ),
  ],
);

gridDelegate参数控制子控件的排列，有2个选择：

• SliverGridDelegateWithFixedCrossAxisCount：创建网格布局，创建网格布局与固定数量的item在交叉轴。

• SliverGridDelegateWithMaxCrossAxisExtent：此委托将为作为的item选择一个交叉轴范围 在以下条件下尽可能大:1.范围均匀地划分网格的横轴范围。2. extent最多为maxCrossAxisExtent。

SliverGridDelegateWithFixedCrossAxisCount有属性介绍如下：

• crossAxisCount：交叉轴方向上个数。
• mainAxisSpacing：主轴方向上2行之间的间隔。
• crossAxisSpacing：交叉轴方向上之间的间隔。
• childAspectRatio：子控件宽高比。

scrollDirection 表示滚动方向，默认是垂直方向，可以设置为水平方向。

reverse表示是否反转滚动方向，比如当前滚动方向是垂直方向，reverse设置为true，滚动方向为从上倒下，设置为false，滚动方向为从下倒上。

2. 快速构建

对于类似的item我们使用快速构造方法，itemBuilder是构建子控件，itemCount指定数据个数。

• GridView.builder

return GridView.builder(
  itemCount: 250,
  gridDelegate:
  const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,),
  itemBuilder: (BuildContext context, int index) => buildNetImage(
      'https://loremflickr.com/100/100/music?lock=$index',
      placeholder: _loader,
      errorWidget: _error
      // height: 60,
      // width: 60
  ),

);

/// 加载网络图片
buildNetImage(String url,
{BoxFit fit = BoxFit.scaleDown, double? width, double? height, Alignment alignment = Alignment.center, PlaceholderWidgetBuilder? placeholder, LoadingErrorWidgetBuilder? errorWidget}) {
  return CachedNetworkImage(
    imageUrl: url,
    placeholder: placeholder ?? _loader,
    errorWidget: errorWidget ?? _error,
    width: width ,
    height: height,
    fit: fit,
  );
}


/// 加载等待视图
Widget _loader(BuildContext context, String url) {
  return const Center(
    child: CircularProgressIndicator(),
  );
}
/// 加载错误视图
Widget _error(BuildContext context, String url, dynamic error) {
  return const Center(child: Icon(Icons.error));
}

• GridView.custom

return GridView.custom(
   gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
     crossAxisCount: 3,
   ),
   childrenDelegate: SliverChildBuilderDelegate((context, index) {
     return buildNetImage(
         'https://loremflickr.com/100/100/music?lock=$index',
         placeholder: _loader,
         errorWidget: _error
       // height: 60,
       // width: 60
     );
   }, childCount: 10),
 );

• GridView.extent

return GridView.extent(
   maxCrossAxisExtent: 100,
   children: List.generate(50, (i) {
     return buildNetImage(
                  'https://loremflickr.com/100/100/music?lock=$i',
                  placeholder: _loader,
                  errorWidget: _error
                // height: 60,
                // width: 60
              );
   }),
 );