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云端一体化架构