zl程序教程

您现在的位置是:首页 >  前端

当前栏目

Flutter中通过循环渲染组件

循环flutter组件 通过 渲染
2023-09-27 14:24:39 时间
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(),
            )
        );
    }

}