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