Flutter开发：Gridview的使用

Flutter开发：Gridview的使用

Flutter开发中，表格组件是经常要用到的，表格展示数据也是App开发过程中不可缺少的需求的功能，其实Gridview的属性和ListView的属性很接近，那么本篇文章就来聊聊Flutter开发中表格组件Gridview的简单使用。

Gridview常用的几种方式：

1、GridView.count(@required int crossAxisCount)

GridView.count的使用，需要传的是int类型的参数，也就是创建固定数量的item，crossAxisCount表示横轴item的个数（系统默认是横轴）；

2、GridView.extent(@required double maxCrossAxisExtent)

GridView.extent的使用，需要传的是double类型的参数，也就是创建横轴上最大可容纳的item，maxCrossAxisExtent表示横轴item的最大宽度；

3、GridView.builder(@required this.gridDelegate,@required IndexedWidgetBuilder itemBuilder)

适用于widget数量多的时候，通过GridView.builder的使用，动态的创建widget，itemBuilder表示子widget构造器；

4、GridView.custom(@required this.gridDelegate,@required this.childrenDelegate)

GridView.custom的使用，通过两个代理方法gridDelegate和childrenDelegate来创建Gridview，其中gridDelegate是进行布局的代理，控制每列或每行的子widget的数量，以及上下左右间距和宽高比例；childrenDelegate的代理方法有两种实现方式，在使用的时候需要注意二者的区别。

Gridview的简单使用的实例，具体操作如下所示：

1、dart文件的具体实现源码

import 'package:flutter/material.dart';
import 'package:portal/model/workspace_item_data.dart';
import 'package:portal/widgets/widget_warpper.dart';

class WorkspacePage extends StatefulWidget {
  @override
  _WorkspacePageState createState() => _WorkspacePageState();
}

class _WorkspacePageState extends State<WorkspacePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(context, title: "工作台", leading: Container()),
      body: GridView.builder(
        itemCount: listData.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, mainAxisSpacing: 10, crossAxisSpacing: 10, childAspectRatio: 0.9),
        padding: EdgeInsets.all(10),
        itemBuilder: getItem,
      ),
    );
  }
  Widget getItem(context, index) {
    return Container(
      decoration:
      BoxDecoration(border: Border.all(color: Colors.black12, width: 2)),
      child: Column(
        children: [
          Image.network(listData[index]['imageUrl']),
          SizedBox(
            height: 10,
          ),
          Text(listData[index]['title'])
        ],
      ),
    );
  }
}

2、数据源文件，Gridview的itemCount的数据源（为了体现列表效果，刻意多造了几条数据）：

List listData=[
  {
    "title": '行政审批',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/1.png',
  },
  {
    "title": '协同办公',
    "author": 'Google',
    "imageUrl": 'https://www.itying.com/images/flutter/2.png',
  },
  {
    "title": '实名认证',
    "author": 'Alibaba',
    "imageUrl": 'https://www.itying.com/images/flutter/3.png',
  },
  {
    "title": '会议室',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/4.png',
  },
  {
    "title": '企业邮箱',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/5.png',
  },
  {
    "title": '测温',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/6.png',
  },
  {
    "title": '企业文化',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/7.png',
  },];

3、效果图如下所示：

更多的Flutter开发知识可以扫码免费领取！

在这里为了方便大家系统的学习Flutter，这里特意联合了阿里P7架构师和谷歌技术团队共同整理了一份Flutter全家桶学习资料。

内容概要：Flutter技术解析与实战、Flutter进阶学习笔记、Flutter入门与实战和Flutter完整开发实战详解。

内容特点：条理清晰，含图像化表示更加易懂。

由于文章内容比较多，篇幅有限，资料已经被整理成了PDF文档，有需要 Flutter技术解析与实战 完整文档的可扫描下方卡片免费获取！

《Flutter技术解析与实战》

目录

第一章 混合工程

​ ● Flutter工程体系

​ ● 混合工程改造实战

​ ● 混合工程与持续集成

​ ● 快速完成混合工程搭建

​ ● 使用混合栈框架开发

第二章 能力增强

​ ● 基于原生能力的插件扩展

​ ● 基于外接纹理的同层渲染

​ ● 多媒体能力扩展实践

​ ● 富文本能力应用实践

第三章 业务架构设计

​ ● 应用框架设计实践

​ ● 轻量级动态化渲染引擎的设计

​ ● 面向切面编程的设计实践

​ ● 高性能的动态模板渲染实践

第四章 数据统计与性能

​ ● 数据统计框架的设计

​ ● 性能稳定性监控方案的设计

​ ● 高可用框架的设计与实践

​ ● 跨端方案性能对比实践

第五章 企业级应用实战

​ ● 基于Flutter的端结构演进与创新

​ ● Flutter与FaaS云端一体化架构