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. B - 青蛙的约会

    两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面. 它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止. 可是它们出发之前忘记了一件很重要的事情,既没有问清楚对方 ...

  2. codeblocks汉化

    1.- 汉化包 腾讯微云 2.首先打开codeblocks安装文件夹,如:D:\CodeBlocks\share\CodeBlocks\locale\zh_CN,注意:zh_CN文件夹需自行创建 3. ...

  3. MFC对话框常用操作文章收藏

    1.改变控件文本 参考链接:https://blog.csdn.net/active2489595970/article/details/88856235 所有控件的文本都可以用这种方式动态改变. 2 ...

  4. 【STM32H7教程】第60章 STM32H7的DAC应用之定时器触发实现DMA方式双通道波形

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第60章       STM32H7的DAC应用之定时器触发实 ...

  5. Unity中引入Supersocket.ClientEngine并测试

    在使用Supersocket Server的过程中,发现Server是不支持.net 3.5的. 1.Server端中的几个Command: namespace SuperSocketProtoSer ...

  6. slice 实现原理

    package main /* #include <stdlib.h> */ import "C" import ( "unsafe" " ...

  7. 记manjaro图形驱动删除后的一次补救

    #一.前言 众所周知,NVIDIA的闭源驱动在Linux上的兼容性不是很好,再加上我不玩游戏,于是我就想卸载独显只留核显.我以为我装了独显和核显两种驱动,原本想直接删除独显驱动,没想到删除的是bumb ...

  8. 图的最短路径算法Dijkstra算法模板

    Dijkstra算法:伪代码 //G为图,一般设为全局变量,数组d[u]为原点到达个点的额最短路径, s为起点 Dijkstra(G, d[u], s){ 初始化: for (循环n次){ u = 是 ...

  9. CSP2019第一轮游记

    Day -1 发现还有\(2\)天就初赛了\((?)\) 赶紧复习\(ing\) 然后基础知识基本上都不知道 后面的大题--全靠蒙 感觉第一轮就要\(\mathrm{AFO}\)啊\(QwQ\) Da ...

  10. 转载:EQ

    https://blog.csdn.net/qiumingjian/article/details/46326269 https://blog.csdn.net/sszhouplus/article/ ...