flutter 第九天 （再记一次坑 GridView）

因为换了windows 10 系统 导致现在连不上模拟器

image.png

flutter上面是

image.png

正在解决

解决不了 又换回了win7 系统 唉~~~ 任务紧 没办法一点一点的弄

先说页面跳转和返回把
跳转
Navigator.push(context, MaterialPageRoute(builder: (context) => 第二个页面的名字));
返回
Navigator.pop(context);

GridView

今天，我们来聊聊网格布局GridView。

image

构造数据（生成Widgets）

List getDataList() {
    List list = [];
    for (int i = 0; i < 100; i++) {
      list.add(i.toString());
    }
    return list;
  }

  List getWidgetList() {
    return getDataList().map((item) => getItemContainer(item)).toList();
  }

  Widget getItemContainer(String item) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        item,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      color: Colors.blue,
    );
  }

GridView有好几种写法，万变不离其宗。我们一个个来看看。

写法一：GridView.count

GridView.count(
      //水平子Widget之间间距
      crossAxisSpacing: 10.0,
      //垂直子Widget之间间距
      mainAxisSpacing: 30.0,
      //GridView内边距
      padding: EdgeInsets.all(10.0),
      //一行的Widget数量
      crossAxisCount: 2,
      //子Widget宽高比例
      childAspectRatio: 2.0,
      //子Widget列表
      children: getWidgetList(),
    );

效果：

image

对于这种写法，此时单个Widget的宽高已经不起作用了。
在我上面构造数据的那一步中，我并没有指定Container的的宽高，这里我们就将其宽高设置为5，看下效果。

Widget getItemContainer(String item) {
    return Container(
      width: 5.0,
      height: 5.0,
      alignment: Alignment.center,
      child: Text(
        item,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      color: Colors.blue,
    );
  }

image

可以看出没有效果。因为，我们在这里已经指定了每一行分成几列以及宽高比，还有边距等等。所以，我们后面再指定单个item的宽高，已经无效。

其实GridView跟我之前讲过的ListView，基本类似，都是BoxScrollView的子类。

image

image

写法二：GridView.builder

 @override
  Widget build(BuildContext context) {
    List datas = getDataList();
    return GridView.builder(
        itemCount: datas.length,
        //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
            crossAxisCount: 3,
            //纵轴间距
            mainAxisSpacing: 20.0,
            //横轴间距
            crossAxisSpacing: 10.0,
            //子组件宽高长度比例
            childAspectRatio: 1.0),
        itemBuilder: (BuildContext context, int index) {
          //Widget Function(BuildContext context, int index)
          return getItemContainer(datas[index]);
        });
  }

abstract class SliverGridDelegate gridDelegate用来指定GridView的构建方式，具体实现有两个。

image

刚才这里例子，使用的SliverGridDelegateWithFixedCrossAxisCount。下面，我们来使用它的另一个实现SliverGridDelegateWithMaxCrossAxisExtent。

写法三：GridView.builder（SliverGridDelegateWithMaxCrossAxisExtent）

GridView.builder(
      itemCount: datas.length,
      itemBuilder: (BuildContext context, int index) {
        return getItemContainer(datas[index]);
      },
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        //单个子Widget的水平最大宽度
        maxCrossAxisExtent: 200,
        //水平单个子Widget之间间距
        mainAxisSpacing: 20.0,
        //垂直单个子Widget之间间距
        crossAxisSpacing: 10.0
      ),
    );

对于SliverGridDelegateWithMaxCrossAxisExtent而言，水平方向元素个数不再固定，其水平个数也就是有几列，由maxCrossAxisExtent和屏幕的宽度以及padding和mainAxisSpacing等决定。

例如：我这里的虚拟机宽度为400，当maxCrossAxisExtent:50时，有8列；当maxCrossAxisExtent:100时，有4列。如下：

maxCrossAxisExtent	效果
内容	内容
maxCrossAxisExtent:50

image

|
| maxCrossAxisExtent:100 |

image

|

写法四：

@override
  Widget build(BuildContext context) {
    List datas = getDataList();
    return GridView.custom(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0, ),
        childrenDelegate: SliverChildBuilderDelegate((context, position) {
          return getItemContainer(datas[position]);
        }, childCount: datas.length));
  }

image

这几个参数，上面都讲过了，不再赘述了。

Gridview作者：徐爱卿
Gridview链接：https://www.jianshu.com/p/fb3bf633ee12

到今天 我的基础熟悉的差不多了 以后再写就是扩展了

上一篇------------------------------最后一篇 其他的都是扩展的文章 有兴趣的大胸弟可以关注专题