StatelessWidget 無狀態組件 StatefulWidget 有狀態組件 頁面上綁定數據、改變頁面數據

一、Flutter 中自定義有狀態組件

在 Flutter 中自定義組件其實就是一個類，這個類需要繼承 StatelessWidget/StatefulWidget。

StatelessWidget 是無狀態組件，狀態不可變的 widget

StatefulWidget 是有狀態組件，持有的狀態可能在 widget 生命周期改變。

通俗的講：如果我們想改變頁面中的數據的話這個時候就需要用到 StatefulWidget 和  setState(() {})
 

 

class HomeCenter extends StatefulWidget{
  HomeCenter({Key key});
  _HomeCenterState createState() => _HomeCenterState();
}

class _HomeCenterState extends State {
  var list = [];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: [
        Column(
          children: list.map((val) {
            return Text(val['title']);
          }).toList(),
        ),
        Container(
          child:   RaisedButton(
              child: Text('點擊'),
              onPressed: () {
                setState(() {
                  this.list.add({
                    'title': '111'
                  });
                });
              }
          ),
        )
      ]
    );
  }
}