Flutter – GridView「建议收藏」

欢迎大家来到IT世界,在知识的湖畔探索吧!

GridView 表格类布局

GridView 在构建是,有两种方式

1 SliverGridDelegateWithFixedCrossAxisCount

 //mainAxisSpacing：主轴方向的间距。
 //crossAxisSpacing：横轴方向子元素的间距。  
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount:4,  // 每行几个
          childAspectRatio: 1 //宽高比为1
   ),

欢迎大家来到IT世界,在知识的湖畔探索吧!

欢迎大家来到IT世界,在知识的湖畔探索吧!class MyGridView2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView(
      padding: EdgeInsets.zero,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount:4,
          childAspectRatio: 1 //宽高比为1
          ),
      children: <Widget>[
        Container(
          width: double.infinity,
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text("1",style: TextStyle(fontSize: 50,color: Colors.white),),
        ),
        Container(
          width: double.infinity,
          color: Colors.red,
          alignment: Alignment.center,
          child: Text("2",style: TextStyle(fontSize: 50,color: Colors.white),),
        ),
        Container(
          width: double.infinity,
          color: Colors.yellow,
          alignment: Alignment.center,
          child: Text("3",style: TextStyle(fontSize: 50,color: Colors.white),),
        ),
        Container(
          width: double.infinity,
          color: Colors.green,
          alignment: Alignment.center,
          child: Text("4",style: TextStyle(fontSize: 50,color: Colors.white),),
        ),
        Container(
          width: double.infinity,
          color: Colors.pink,
          alignment: Alignment.center,
          child: Text("5",style: TextStyle(fontSize: 50,color: Colors.white),),
        ),
        Container(
          width: double.infinity,
          color: Colors.deepPurple,
          alignment: Alignment.center,
          child: Text("6",style: TextStyle(fontSize: 50,color: Colors.white),),
        ),
      ],
    );
  }
}

2 SliverGridDelegateWithMaxCrossAxisExtent

gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 120.0,  // 每一个的宽度 ,但最后所有组件的宽度还是会平分的,这个值 起参考作用
          childAspectRatio: 1.0 //宽高比为1
      ),

欢迎大家来到IT世界,在知识的湖畔探索吧!class MyGridView1 extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView(
      padding: EdgeInsets.zero,
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 120.0,
          childAspectRatio: 1.0 //宽高比为1
      ),
      children: <Widget>[
        Icon(Icons.ac_unit),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.free_breakfast),
      ],
    );
  }
}

3 GridView.count 是 SliverGridDelegateWithFixedCrossAxisCount的快捷构建方式

class MyGridView3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      crossAxisCount:5,
      childAspectRatio: 0.5, //宽高比为1,
      children: <Widget>[
        Icon(Icons.ac_unit),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.free_breakfast),
      ],
    );
  }
}

4 GridView.extent 是 SliverGridDelegateWithMaxCrossAxisExtent 的快捷构建方式

class MyGridView4 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.extent(
      maxCrossAxisExtent:300,
      childAspectRatio: 1, //宽高比为1,
      children: <Widget>[
        Icon(Icons.ac_unit),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.free_breakfast),
      ],
    );
  }
}

5 GridView.builder

上面我们介绍的GridView都需要一个widget数组作为其子元素，这些方式都会提前将所有子widget都构建好，所以只适用于子widget数量比较少时，当子widget比较多时，我们可以通过GridView.builder来动态创建子widget。GridView.builder 必须指定的参数有两个：

GridView.builder(
 ...
 required SliverGridDelegate gridDelegate, 
 required IndexedWidgetBuilder itemBuilder,
)

class MyGridView5 extends StatefulWidget {
  @override
  State<MyGridView5> createState() => MyGridView5State();
}

class MyGridView5State extends State<MyGridView5> {
  List<IconData> _icons = []; //保存Icon数据

  @override
  void initState() {
    super.initState();
    // 初始化数据
    _retrieveIcons();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, //每行三列
        childAspectRatio: 1.0, //显示区域宽高相等
      ),
      itemCount: _icons.length,
      itemBuilder: (context, index) {
        //如果显示到最后一个并且Icon总数小于200时继续获取数据
        if (index == _icons.length - 1 && _icons.length < 200) {
          print("${index}");
          _retrieveIcons();
        }
        return Icon(_icons[index]);
      },
    );
  }

  //模拟异步获取数据
  void _retrieveIcons() {
    Future.delayed(Duration(milliseconds: 200)).then((e) {
      setState(() {
        _icons.addAll([
          Icons.ac_unit,
          Icons.airport_shuttle,
          Icons.all_inclusive,
          Icons.beach_access,
          Icons.cake,
          Icons.free_breakfast,
        ]);
      });
    });
  }
}