1、通过 GridView.builder 实现网格布局

GridView.builder(
itemCount: 5,
shrinkWrap: true,
physics: new NeverScrollableScrollPhysics(),
//SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//横轴元素个数
crossAxisCount: 3,
//纵轴间距
mainAxisSpacing: 20.0,
//横轴间距
crossAxisSpacing: 10.0,
//子组件宽高长度比例
childAspectRatio: 1.0),
itemBuilder: (BuildContext context, int index) {
//Widget Function(BuildContext context, int index)
return Text('更多游戏', style: TextStyle(fontSize: Screen.width(30)),);
})

案例
Widget getList(context, index) {
return Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Image.network(
listData[index]['imageUrl'],
fit: BoxFit.cover,
),
SizedBox(height: 5),
Text(
listData[index]['title'],
style: TextStyle(
fontSize: 14
),
overflow: TextOverflow.ellipsis,
)
],
),
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.black12
)
),
);
}
Widget build(BuildContext context) {
// TODO: implement build
return Container(
padding: EdgeInsets.all(10),
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
),
itemCount: listData.length,
itemBuilder: getList,
)
);
}

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

getList() {
var tempList = listData.map((val) {
return Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Image.network(
val['imageUrl'],
fit: BoxFit.cover,
),
SizedBox(height: 5),
Text(
val['title'],
style: TextStyle(
fontSize: 14,
color: Colors.red
),
overflow: TextOverflow.ellipsis,
)
],
),
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.black12
)
),
);
});
return tempList.toList();
}
Widget build(BuildContext context) {
// TODO: implement build
return GridView.count(
padding: EdgeInsets.all(10),
crossAxisCount: 2,
crossAxisSpacing: 10,
children: getList(),
);
}

GridView 列表组件 以及动态 GridView的更多相关文章

  1. 9Flutter GridView组件 以及动态GridView

    main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* GridView : 通过GridVi ...

  2. Android中适用于ListView、GridView等组件的通用Adapter

    今天随便逛逛CSDN,看到主页上推荐了一篇文章Android 高速开发系列 打造万能的ListView GridView 适配器,刚好这两天写项目自己也封装了相似的CommonAdapter,曾经也在 ...

  3. 在GridView列表中使用图片显示记录是否包含附件

    在我的前面很多文章中,都介绍过通用附件模块的管理,本篇随笔主要介绍在一些应用模块中的列表展示中,包含附件的记录,在GridView列表界面中使用图标来快速显示是否有附件的情况. 1.通用附件模块的应用 ...

  4. Android学习系列(12)--App列表之拖拽GridView

    根据前面文章中ListView拖拽的实现原理,我们也是很容易实现推拽GridView的,下面我就以相同步骤实现基本的GridView拖拽效果.     因为GridView不用做分组处理,代码处理起来 ...

  5. VUE Angular通用动态列表组件-亦可为自动轮播组件-01-根据数据量自动纵向滚动,鼠标划入停止滚动

    本文为纵向轮播,横向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...

  6. VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动

    本文为横向轮播,纵向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...

  7. Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作

    1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: acit ...

  8. Android精通:View与ViewGroup,LinearLayout线性布局,RelativeLayout相对布局,ListView列表组件

    UI的描述 对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个用于存放 ...

  9. Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作

    1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: aci ...

随机推荐

  1. HDU2020——绝对值排序(java实现,使用map)

    Question Description Input Output Sample Input Sample Output 解题思路简述: 在接收每一个数组的过程中,将负数及其绝对值以键值对的形式存入m ...

  2. 阿里云负载均衡-note

    公网负载均衡实例 公网类型的负载均衡实例可以通过Internet将客户端请求按照您制定的监听规则分发到添加的后端服务器ECS上. 在您创建公网负载均衡实例后,系统会为其分配一个公网服务地址,您可以将您 ...

  3. vue里不同数据的循环,其中的数组对象

    用产品的属性数据说明 页面里显示效果为:要把产品的属性显示到页面上,产品属性为后台自主上传产品的属性,产品的属性不同,所以需要把属性和属性值显示到页面上 产品属性数据为: properties: &q ...

  4. Virtual Judge POJ 2251 Dungeon Master

    三维数组加宽搜 #include <stdlib.h> #include <string.h> #include <stdio.h> ; int c, k, h; ...

  5. 微信或QQ屏蔽了我的域名,已经被微信屏蔽的域名如何在微信打开,如何进行微信域名防封?

    微信域名完全防封是绝对不可能的,这是必须明确的,曾经有人打折<不死域名>的概念,它不是不死,是稍微命长一点,在推广上成本更低一下,效果更好一些, 主要的技术原理是利用了腾讯云的域名安全联盟 ...

  6. [刷题] Leetcode算法 (2020-2-27)

    1.最后一个单词的长度(很简单) 题目: 给定一个仅包含大小写字母和空格 ' ' 的字符串 s,返回其最后一个单词的长度. 如果字符串从左向右滚动显示,那么最后一个单词就是最后出现的单词. 如果不存在 ...

  7. 【vue store的使用方法】(this.$store.state this.$store.getters this.$store.dispatch this.$store.commit)

    vue 页面文件 <template> <div> {{this.$store.state.count}}<br/> {{count}}<br/> {{ ...

  8. 页面在谷歌浏览器和IE浏览器顶部多出空白行,火狐显示正常

    引起这个问题的原因是用系统自带记事本打开过Tinkphp的模板文件,因为记事本不支持UTF8无BOM格式编码,打开之后这个编码格式丢失,转为ANSI格式的编码了: 解决的办法是:用Notepad++或 ...

  9. 【网易官方】极客战记(codecombat)攻略-地牢-攻破突袭

    关卡连接: https://codecombat.163.com/play/level/hack-and-dash 通过加速药来逃离地牢精灵 简介: 空气中弥漫着危险的气息.你应该从地牢里逃出来. 但 ...

  10. 【网易官方】极客战记(codecombat)攻略-地牢-恐惧之门

    关卡连接: https://codecombat.163.com/play/level/dread-door 恐惧之门后藏满宝藏 简介: while-true 循环可以使用任何方法,如: while ...