Flutter：网格布局GridView 的学习

第一次写文章，如果文章中出现错误，请大家指出，我及时修改；
这篇文章主要讲的是GridView.builder来动态创建子的Widget。下面我们注意了解用法：

代码阅读：

GridView.builder(
          itemCount: mDataList.length,      //列表长度，
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,        //交叉轴 子Widget的个数
              crossAxisSpacing: 2,          //交叉轴  分割线宽度
              mainAxisSpacing: 2,     //主轴 分割线宽度
              childAspectRatio: 1         //item的宽高比
          ),
          itemBuilder: (BuildContext context, int index) {
            return _getItem(mDataList[index]);
          },
        ));

• 疑问点：

根据源码的要求：gridDelegate，itemBuilder这个两个参数是必须的，写了之后发现还必须要加上itemCount这个参数，对子布局个数做一个限制，要不然会报错。如图：

微信图片_20190412113324.png

报的是范围错误：item从第19个开始就没有包含在这个集合里面；所以itemCount是必须添加的。（和listView.builder一样）

• 整个界面的代码：

import 'package:flutter/material.dart';

class GridViewPage extends StatefulWidget {
  @override
  GridViewState createState() => GridViewState();
}

const List<String> mDataList = ["重庆", "成都", "长沙", "长春","沧州","常德", "昌都", "长治", "常州", "巢湖", "潮州",
"承德", "郴州", "赤峰", "池州", "崇左", "楚雄", "滁州", "朝阳"];

class GridViewState extends State<GridViewPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text("网格布局"),
        ),
        body: GridView.builder(
          itemCount: mDataList.length,      //列表长度，
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,        //交叉轴 子Widget的个数
              crossAxisSpacing: 2,          //交叉轴  分割线宽度
              mainAxisSpacing: 2,     //主轴 分割线宽度
              childAspectRatio: 1         //item的宽高比
          ),
          itemBuilder: (BuildContext context, int index) {
            return _getItem(mDataList[index]);
          },
        ));
  }

  /// 获取item布局
  Widget _getItem(String city) {
    return Container(
      height: 50,
      color: Colors.blue[300],
      child: Center(
        child: Text(city, style: TextStyle(color: Colors.white, fontSize: 16)),
      ),
    );
  }
}

本文章是对于学习flutter中遇见的问题做记录，和空间的基本用法。个人感觉学习flutter还是要多看源码，和官方的Demo。