Flutter组件学习（19）GridView

介绍

GridView和ListView的大多数参数都是相同的，它们的含义也都相同，

唯一需要关注的是gridDelegate参数，类型是SliverGridDelegate，它的作用是控制GridView子组件如何排列(layout)

Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithFixedCrossAxisCount

该子类实现了一个横轴为固定数量子元素的layout算法

crossAxisCount	横轴子元素的数量
mainAxisSpacing	主轴方向的间距
crossAxisSpacing	横轴方向子元素的间距
childAspectRatio	子元素在横轴长度和主轴长度的比例。 由于crossAxisCount指定后，子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度

可以发现，子元素的大小是通过crossAxisCount和childAspectRatio两个参数共同决定的。注意，这里的子元素指的是子组件的最大显示空间，注意确保子组件的实际大小不要超出子元素的空间。

可以有以下两种定义方式

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3, //横轴三个子widget
      childAspectRatio: 1.0 //宽高比为1时，子widget
  )
)



GridView.count( 
  crossAxisCount: 3,
  childAspectRatio: 1.0,
)

SliverGridDelegateWithMaxCrossAxisExtent

该子类实现了一个横轴子元素为固定最大长度的layout算法

maxCrossAxisExtent为子元素在横轴上的最大长度，之所以是“最大”长度，是因为横轴方向每个子元素的长度仍然是等分的，举个例子，如果ViewPort的横轴长度是450，那么当maxCrossAxisExtent的值在区间[450/4，450/3)内的话，子元素最终实际长度都为112.5，而childAspectRatio所指的子元素横轴和主轴的长度比为最终的长度比。其它参数和SliverGridDelegateWithFixedCrossAxisCount相同。

两种方式是等价的

GridView(
  padding: EdgeInsets.zero,
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 120.0,
      childAspectRatio: 2.0 //宽高比为2
  ),
  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),
  ],
);


GridView.extent(
   maxCrossAxisExtent: 120.0,
   childAspectRatio: 2.0,
   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),
   ],
 );

 

GridView.builder

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyAppText());
}

class MyAppText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text('GridView练习'),
          textTheme:
              TextTheme(title: TextStyle(fontSize: 18, color: Colors.yellow)),
        ),
        body: GridViewClass(),
      ),
    );
  }
}

class GridViewClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<String>list=new List();
    list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844156&di=f1c754f5753835912ddf00f763e13e65&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Ffd039245d688d43fb6973ae77d1ed21b0ef43bec.jpg');
    list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844156&di=21132fe8a0731c3f3823a2602b5bb6c3&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F023b5bb5c9ea15ce1274e73ab4003af33a87b26e.jpg');
    list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844155&di=21f352bf854d3546967dd9c5f199c467&imgtype=0&src=http%3A%2F%2Fimg1.lukou.com%2Fstatic%2Fp%2Fblog%2Fmedium%2F0007%2F15%2F94%2F26%2F7159426.jpg');
    list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844154&di=66885dff3735acc2170b4c3c6290ef03&imgtype=0&src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2016%2F415%2F534%2F3377435514_434466171.jpg');
    list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844152&di=732c41d365e9c0c25c95745f6c12b96e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20181220%2F4866e7e0dd434dc9aa8da2c6ccc436d6.jpg');

    return GridView.builder(
      itemCount: list.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          childAspectRatio: 1
        ),
        itemBuilder: (BuildContext context,var index){
          return Image.network(
            list[index],
            fit: BoxFit.fill,
          );
        }
    );
  }
}