Flutter学习之GridView

携手创造，共同成长！这是我参与「日新方案 8 月更文挑战」的第22天，点击检查活动详情

本文首要介绍下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
              );
   }),
 );