GridView 列表组件 以及动态 GridView

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的更多相关文章
- 9Flutter GridView组件 以及动态GridView
main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* GridView : 通过GridVi ...
- Android中适用于ListView、GridView等组件的通用Adapter
今天随便逛逛CSDN,看到主页上推荐了一篇文章Android 高速开发系列 打造万能的ListView GridView 适配器,刚好这两天写项目自己也封装了相似的CommonAdapter,曾经也在 ...
- 在GridView列表中使用图片显示记录是否包含附件
在我的前面很多文章中,都介绍过通用附件模块的管理,本篇随笔主要介绍在一些应用模块中的列表展示中,包含附件的记录,在GridView列表界面中使用图标来快速显示是否有附件的情况. 1.通用附件模块的应用 ...
- Android学习系列(12)--App列表之拖拽GridView
根据前面文章中ListView拖拽的实现原理,我们也是很容易实现推拽GridView的,下面我就以相同步骤实现基本的GridView拖拽效果. 因为GridView不用做分组处理,代码处理起来 ...
- VUE Angular通用动态列表组件-亦可为自动轮播组件-01-根据数据量自动纵向滚动,鼠标划入停止滚动
本文为纵向轮播,横向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...
- VUE Angular通用动态列表组件-亦可为自动轮播组件-02-根据数据量自动横向滚动,鼠标划入停止滚动
本文为横向轮播,纵向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...
- Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作
1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: acit ...
- Android精通:View与ViewGroup,LinearLayout线性布局,RelativeLayout相对布局,ListView列表组件
UI的描述 对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个用于存放 ...
- Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作
1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: aci ...
随机推荐
- HDU2020——绝对值排序(java实现,使用map)
Question Description Input Output Sample Input Sample Output 解题思路简述: 在接收每一个数组的过程中,将负数及其绝对值以键值对的形式存入m ...
- 阿里云负载均衡-note
公网负载均衡实例 公网类型的负载均衡实例可以通过Internet将客户端请求按照您制定的监听规则分发到添加的后端服务器ECS上. 在您创建公网负载均衡实例后,系统会为其分配一个公网服务地址,您可以将您 ...
- vue里不同数据的循环,其中的数组对象
用产品的属性数据说明 页面里显示效果为:要把产品的属性显示到页面上,产品属性为后台自主上传产品的属性,产品的属性不同,所以需要把属性和属性值显示到页面上 产品属性数据为: properties: &q ...
- Virtual Judge POJ 2251 Dungeon Master
三维数组加宽搜 #include <stdlib.h> #include <string.h> #include <stdio.h> ; int c, k, h; ...
- 微信或QQ屏蔽了我的域名,已经被微信屏蔽的域名如何在微信打开,如何进行微信域名防封?
微信域名完全防封是绝对不可能的,这是必须明确的,曾经有人打折<不死域名>的概念,它不是不死,是稍微命长一点,在推广上成本更低一下,效果更好一些, 主要的技术原理是利用了腾讯云的域名安全联盟 ...
- [刷题] Leetcode算法 (2020-2-27)
1.最后一个单词的长度(很简单) 题目: 给定一个仅包含大小写字母和空格 ' ' 的字符串 s,返回其最后一个单词的长度. 如果字符串从左向右滚动显示,那么最后一个单词就是最后出现的单词. 如果不存在 ...
- 【vue store的使用方法】(this.$store.state this.$store.getters this.$store.dispatch this.$store.commit)
vue 页面文件 <template> <div> {{this.$store.state.count}}<br/> {{count}}<br/> {{ ...
- 页面在谷歌浏览器和IE浏览器顶部多出空白行,火狐显示正常
引起这个问题的原因是用系统自带记事本打开过Tinkphp的模板文件,因为记事本不支持UTF8无BOM格式编码,打开之后这个编码格式丢失,转为ANSI格式的编码了: 解决的办法是:用Notepad++或 ...
- 【网易官方】极客战记(codecombat)攻略-地牢-攻破突袭
关卡连接: https://codecombat.163.com/play/level/hack-and-dash 通过加速药来逃离地牢精灵 简介: 空气中弥漫着危险的气息.你应该从地牢里逃出来. 但 ...
- 【网易官方】极客战记(codecombat)攻略-地牢-恐惧之门
关卡连接: https://codecombat.163.com/play/level/dread-door 恐惧之门后藏满宝藏 简介: while-true 循环可以使用任何方法,如: while ...