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(),
            )
        );
    }

}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM