Flutter开发之GridView组件（20）

参考文章：https://www.jianshu.com/p/fb3bf633ee12

GridView有5种写法

写法一：GridView.count （body: myGridView1()）
写法二：GridView.builder （body: myGridView2()）
写法三：GridView.builder（SliverGridDelegateWithMaxCrossAxisExtent）（body: myGridView3()）
写法四：GridView.custom (childrenDelegate: SliverChildBuilderDelegate）（body: myGridView4()）
写法五：GridView.extent(允许您指定最大像素宽度) （body: myGridView5()）

建一个页面

import 'package:flutter/material.dart';// widget 封装
Widget initBodyCustom() {return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Container(padding: EdgeInsets.only(top: 20),width: 200,height: 60,color:Colors.orange,child: Text("This is First Screen11",textAlign:TextAlign.center,),),],),);
}// 构建路由传参
class GridViewTest extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("GardViewTest"),backgroundColor: Colors.orange,),body: initBodyCustom(),// body: myGridView1(),// body: myGridView2(context),// body: myGridView3(context),// body: myGridView4(context),body: myGridView5(context),);}
}

1、 body: initBodyCustom(),

2、准备数据源

List<String> getDataList() {List<String> list = [];for (int i = 0; i < 100; i++) {list.add(i.toString());}return list;
}// map 的用法 <Widget> 返回值类型
// .toList()返回迭代器返回的元素的数组
List<Widget>getWidgetList(){return getDataList().map<Widget>((String item){return getItemContainer(item);}).toList();
}// ItemView
Widget getItemContainer(String item) {return GestureDetector(onTap: () {//处理点击事件print("哈哈哈。。。哈哈哈哈。。。");},child: Container(color: Colors.blue,child: new Column(//mainAxisAlignment: MainAxisAlignment.center,children:<Widget>[Expanded(flex:3,//这个item占据剩余空间的份数，因为总数为3，所以此处占据2/3child: Container(//alignment: Alignment.center,alignment: Alignment(0.0,0.5),//padding: EdgeInsets.only(top: 35),child: Text(item,style: TextStyle(color: Colors.white,fontSize: 20),),),),Expanded(flex:1,//这个item占据剩余空间的份数，因为总数为3，所以此处占据2/3child: Container(//alignment: Alignment(-1.0,0),//alignment:Alignment.center,padding: EdgeInsets.only(top: 5),width: 100,height: 40,child: Text("满200减50",textAlign: TextAlign.center, // 与上面Alignment冲突style: TextStyle(color: Colors.white,fontSize: 16),),),),],),),);
}

getItemContainer（）相当于iOS 中的cell 或者 Item 一个公共组件

3、body: myGridView1(),

// GridView 1 封装
Widget myGridView1() {return GridView.count(//水平子Widget之间间距crossAxisSpacing: 10.0,//垂直子Widget之间间距mainAxisSpacing: 30.0,//GridView内边距padding: EdgeInsets.all(10.0),//一行的Widget数量crossAxisCount: 2,//子Widget宽高比例childAspectRatio: 2.0,//子Widget列表children: getWidgetList(),);
}

4、body: myGridView2(),


// GridView 2 封装
Widget myGridView2(BuildContext context) {List<String> datas = getDataList();return GridView.builder(itemCount: datas.length,itemBuilder: (BuildContext context, int index) {//Widget Function(BuildContext context, int index)return getItemContainer(datas[index]);},//SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量WidgetgridDelegate: SliverGridDelegateWithFixedCrossAxisCount(//横轴元素个数crossAxisCount: 3,//纵轴间距mainAxisSpacing: 20.0,//横轴间距crossAxisSpacing: 10.0,//子组件宽高长度比例childAspectRatio: 1.0),);
}

5、body: myGridView3(),

// GridView 3 封装
Widget myGridView3(BuildContext context) {List<String> datas = getDataList();return GridView.builder(itemCount: datas.length,itemBuilder: (BuildContext context, int index) {return getItemContainer(datas[index]);},// 对于SliverGridDelegateWithMaxCrossAxisExtent而言，// 水平方向元素个数不再固定，其水平个数也就是有几列，// 由maxCrossAxisExtent和屏幕的宽度以及padding和mainAxisSpacing等决定。gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(//单个子Widget的水平最大宽度maxCrossAxisExtent: 100,//水平单个子Widget之间间距mainAxisSpacing: 20.0,//垂直单个子Widget之间间距crossAxisSpacing: 10.0),);
}

6、body: myGridView4(),

// GridView 4 封装
Widget myGridView4(BuildContext context) {List<String> datas = getDataList();return GridView.custom(padding: EdgeInsets.all(10),gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,mainAxisSpacing: 10.0,crossAxisSpacing: 20.0,),childrenDelegate: SliverChildBuilderDelegate((context, position) {return getItemContainer(datas[position]);},childCount: datas.length));
}

6、body: myGridView5(),

// GridView 5 封装
Widget myGridView5(BuildContext context) {List<String> datas = getDataList();return GridView.extent(padding: EdgeInsets.all(10),// item 最大宽度200maxCrossAxisExtent: 200.0,mainAxisSpacing: 4.0,crossAxisSpacing: 4.0,children: getWidgetList(),semanticChildCount:datas.length,);
}

最后借一张gif

这里面我还增加了点击- item -的点击事件，只需要把 index 穿过去即可处理。

注意⚠️: 在显示二维列表时，重要的是单元格占用哪一行和哪一列时，应该使用Table或 DataTable。

Flutter开发之GridView组件（20）相关推荐

Flutter开发之ListView组件（21）
欢迎点赞+关注.你的鼓励是我写作的动力! ListView是一个类似列的widget,它的内容对于其渲染框太长时会自动提供滚动. ListView 摘要: 用于组织盒子中列表的特殊Column 可以水 ...
Flutter开发之Stack组件（层叠布局）（19）
移动开发中除了常用的flex 流式布局外,还有一种常用的布局,叫层叠布局.我就学习一下flutter的Stack 以及Positioned 定位. 先看一下效果:文本"大家好" 位 ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
Flutter开发之AlertDialog、AboutDialog对话框组件-2（41）
继上一篇介绍了SimpleDialog对话框组件 Flutter开发之SimpleDialog对话框组件-1(40) 这里再介绍一种带有确定.取消按钮的对话框组件:AlertDialog.AboutD ...
Flutter开发之iOS后台定位开发详解
Flutter开发之iOS后台定位开发详解需求目的开发一个功能持续获取用户的位置发送给后端,PC端会根据后端传来的移动端发送的位置信息,来绘制使用者的运动轨迹. 实现需求是否实现后台定位 ✅ ...
Python全栈9期（第八部分）：CRM开发之curd组件和权限系统-李杰-专题视频课程
Python全栈9期(第八部分):CRM开发之curd组件和权限系统-45人已学习课程介绍学到的不仅仅只是Python,还有培养编程思想! 2018年全套视频<Python全 ...
Flutter开发之ListView添加HeaderView和FooterView-2（39）
参考文章:RecyclerView添加HeaderView和FooterView 接着Flutter开发之ListView添加HeaderView和FooterView-1 继续研究. 通过Recyc ...
Flutter开发之ListView使用第三方flutter_refresh加载更多（37）
在Flutter开发之ListView使用第三方pull_to_refresh加载更多(36) 中我们实现了下拉刷新.上拉分页加载的功能.今天介绍另一个ListView使用第三方flutter_ref ...
Flutter开发之ListView使用第三方pull_to_refresh加载更多（36）
在Flutter开发之ListView下拉刷新&上拉加载更多(35) 中我们实现了下拉刷新.上拉分页加载的功能.但是使用起来非常不方便,且不满一屏时难以处理. 今天介绍ListView使用第三 ...