引言

在前面的學習中我們接觸到了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 {@overrideWidget 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 {@overrideState<StatefulWidget> createState() => MyState(); }class MyState extends State<TextPage> {var _count = 0;@overrideWidget 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來實現。

總結

以上是生活随笔為你收集整理的Flutter入门进阶之旅（九）StatelessWidget StatefullWidget的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。