Flutter 組件之StatefulWidget與StatelessWidget

在flutter中自定義組件其實就是一個類, 想要定義組件必須要繼承StatefulWidget或StatelessWidget

• StatefulWidget：有狀態組件, 持有的狀體可以再Widget生命週期中發生改變。只要我們想改變頁面中的數據,這個時候就需要繼承StatefulWidget類
• StatelessWidget：無狀態組件,狀態不可改變

無狀態組件

//直接繼承無狀態組件的類就可以使用
class StudyFlutter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("我是頭部的內容"),
        ),
        body: Text("無狀態內容部分"),
      ),
    );
  }
}

有狀態組件

與Vue,React中的數據綁定很相似
下面這個案例通過點擊按鈕可以動態生成一個列表數據,數據視圖實時更新

 class ShowListView extends StatefulWidget {//繼承StatefulWidget主結構
   ShowListView({Key key}) : super(key: key);

   @override//重寫動態數據構建方法
   _ShowListViewState createState() => _ShowListViewState();
 }
	//定義私有函數來繼承數據類就可以了
 class _ShowListViewState extends State<ShowListView> {
   List list = new List();
	//這裏就是有狀態組件的主要結構了,這裏寫你要定義的代碼
   @override
   Widget build(BuildContext context) {
     return ListView(children: <Widget>[
       Column(
         children: this.list.map((value) {
           return ListTile(
             title: Text(value),
           );
         }).toList(),
       ),
       RaisedButton(
         onPressed: () {
           setState(() {
             this.list.add("我是第2條新聞");
           });
         },
         child: Text("submit"),
       )
     ]);
   }
 }