flutter 可滚动wdiget GridView

1.属性 跟ListView差不多

GridView({
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,

  @required SliverGridDelegate gridDelegate, 
  // 控制子widget layout的委托
  // Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent

  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})

2.SliverGridDelegateWithFixedCrossAxisCount

SliverGridDelegateWithFixedCrossAxisCount({

  @required double crossAxisCount, 
  // 横轴子元素的数量。
  // 此属性值确定后子元素在横轴的长度就确定了,即ViewPort横轴长度/crossAxisCount。

  double mainAxisSpacing = 0.0,  // 主轴方向的间距

  double crossAxisSpacing = 0.0,  // 横轴方向子元素的间距

  double childAspectRatio = 1.0,  
  // 子元素在横轴长度和主轴长度的比例。
  // 由于crossAxisCount指定后子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度
  // 宽高比

})

使用方法：

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3, //横轴三个子widget
      childAspectRatio: 1.0 //宽高比为1时，子widget
  ),
  children:<Widget>[]
);

下面用简写的方法举例

Widget _getGrid() {
    // 简写方法 
    return GridView.count(
      shrinkWrap: true,  //直接父级是Column的话要加这个，因为Column无边界
      crossAxisCount: 4,
      childAspectRatio: 2.0,
      mainAxisSpacing: 8.0,
      crossAxisSpacing: 20.0,
      children: <Widget>[
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
      ],
    );
  }

3.SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithMaxCrossAxisExtent({

  double maxCrossAxisExtent, //maxCrossAxisExtent为子元素在横轴上的最大长度，之所以是“最大”长度，是因为横轴方向每个子元素的长度仍然是等分的

  double mainAxisSpacing = 0.0,

  double crossAxisSpacing = 0.0,

  double childAspectRatio = 1.0,

})

GridView(
  padding: EdgeInsets.zero,
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 120.0,
      childAspectRatio: 2.0 //宽高比为2
  ),
  children: <Widget>[],
);

//下面用简写方式举例

 Widget _getMaxGrid() {
    return GridView.extent(
      padding: EdgeInsets.symmetric(vertical: 10.0),
      shrinkWrap: true,  //同上
      maxCrossAxisExtent: 100.0, //最大距离100
      childAspectRatio: 2.0, 宽高比2.0
      mainAxisSpacing: 8.0,
      crossAxisSpacing: 2.0,
      children: <Widget>[
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
      ],
    );
  }

4.GridView.builder，自定义,用整个例子举例

GridView.builder(
 ...
 @required SliverGridDelegate gridDelegate, 

 @required IndexedWidgetBuilder itemBuilder,

)

import 'package:flutter/material.dart';

class MyGrid extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyGrid();
  }
}

class _MyGrid extends State<MyGrid> {
  List _container = [];

  void _receiveData() {
    Future.delayed(Duration(milliseconds: 200)).then((e) {
      setState(() {
        _container.addAll(["add1", "add2", "add3"]);
      });
    });
  }

  void initState() {
    super.initState();
    _receiveData();
  }

  Widget _getGrid() {
    return GridView.count(
      shrinkWrap: true,
      crossAxisCount: 4,
      childAspectRatio: 2.0,
      mainAxisSpacing: 8.0,
      crossAxisSpacing: 20.0,
      children: <Widget>[
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
      ],
    );
  }

  Widget _getMaxGrid() {
    return GridView.extent(
      padding: EdgeInsets.symmetric(vertical: 10.0),
      shrinkWrap: true,
      maxCrossAxisExtent: 100.0,
      childAspectRatio: 2.0,
      mainAxisSpacing: 8.0,
      crossAxisSpacing: 2.0,
      children: <Widget>[
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
        Container(
          color: Colors.blueAccent,
        ),
      ],
    );
  }
  
  // 这是builder自定义的
  Widget _getBuilder() {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          childAspectRatio: 1.0,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0),
      itemCount: _container.length,
      itemBuilder: (context, index) {
        if (index == _container.length - 1 && _container.length < 20) {
          _receiveData();
        }
        return Container(
          alignment: Alignment.center,
          color: Colors.indigoAccent,
          child: Text(_container[index]),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("GridView"),
      ),
      body: Column(
        children: <Widget>[
          _getGrid(),
          _getMaxGrid(),
          Expanded(
            flex: 1,
            child: _getBuilder(),
          )
        ],
      ),
    );
  }
}

最后一部分是可滚动的GridView