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 ...
随机推荐
- rabbitmq 持久化 事务 发送确认模式
部分内容来自:http://blog.csdn.net/hzw19920329/article/details/54315940 http://blog.csdn.net/hzw19920329/ar ...
- 01-docker简介及安装
什么是dockerdocker是一个开源项目,诞生于2013年初,最初是dotCloud公司内部的一个业余项目,它基于google公司推出的go语言实现.项目后来加入了linux基金会,遵从了apac ...
- Python+request 将获取的url和接口响应时间(timeout)写入到Excel中《八》
使用场景: 在工作中,常见某个功能的查询,当查询关联表特别多时,开发写的SQL语句等等问题导致响应时间较慢,那么作为测试需要将每个接口的响应时间进行测试,对同个接口多次执行,并将测试结果写入到exce ...
- v-model原理解析
vue中v-model可以实现数据的双向绑定,但是为什么这个指令就可以实现数据的双向绑定呢? 其实v-model是vue的一个语法糖.即利用v-model绑定数据后,既绑定了数据,又添加了一个inpu ...
- 下载apache旗下Web服务器软件
apache官方网站:http://www.apache.org/ 1.百度搜索apache找到apache官网 2.进入apache官网打开旗下web服务器软件列表 3.进入apache旗下web服 ...
- C# Parallel 使用
ParallelLoopResult result = Parallel.For(, , i => { Console.WriteLine("{0}, task: {1}, threa ...
- Jquery的toggle()与trigger()方法
我一直分不清楚toggle()与trigger()两个各自的作用,所以今天抽时间记录一些,以加深印象. 1.toggle() 定义和用法: toggle() 方法切换元素的可见状态.如果被选元素可见, ...
- vs 2017 无法安装任何 nuget package,提示“库没有注册。。。”
vs 2017 无法安装任何 nuget package,提示“库没有注册(异常来自 HRESULT: 0x8002801D (TYPE_E_LIBNOTREGISTERED))” 各种百度谷歌都没有 ...
- 数据结构实验之栈与队列五:下一较大值(一)(SDUT 3332)
#include <bits/stdc++.h> using namespace std; int a[1005]; int main() { int t,n,i,j; while(~sc ...
- centos7下用kubeadm安装k8s集群并使用ipvs做高可用方案
1.准备 1.1系统配置 在安装之前,需要先做如下准备.三台CentOS主机如下: 配置yum源(使用腾讯云的) 替换之前先备份旧配置 mv /etc/yum.repos.d/CentOS-Base. ...