Flutter中通过循环渲染组件
class ContactsState extends State<Contacts>{
List formList;
initState() {
super.initState();
formList = [
{"icon": Icon(Icons.alarm),"title": '车牌号'},
{"icon": Icon(Icons.album),"title": '所有人'},
{"icon": Icon(Icons.archive),"title": '号牌颜色'},
];
}
Widget buildGrid() {
List<Widget> tiles = [];//先建一个数组用于存放循环生成的widget
Widget content; //单独一个widget组件,用于返回需要生成的内容widget
for(var item in formList) {
tiles.add(
new Row(
children: <Widget>[
new Icon(Icons.alarm),
new Text(item['title']),
]
)
);
}
content = new Column(
children: tiles //重点在这里,因为用编辑器写Column生成的children后面会跟一个<Widget>[],
//此时如果我们直接把生成的tiles放在<Widget>[]中是会报一个类型不匹配的错误,把<Widget>[]删了就可以了
);
return content;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('循环渲染组件案例'),
),
body: new Center(
child: buildGrid(),
)
);
}
}
Flutter中通过循环渲染组件的更多相关文章
- Flutter中的可滚动列表组件-PageView
PageVIew,可滚动的视图列表组件,而且每一个子组件的大小都和视图窗口大小一样. 属性: controller -> PageController 用于控制视图页面滚动到的位置 childr ...
- Flutter 中那么多组件,难道要都学一遍?
在 Flutter 中一切皆是 组件,仅仅 Widget 的子类和间接子类就有 350 多个,整理的 Flutter组件继承关系图 可以帮助大家更好的理解学习 Flutter,回归正题,如此多的组件到 ...
- 在Flutter中嵌入Native组件的正确姿势是...
引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...
- Flutter中Expanded组件用法
Flutter中Expanded组件用法 Expanded组件可以使Row.Column.Flex等子组件在其主轴方向上展开并填充可用空间(例如,Row在水平方向,Column在垂直方向).如果多个子 ...
- <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性
<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性
- vue如何循环渲染element-ui中table内容
对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...
- Flutter中的普通路由与命名路由(Navigator组件)
Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航.并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...
- Flutter中的基础组件之一
一.Text文本组件(单一格式的文本) 是具有单一风格的文本字符串,可以跨多行显示,也可全部显示在同一行中,具体显示样子,取决于布局约束. 常用属性: 1.overflow : TextOverflo ...
- flutter中的按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...
随机推荐
- python学习之列表,元祖,字典
python基础 列表 [ ] stats =[1,2,3,4,5] 元素1,2,3,4,5 下标,索引,角标,初始从0开始 增加 stats.append(7)#append方法添加 stats. ...
- tkinter_战队数据查询系统
# 导入tkinter模块 import tkinter from tkinter import ttk # 导入库 import pymysql # 创建主窗口对象 root = tkinter.T ...
- android studio调试报错:java.lang.RuntimeException: Unable to start activity ComponentInfo
报错信息: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.pro_u_loc/com.e ...
- P5358 [SDOI2019]快速查询
思路:...乱搞数据结构?? 提交:1次 题解: 观察到除了单点就是全局操作,所以我们维护一个全局加法标记add和乘法标记mul和答案sum. 单点修改时,比如我们要把 \(pos\) 位置改成 \( ...
- 【基础算法-ST表】入门 -C++
前言 学了树状数组看到ST表模板跃跃欲试的时候发现完全没思路,因为给出的查询的时间实在太短了!几乎是需要完成O(1)查询.所以ST表到底是什么神仙算法能够做到这么快的查询? ST表 ST表是一个用来解 ...
- MongoDB 运维实总结
一.MongoDB 集群简介 MongoDB是一个基于分布式文件存储的数据库,其目的在于为WEB应用提供可扩展的高性能数据存储解决方案.下面将以3台机器介绍最常见的集群方案.具体介绍,可以查看官网 h ...
- D3DFVF_XYZ和D3DFVF_XYZRHW的区别
D3DFVF_XYZ和D3DFVF_XYZRHW的区别是:1.D3DXYZ默认的坐标系统用户区中心是 (0,0) 而rhw的左上角是 (0,0)2.D3DXYZ默认的非光照的,而RHW默认就是高洛夫的 ...
- python 识别图片中的汉字
我们就识别上面的汉字. 安装软件tesseract和python库 https://www.cnblogs.com/sea-stream/p/10961580.html 然后新建一个文件夹test,把 ...
- React的基本认识
1.1.1. 官网 1) 英文官网: https://reactjs.org/ 2) 中文官网: https://doc.react-china.org/ 1.1.2. 介绍描述 1) 用于构建用户 ...
- SQL-W3School-高级:SQL 通配符
ylbtech-SQL-W3School-高级:SQL 通配符 1.返回顶部 1. 在搜索数据库中的数据时,您可以使用 SQL 通配符. SQL 通配符 在搜索数据库中的数据时,SQL 通配符可以替代 ...