Flutter 学习：GridView组件以及动态GridVie

一.复习上一节

• listView动态列表实现两种方式

1.通过for循环遍历数据 创建itemView
2.通过ListView.build实现 需要itemcount 和itemBuild参数

二.GridView常用属性

1 .GridView创建网格有很多种，主要常用的两种

1.通过GridVIew.count实现网格布局
2.通过GridView.build实现网格布局

2.常用属性

• scrollDirecation:滚动方法
• padding:内边距
• resovle：组件反向排序
• crossAxisCount：一行展示几个
• childAspectRation：子View的宽高比例
• child：数组放入子view
• grideDelegate：控制布局样式 用在GrideView.build里面,

三.GridVIew.count实现网格布局

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

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

class MyContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(appBar: AppBar(title: Text("标题")), body: MyBody()));
  }
}

class MyBody extends StatelessWidget {
  List<Widget> _getItemView() {
    var list = listData.map((value) {
      return Container(
        alignment: Alignment.center,
        child: Column(
          //竖向排布的布局
          children: <Widget>[
            Image.network(value["iamge"]),
            SizedBox(height: 10),
            Text(value["title"]),
            SizedBox(height: 10),
            Text(value["subTitle"])
          ],
        ),
        decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
      );
    });

    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      childAspectRatio: 0.7,
      crossAxisCount: 2,
      crossAxisSpacing: 10,
      //水平子view的间距
      mainAxisSpacing: 10,
      //竖直子view 的间距
      children: this._getItemView(),
    );
  }
}

• 注意

1. Column 组件和listView组件很相似都是竖向排列但是有区别后面讲解。
2. SizedBox 组件用来实现 居上边距。
3. list.map 返回的是(xx,xx)需要tolist转换成集合。
4. gridView 子view的heigth失效，需要结合childAspectRatio来设置子view 的高度。

四.GridVIew.build实现网格布局

• GridView.build 和ListView.build 使用方法相同

class MyBody extends StatelessWidget {
  Widget _getItemView(context, index) {
    return Container(
      alignment: Alignment.center,
      child: Column(
        //竖向排布的布局
        children: <Widget>[
          Image.network(listData[index]["iamge"]),
          SizedBox(height: 10),
          Text(listData[index]["title"]),
          SizedBox(height: 10),
          Text(listData[index]["subTitle"])
        ],
      ),
      decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: 0.7, //宽高比
          crossAxisSpacing: 10, //水平间距
          mainAxisSpacing: 10, //垂直间距
          crossAxisCount: 2),
      itemBuilder: this._getItemView,
      itemCount: listData.length,
    );
  }
}

• 注意

1.GridView和listView 一样需要 itemBuilder 和itemCount。

2. GridView.build中没有设置相应间距、行数等参数需要使用gridDelegate 完成（参数 输入SliverGrid敲with回车）。
3. GridView中不设置gridDelegate会报错必须要设置。

• 效果图

  
  image.png

总结

1.GridVIew.count实现网格布局

• gridView 子view的heigth失效，需要结合childAspectRatio来t调整子view 的高度。

2.GridView.build实现网格布局

• GridView和listView 一样需要 itemBuilder 和itemCount。
• GridView.build中没有设置相应间距、行数等参数需要使用gridDelegate 完成（参数 输入SliverGrid敲with回车）。

3. Column组件用来实现竖向排列布局

Column(children: <Widget>[])

4. SizedBox组件用来实现间距

SizedBox(height: 10)