Flutter组件学习四-GridView组件

Flutter组件之GridView

1、GridView 组件的常用参数

当数据量很大的时候用矩阵方式排列比较清晰。此时我们可以用网格列表组件 GridView 实

现布局。

• 1、可以通过 GridView.count 实现网格布局
• 2、通过 GridView.builder 实现网格布局

常用属性：

名称	类型	说明
scrollDirection	Axis	滚动方法
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
crossAxisSpacing	double	水平子 Widget 之间间距
mainAxisSpacing	double	垂直子 Widget 之间间距
crossAxisCount	int	一行的 Widget 数量
childAspectRatio	double	子 Widget 宽高比例
children		[ ]
gridDelegate	SliverGridDelegateWithFixedCrossAxisCount(常用) SliverGridDelegateWithMaxCrossAxisExtent	控制布局主要用在 GridView.builder 里面

2、代码示例

2.1、GridView

import 'package:flutter/material.dart';

// 引入数据文件
import 'res/listData.dart';

// 自定义GridView，显示块
class MyGridView extends StatelessWidget {
  List<Widget> _getListData() {
    List<Widget> list = new List();

    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        child: Text(
          '这是第$i条数据',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        color: Colors.blue,
        // height: 400,  //设置高度没有反应
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //水平子 Widget 之间间距
      crossAxisSpacing: 10,
      //垂直子 Widget 之间间距
      mainAxisSpacing: 10,
      padding: EdgeInsets.all(10),
      //一行的 Widget 数量
      crossAxisCount: 2,
      //一行显示的文本数据
      children: _getListData(),
    );
  }
}

// 矩形网格 方式一， GridView.count
class MyGridView1 extends StatelessWidget {
  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value["imageUrl"]),
            SizedBox(height: 12),
            Text(value["title"],
                textAlign: TextAlign.center, style: TextStyle(fontSize: 20)),
          ],
        ),
        decoration: BoxDecoration(
            border: Border.all(
                color: Color.fromRGBO(230, 230, 230, 0.9), width: 1.0)),
      );
    });

    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //水平子 Widget 之间间距
      crossAxisSpacing: 10,
      //垂直子 Widget 之间间距
      mainAxisSpacing: 10,
      padding: EdgeInsets.all(10),
      //一行的 Widget 数量
      crossAxisCount: 2,
      //一行显示的文本数据
      children: this._getListData(),
    );
  }
}

// 矩形网格 方式二。使用 GridView.builder
class MyGridView2 extends StatelessWidget {
  Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]["imageUrl"]),
          SizedBox(height: 12),
          Text(listData[index]["title"],
              textAlign: TextAlign.center, style: TextStyle(fontSize: 20)),
        ],
      ),
      decoration: BoxDecoration(
          border: Border.all(
              color: Color.fromRGBO(230, 230, 230, 0.9), width: 1.0)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: listData.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //横轴元素个数
            crossAxisCount: 2,
            //纵轴间距
            mainAxisSpacing: 20.0,
            //横轴间距
            crossAxisSpacing: 10.0,
            //子组件宽高长度比例
            childAspectRatio: 1),
        itemBuilder: this._getListData);
  }
}

资源文件 listData (res/listData.dart)

  List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },

      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/6.png',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      },
      {
        "title": 'white-dragon',
        "author": 'Mohamed Chahin',
        "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      },
  ];

在页面中使用：

import 'package:flutter_app/MyGridView.dart';

void main() => runApp(MyMaterialApp());

class MyMaterialApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "test",
        home: new Scaffold(
          // 设置title
          appBar: AppBar(title: Text("jeklsjflk")),
          body: MyGridView2(),
        ));
  }
}