Flutter入門進階之旅（九）StatelessWidget & StatefullWidget

引言

在前面的學習中咱們接觸到了flutter中各類基本組件的使用，也學習了一些經常使用的佈局排版方式，掌握了根據不一樣的UI widget合理的選用不一樣的Layout方式進行佈局，可是咱們好像在前面的學習中全部的UI都是靜態的，沒有任何交互式的體驗，換句話說咱們在以前所掌握的flutter知識都是比較死板的靜態UI頁，缺乏了那麼一點靈動性，那今天這篇文章就算是一個過渡，今天我會帶領你們簡單認識下flutter中的動態頁。

佈局對比

細心的讀者可能有留意到在以前咱們的講解中大部分頁的根widget都是繼承StatelessWidget，像咱們以前講Text、Image、各類Layout，包括上一節講Button的時候

class TextPage extends StatelessWidget{
....
class ImagePage extends StatelessWidget {
...
class LayoutPage extends StatelessWidget {
...
class LayoutPage extends StatelessWidget {
...
複製代碼

可是在講TextField這一節的時候咱們的根widget繼承的倒是StatefullWidget

class TextFieldPage extends StatefulWidget {
...
複製代碼

思考

1.這會有什麼不同嗎？ 2.這跟今天的課程有什麼關係呢？ 3.我應該如何選擇，或者我怎麼肯定什麼時候選用那種根Widget呢？

關於StatelessWidget跟StatefullWidget

關於StatelessWidget跟StatefullWidget網上一搜一大推相似的博文介紹，我不想再走老套路，把官方的翻譯貼出來，而後你們看完以後仍是雲裏霧裏的不知因此然，我想把今天的分享搞的輕鬆跟通俗一點，不會這麼的官方也不會那麼的晦澀，我從我我的的理解出發去分析此兩者的區別。

其實上面提到的疑惑我相信大多數剛接觸flutter的讀者應該都會有相似的想法，咱們怎麼區別兩者，什麼時候如何選用兩者中的某一個呢？我結合我們以前的分享用求同存異的觀點看問題吧，細心的讀者可能會發現咱們以前的分像Text、Image、Button、各類Layout、甚至包括GestureDetector這些章節的分享，咱們繪製的UI頁都是靜態的，換句話說就是一旦這些UI頁被成功渲染以後就不須要頁不可能去改變他的狀態，就是一開始是什麼樣就是什麼樣，在UI上沒有任何的變化。

代碼分析

場景一：我要在UI上顯示一串文字，這串文字從始至終都不須要改變，也不可能會改變，這種場景下跟佈局就須要選用StatelessWidget

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello Flutter"),
        ),
        body: new Center(
          child: new Text(
            "我從UI被渲染完成以後就這個狀態，不可能發生改變",
            style: new TextStyle(fontSize: 18.0),
            textAlign: TextAlign.center,
          ),
        ));
  }
}
複製代碼

效果圖

如上圖，這串文字從一開始就是這樣，也永遠是這樣，這種場景下你就能夠選擇用StatelessWidget來渲染你的根佈局，固然用StatefullWidget也能完成，可是須要用StatefullWidget實現的佈局用StatelessWidget是不能完成的。

場景二：UI頁上有一個按鈕，我每次點擊按鈕UI頁上的Text顯示內容加1

這種狀況下，咱們很清楚的知道當前的UI頁是不固定的，換句話說，UI頁上的控件可能會在某一個時刻或者某種邏輯狀態下改變自身的狀態，那這個時候StatelessWidget顯然是不能完成這一要求的，咱們來用StatefullWidget模擬上場景二的具體實現。

效果圖

示例代碼

import 'package:flutter/material.dart';

class TextPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyState();
}

class MyState extends State<TextPage> {
  var _count = 0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello StatefulWidget"),
        ),
        body: new Stack(
          children: <Widget>[
            new Align(
              child: new Text(
                "當前count值:$_count",
                style: new TextStyle(fontSize: 18.0),
                textAlign: TextAlign.center,
              ),
            ),
            new Align(
              alignment: new FractionalOffset(0.5, 0.0),
              child: new MaterialButton(
                color: Colors.blueAccent,
                textColor: Colors.white,
                onPressed: () {
                  //從新渲染當前UI頁的狀態
                  setState(() {
                    _count++;
                  });
                },
                child: new Text('點我加下方文字自動加1'),
              ),
            ),
          ],
        ));
  }
}
複製代碼

經過上述代碼咱們得知在StatefullWidget中經過setState通知從新渲染當前UI頁上的全部Widget來完成改變狀態。

總結

經過今天的學習咱們從原先死板的UI靜態頁過渡到了狀態可改變的UI繪製，瞭解到了StatelessWidget和StatefullWidget的區別，而且能根據不一樣的UI繪製場景合理的選用不一樣的根Widget，好比咱們所要繪製的UI頁的狀態包括被渲染的內容都是始終不變的，那咱們會選用StatelessWidget來完成，若是所繪製的UI可能在將來的某個場景下發生變化咱們會選用StatefullWidget來實現。