Flutter更新widget

一 Android和Flutter 更新View對比

1. 在Android中，您可以通過直接對view進行改變來更新視圖。
2. 在Flutter中Widget是不可變的，不會直接更新，而必須使用Widget的狀態。

二 StatelessWidgets 和 StatelessWidget

1. 這是Stateful和Stateless widget的概念的來源。一個Stateless Widget就像它的名字，是一個沒有狀態信息的widget。
2. 當您所需要的用戶界面不依賴於對象配置信息以外的其他任何內容時，StatelessWidgets非常有用。
   例如，在Android中，這與將logo圖標放在ImageView中很相似。logo在運行時不會更改，因此您可以在Flutter中使用StatelessWidget。
3. 如果您希望通過HTTP動態請求的數據更改用戶界面，則必須使用StatefulWidget，並告訴Flutter框架該widget的狀態已更新，以便可以更新該widget。
4. 這裏要注意的重要一點是無狀態和有狀態 widget的核心特性是相同的。每一幀它們都會重新構建，不同之處在於StatefulWidget有一個State對象，它可以跨幀存儲狀態數據並恢復它。
5. 如果你有疑問，那麼要記住這個規則：如果一個widget發生了變化（例如用戶與它交互），它就是有狀態的。但是，如果一個子widget對變化做出反應，而其父widget對變化沒有反應，那麼包含的父widget仍然可以是無狀態的widget。

三 如何使用一個StatelessWidget

我們來看看你如何使用一個StatelessWidget。一個常見的StatelessWidget是Text。如果你看看Text Widget的實現，你會發現它是一個StatelessWidget的子類:

new Text(
  'I like Flutter!',
  style: new TextStyle(fontWeight: FontWeight.bold),
);

正如你所看到的，Text 沒有與之關聯的狀態信息，它呈現了構造函數中傳遞的內容，僅此而已。

但是，如果你想讓“I Like Flutter”動態變化，例如點擊一個FloatingActionButton？這可以通過將Text包裝在StatefulWidget中並在點擊按鈕時更新它來實現，如：

void main() {
  runApp(new 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
  int count = 0;

  void _updateText() {
    setState(() {
      count++;
    });
  }

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

點擊一個FloatingActionButton 數字會不斷增加。