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. C语言预处理学习记录

    #include<stdio.h> #define LOCAL //无参宏 //条件编译 #ifdef LOCAL int a=1; #else int a=2; #endif #ifnd ...

  2. 【Python】BMI指数 计算器

    身体质量指数 (Body Mass Index, 简称BMI), 亦称克托莱指数, 是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准.BMI 值超标,意味着你必须减肥了. 在线版:https: ...

  3. too old

    The working copy at “” is too old (format 10) to work with client version ‘1.9.7(r18000392)’ 原因:svn版 ...

  4. 第三篇,ajax 和 axios、fetch的区别

    1.jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () ...

  5. 钉钉内网穿透工具在windows的使用。

    钉钉内网穿透工具在windows环境下使用 1.WIN+R,然后cmd,调出dos控制台 2.进入内网穿透程序ding.exe所在目录 3.执行 ./ding.exe -config=ding.cfg ...

  6. webpack4.41.0配置三(插件minCssExtract/ DefinePlugin/Html)

    (注:如无特殊说明这里的配置文件都指的是webpack.config.js) minCssExtract 我们通常期望js和js文件一起,css和css文件一起.该插件将CSS提取到单独的文件中.它为 ...

  7. 每天进步一点点------ModelSim仿真Altera的ROM

    1. 在QuartusII中生成rom的初始化文件,可以是hex,也可以是mif.MIF文件的格式很简单明了,所以我一向都是用MIF. 2.下载convert_hex2ver.dll文件,conver ...

  8. Python实现AVL树

    参考: https://www.cnblogs.com/linxiyue/p/3659448.html?utm_source=tuicool&utm_medium=referral class ...

  9. Git的基本使用 -- 创建本地仓库

    下载安装 Git-2.25.0-64-bit .exe 查看是否安装成功 git --version 创建本地仓库 创建一个文件夹用于存放项目文件 在创建好的文件中右键选择 Git Bash Here ...

  10. 欧拉函数-bzoj2818-简单推导

    This article is made by Jason-Cow.Welcome to reprint.But please post the writer's address. http://ww ...