Flutter——GridView组件(网格列表组件)
GridView组件的常用参数:
名称 | 类型 | 说明 |
scrollDirection
|
Axis
|
滚动方法
|
padding |
EdgeInsetsGeometry
|
内边距
|
resolve
|
bool
|
组件反向排序
|
crossAxisSpacing
|
double
|
水平子 Widget 之间间距
|
mainAxisSpacing
|
double
|
垂直子 Widget 之间间距
|
crossAxisCount
|
int
|
一行的 Widget 数量
|
childAspectRatio
|
double
|
子 Widget 宽高比例
|
children
|
<Widget>[]
|
|
gridDelegate
|
SliverGridDelegateWithFix
edCrossAxisCount(常用)
SliverGridDelegateWithMax
CrossAxisExtent
|
控制布局主要用在
GridView.builder 里面
|
GridView.count实现静态网格布局
import 'package:flutter/material.dart'; void main(){
runApp(MaterialApp(
title: "GridView",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
padding: EdgeInsets.all(5.0),
children: <Widget>[
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
Container(
color: Colors.pink,
),
],
),
);
}
}
GridView.builder实现动态网格列表
import 'package:flutter/material.dart'; void main(){
runApp(MaterialApp(
title: "GridView",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
List list = new List<String>();
MyApp() {
for(var i = 0; i < 9; i++) {
this.list.add("图片$i");
}
} @override
Widget build(BuildContext context) {
return Scaffold(
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( // 注意,使用了GridView.builder,又要设置网格属性的话,要用这个属性!
crossAxisCount: 3,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
),
itemCount: this.list.length,
itemBuilder: (context,index) {
return Container(
color: Colors.pink,
child: Center(
child: Text(this.list[index]),
)
);
}
)
);
}
}
Flutter——GridView组件(网格列表组件)的更多相关文章
- Flutter中的可滚动列表组件-PageView
PageVIew,可滚动的视图列表组件,而且每一个子组件的大小都和视图窗口大小一样. 属性: controller -> PageController 用于控制视图页面滚动到的位置 childr ...
- 【Flutter学习】基本组件之基本网格Gradview组件
一,概述 数据量很大的时用矩阵方式排列比较清晰,此时用网格列表组件,即为GridView组件,可实现多行多列的应用场景. 使用GridView创建网格列表有多种方式: GridView.count 通 ...
- flutter GridView 网格布局
当数据量很大的时候用矩阵方式排列比较清晰.此时我们可以用网格列表组件 GridView 实 现布局. GridView 创建网格列表有多种方式,常用有以下两种. 1.可以通过 GridView.cou ...
- Flutter学习笔记(12)--列表组件
如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...
- flutter中的列表组件
列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类: 垂直列表 ...
- Flutter 实战(一):列表项内容可自定义的列表组件
前言 本篇文的目的是熟练掌握 Flutter 组件的封装,并且使用回调函数实现主要功能. 本组件的设计灵感来源于 Element 组件库的 table 组件. 正题 定义回调函数 在此之前,必须要了解 ...
- Android精通:View与ViewGroup,LinearLayout线性布局,RelativeLayout相对布局,ListView列表组件
UI的描述 对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个用于存放 ...
- Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作
1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: acit ...
- Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作
1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: aci ...
随机推荐
- 在Windows操作系统中安装MongoDB
如何在Windows操作系统中安装MongoDB: https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/ 启动Mon ...
- Spring Boot连接MySQL长时间不连接后报错`com.mysql.cj.core.exceptions.ConnectionIsClosedException: No operations allowed after connection closed.`的解决办法
报错:com.mysql.cj.core.exceptions.ConnectionIsClosedException: No operations allowed after connection ...
- CSS - clearfix清除浮动
首先,我们来解释一下为什么要使用 clearfix(清除浮动). 通常我们在写html+css的时候,如果一个父级元素内部的子元素是浮动的(float),那么常会发生父元素不能被子元素正常撑开的情况, ...
- HDU 1159 最长公共子序列
Common Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- linux /etc/profile bashrc bash_profile
文件: /etc/profile ~/.bashrc 和 ~/.bash_profile 的使用区别: /etc/profile: 全局 环境变量等,在机器重启后执行一次, 用于设置环境变量,更 ...
- [MSCOCO] Ubuntu16.04下使用 tylin/coco-caption 评价 MSCOCO Caption(配置,及Demo运行)
Github链接:https://github.com/tylin/coco-caption Ubuntu版本信息 Linux内核版本号:Linux version 4.15.0-51-generic ...
- mybatis ibatis 使用时出现 语法错误
最近在使用mybatis的时候遇到一个问题,在执行数据库分页查询的时候报语法错误,但是检查sql之后并没有发现语法错误.在反复查询各种资料后(百度搜索‘mybatis分页’),最后发现是sql语句参数 ...
- 义隆单片机学习笔记之(一) 硬件框架&资源下载
参考网址: 点击链接或右键链接地址 (台湾义隆官网)http://www.emc.com.tw/chs/tech_8bit.asp (EM78P153K官方资料)http://www.emc.com. ...
- vue 解决jsonp跨域
在Vue中使用jsonp 参考链接:https://blog.csdn.net/m0_38134431/article/details/87930647 在vue中使用vue-jsonp 参考链接:h ...
- SpringBoot异步编程
异步调用:当我们执行一个方法时,假如这个方法中有多个耗时的任务需要同时去做,而且又不着急等待这个结果时可以让客户端立即返回然后,后台慢慢去计算任务.当然你也可以选择等这些任务都执行完了,再返回给客户端 ...