flutter中通过循环渲染组件
直接贴代码:
1 import 'package:flutter/material.dart'; 2 3 class Example extends StatefulWidget { 4 @override 5 _ExampleState createState() => _ExampleState(); 6 } 7 8 class _ExampleState extends State<ExamplePage> { 9 List formList; 10 initState() { 11 super.initState(); 12 formList = [ 13 {"title": '车牌号'}, 14 {"title": '所有人'}, 15 {"title": '号牌颜色'}, 16 ]; 17 } 18 Widget buildGrid() { 19 List<Widget> tiles = [];//先建一个数组用于存放循环生成的widget 20 Widget content; //单独一个widget组件,用于返回需要生成的内容widget 21 for(var item in formList) { 22 tiles.add( 23 new Row( 24 children: <Widget>[ 25 new Text(item['title']) 26 ] 27 ) 28 ); 29 } 30 content = new Column( 31 children: tiles //重点在这里,因为用编辑器写Column生成的children后面会跟一个<Widget>[], 32 //此时如果我们直接把生成的tiles放在<Widget>[]中是会报一个类型不匹配的错误,把<Widget>[]删了就可以了 33 ); 34 return content; 35 } 36 Widget ExampleWidget = buildGrid(); 37 @override 38 Widget build(BuildContext context) { 39 return Scaffold( 40 key: scaffoldKey, 41 appBar: AppBar( 42 title: Text('循环渲染组件案例'), 43 ), 44 body: new Center( 45 child: ExampleWidget 46 ) 47 ); 48 } 49 }