Flutter學習筆記（9）--組件Widget

如需轉載，請註明出處：Flutter學習筆記（9）--組件Widget

在Flutter中，所有的顯示都是Widget，Widget是一切的基礎，我們可以通過修改數據，再用setState設置數據（調用setState()來通知框架，框架會再次調用State的構建方法來更新用戶界面），Flutter會自動通過綁定的數據更新Widget，所以你需要做的就是實現Widget界面，並且和數據綁定起來。

Widget分為有狀態StatefulWidget和無狀態StatelessWidget兩種，在Flutter中，Widget僅支持一幀，理解起來就是一次性繪製整個界面，無狀態就是指當繪製完這一幀後，保持在這一幀的狀態下不會變化，而有狀態的Widget當數據更新時，其實是繪製了新的Widget，只是state實現了跨幀的數據同步保存。

上面簡單的說了有狀態和無狀態兩種Widget，那麼我們該怎麼選擇在什麼時機有哪種Widget呢？舉兩個簡單的例子說明一下

1.在app的啟動頁面，我們需要展示一張啟動圖，但是展示過後，我們不需要這張圖片發生任何的改變，保持在這一幀的狀態下就可以了，這時候，我們就可以選擇無狀態StatelessWidget

2.在一個頁面裡面，有一個text和一個button，需求是點擊button後，text的內容需要發生變化，也就是說根據用戶交互或在網路請求下，頁面需要發生變化，需要重新繪製，這種情況下，我們就需要有狀態的StatefulWidget。

如果還是有一點不理解的話，那就記住一個規則：如果一個widget發生了變化（例如用戶交互、網路請求更新頁面），那麼它就是有狀態的，反之，如果widget繪製完之後，不會發生任何變化，那麼它就是無狀態的。

上面我們已經講了無狀態和有狀態的widget，接下來具體講一下這兩種的實現方式：

• 無狀態StatelessWidget

 繼承StatelessWidget，通過build返回一個佈局好的組件

import 'package:flutter/material.dart';

void main() => runApp(DEMOWidget());


class DEMOWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '無狀態Widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('無狀態Widget Demo'),
        ),
        body: Center(
          child: Text('這是一個無狀態的Demo'),
        ),
      ),
    );
  }
}

• 有狀態StatefulWidget

import 'package:flutter/material.dart';

void main() => runApp(SampleApp());


class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => new _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text
  String textToShow = "I Like Flutter";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample App"),
      ),
      body: new Center(child: new Text(textToShow)),
      floatingActionButton: new FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: new Icon(Icons.update),
      ),
    );
  }

  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }
}

 下一章節：Flutter學習筆記（10）--基礎知識