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 ...
随机推荐
- B - 青蛙的约会
两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面. 它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止. 可是它们出发之前忘记了一件很重要的事情,既没有问清楚对方 ...
- codeblocks汉化
1.- 汉化包 腾讯微云 2.首先打开codeblocks安装文件夹,如:D:\CodeBlocks\share\CodeBlocks\locale\zh_CN,注意:zh_CN文件夹需自行创建 3. ...
- MFC对话框常用操作文章收藏
1.改变控件文本 参考链接:https://blog.csdn.net/active2489595970/article/details/88856235 所有控件的文本都可以用这种方式动态改变. 2 ...
- 【STM32H7教程】第60章 STM32H7的DAC应用之定时器触发实现DMA方式双通道波形
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第60章 STM32H7的DAC应用之定时器触发实 ...
- Unity中引入Supersocket.ClientEngine并测试
在使用Supersocket Server的过程中,发现Server是不支持.net 3.5的. 1.Server端中的几个Command: namespace SuperSocketProtoSer ...
- slice 实现原理
package main /* #include <stdlib.h> */ import "C" import ( "unsafe" " ...
- 记manjaro图形驱动删除后的一次补救
#一.前言 众所周知,NVIDIA的闭源驱动在Linux上的兼容性不是很好,再加上我不玩游戏,于是我就想卸载独显只留核显.我以为我装了独显和核显两种驱动,原本想直接删除独显驱动,没想到删除的是bumb ...
- 图的最短路径算法Dijkstra算法模板
Dijkstra算法:伪代码 //G为图,一般设为全局变量,数组d[u]为原点到达个点的额最短路径, s为起点 Dijkstra(G, d[u], s){ 初始化: for (循环n次){ u = 是 ...
- CSP2019第一轮游记
Day -1 发现还有\(2\)天就初赛了\((?)\) 赶紧复习\(ing\) 然后基础知识基本上都不知道 后面的大题--全靠蒙 感觉第一轮就要\(\mathrm{AFO}\)啊\(QwQ\) Da ...
- 转载:EQ
https://blog.csdn.net/qiumingjian/article/details/46326269 https://blog.csdn.net/sszhouplus/article/ ...