美文网首页flutter
flutter 中循环渲染组件

flutter 中循环渲染组件

作者: charmingcheng | 来源:发表于2019-04-12 16:01 被阅读0次
    import 'package:flutter/material.dart';
    
    class Example extends StatefulWidget {
        @override
        _ExampleState createState() => _ExampleState();
    }
    
    class _ExampleState extends State<ExamplePage> {
        List formList;
        initState() {
          super.initState();
            formList = [
                {"title": '车牌号'},
                {"title": '所有人'},
                {"title": '号牌颜色'},
            ];
        }
         Widget buildGrid() {
                List<Widget> tiles = [];//先建一个数组用于存放循环生成的widget
                Widget content; //单独一个widget组件,用于返回需要生成的内容widget
                for(var item in formList) {
                    tiles.add(
                        new Row(
                           children: <Widget>[
                             new Text(item['title'])
                           ]
                        )
                    );
                }
                content = new Column(
                    children: tiles //重点在这里,因为用编辑器写Column生成的children后面会跟一个<Widget>[],
                    //此时如果我们直接把生成的tiles放在<Widget>[]中是会报一个类型不匹配的错误,把<Widget>[]删了就可以了
                );
                return content;
            }
          Widget ExampleWidget = buildGrid();
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                key: scaffoldKey,
                appBar: AppBar(
                    title: Text('循环渲染组件案例'),
                ),
                body: new Center(
                    child: ExampleWidget
                )
            );
        }
    }
    

    相关文章

      网友评论

        本文标题:flutter 中循环渲染组件

        本文链接:https://www.haomeiwen.com/subject/sqzeuqtx.html