無狀態(tài)控件

Flutter框架給我們提供了StatelessWidget和StatefulWidget兩個抽象類，用于自定義控件，首先我們看一下StatelessWidget抽象類。它可以定義一個不需要可變狀態(tài)的控件，我們可以稱其為“無狀態(tài)控件”，它通過構(gòu)建一系列其他控件來描述用戶界面的一部分，構(gòu)建過程以遞歸方式執(zhí)行，直到用戶界面的描述完全具體化。

比如，下面是一個名為“GreenBoard”的StatelessWidget子類的框架，它的里面包括一個Container控件，中文名稱是“容器”，然后設(shè)置color屬性，也就是背景色為綠色。

class GreenBoard extends StatelessWidget {
  const GreenBoard({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: const Color(0xFF2DBD3A)
    );
  }
}

上面代碼中，應(yīng)用了《Dart入門—類與方法》的知識，大家可以去簡單了解下。另外，我們覆蓋了build這個抽象方法，該方法用于描述由此控件所實(shí)現(xiàn)的那一部分用戶界面。其中，抽象類BuildContext是該控件在控件樹中的位置句柄。

通常情況下，控件的構(gòu)造函數(shù)參數(shù)不止一個，每個參數(shù)對應(yīng)一個final修飾的屬性，修改上一個例子，使其成為一個可以設(shè)置背景顏色和子控件的通用控件。

class Board extends StatelessWidget {
  const Board({
    Key key,
    this.color: const Color(0xFF2DBD3A),
    this.child,
  }) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: color, 
      child: child,
    );
  }
}

按照Flutter框架的語法規(guī)范，控件的構(gòu)造函數(shù)只能使用命名參數(shù)，命名參數(shù)可以使用@required注解為必需參數(shù)。另外語法規(guī)范還規(guī)定了，第一個參數(shù)是key，最后一個參數(shù)是child、children或其他類似參數(shù)。

如果一個無狀態(tài)控件的父控件會定期更改控件的配置，或者它依賴于頻繁更改的繼承控件，那么優(yōu)化build方法的性能，以保持流暢的渲染性能是非常重要的。有以下做法可以用于減少重新構(gòu)建無狀態(tài)控件的影響：

• 盡可能減少build方法傳遞創(chuàng)建的節(jié)點(diǎn)數(shù)量及其創(chuàng)建的任何控件。例如，我們可以考慮只使用Align（對齊控件）或CustomSingleChildLayout（自定義單個子控件布局控件），而不是精心安排Row（行布局控件）、Column（列布局控件）、Padding（填充控件）和SizedBox（指定大小的框控件）來定位單個子控件。想繪制正確的圖形效果時，考慮一下使用CustomPaint（畫布控件），而不是復(fù)雜的多個Container（容器）分層和Decoration（裝飾）。
• 盡可能使用const修飾控件，并為控件提供一個const構(gòu)造函數(shù)，以便控件的調(diào)用方法也可以這樣做。

有狀態(tài)控件

在了解完如何使用StatelessWidget定義一個無狀態(tài)控件后，我們學(xué)習(xí)如何使用StatefulWidget定義一個具有可變狀態(tài)的控件，我們可以稱其為“有狀態(tài)控件”。首先要搞清楚的是，狀態(tài)是什么？狀態(tài)是在構(gòu)建控件時可以同步讀取的信息，并且在控件的生命周期內(nèi)可以改變，控件的使用者應(yīng)該在狀態(tài)發(fā)生變化時使用State.setState方法及時通知框架。

StatefulWidget的實(shí)例本身是不可變的，我們需要將其可變狀態(tài)存儲在由createState方法創(chuàng)建的單獨(dú)的State對象中，或者存儲在該State所訂閱的對象中。例如，我們將之前名為“GreenBoard”的StatelessWidget子類改造成StatefulWidget的子類框架。

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

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

class _GreenBoardState extends State<GreenBoard> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: const Color(0xFF2DBD3A)
    );
  }
}

只要我們調(diào)用了一個StatefulWidget，框架就會調(diào)用createState，這意味著，在控件樹中，可能有多個不同位置的State對象與同一個StatefulWidget關(guān)聯(lián)。同樣的，如果一個StatefulWidget被我們從樹中移除，并且再次被我們插入到樹中，框架將再次調(diào)用createState來創(chuàng)建一個新的State對象，簡化了State對象的生命周期。

我們再將之前名為“Board”的StatelessWidget子類改造成StatefulWidget的子類框架。除了可以設(shè)置背景顏色和子控件，還有一個可以被調(diào)用的，用來改變它的內(nèi)部狀態(tài)的方法。

class Board extends StatefulWidget {
  const Board({
    Key key,
    this.color: const Color(0xFF2DBD3A),
    this.child,
  }) : super(key: key);

  final Color color;
  final Widget child;

  _BoardState createState() => new _BoardState();
}

class _BoardState extends State<Board> {
  double _size = 1.0;

  void grow() {
    setState(() { _size += 0.1; });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: widget.color,
      transform: new Matrix4.diagonal3Values(_size, _size, 1.0),
      child: widget.child,
    );
  }
}

StatefulWidget有兩種不同的類型：

• 第一種是在State.initState中分配資源并將其置于State.dispose中，而且不依賴于InheritedWidget或調(diào)用State.setState。這樣的控件通常在應(yīng)用程序或頁面的根部使用，并通過ChangeNotifier、Stream或其他這樣的對象與子控件通信。遵循這種模式的有狀態(tài)控件相對便宜（在CPU和GPU周期方面），因?yàn)樗鼈兪且淮螛?gòu)建的，而且不會更新。因此，它們可以實(shí)現(xiàn)一些非常復(fù)雜的build方法。
• 第二種是使用State.setState或依賴于InheritedWidget的控件。這些控件通常會在應(yīng)用程序的生命周期中重新構(gòu)建很多次，因此降低重新構(gòu)建這種控件的影響至關(guān)重要。實(shí)際上，它們也可以使用State.initState或State.didChangeDependencies來分配資源，但重點(diǎn)是它們要重新構(gòu)建。

有以下做法可以用于減少重新構(gòu)建有狀態(tài)控件的影響：

• 把狀態(tài)推到樹葉上。例如，我們的頁面上有一個嘀嗒嘀嗒的時鐘，此時不應(yīng)該將狀態(tài)置于頁面的頂部，因?yàn)檫@樣的話，每當(dāng)時鐘嘀嗒時，整個頁面都會重新構(gòu)建。我們應(yīng)該創(chuàng)建一個專用的時鐘控件，這樣只會更新它自己。
• 盡可能減少build方法傳遞創(chuàng)建的節(jié)點(diǎn)數(shù)量及其創(chuàng)建的任何控件。理想情況下，有狀態(tài)的控件只會創(chuàng)建一個控件，而這個控件將是一個RenderObjectWidget。很顯然，在實(shí)際開發(fā)中，我們不一定能做到這一點(diǎn)，但控件越接近這個理想狀態(tài)，效率就越高。
• 如果子樹不更改，則緩存表示該子樹的控件，并在每次使用該子樹時重新使用它。重用控件的效率要比創(chuàng)建新的控件要高效得多，將有狀態(tài)的部分分解成一個帶有子參數(shù)的控件是這樣做的常見方法。
• 盡可能使用const修飾控件，這相當(dāng)于緩存一個控件，并重新使用它。

關(guān)于有狀態(tài)與無狀態(tài)的選擇

如果自定義的控件可以與用戶進(jìn)行交互，比如通過鍵盤輸入內(nèi)容、通過滑動屏幕移動滑塊、點(diǎn)擊時改變狀態(tài)，又或者是隨著時間的推移而變化，比如數(shù)據(jù)Feed會更新狀態(tài)。這時我們應(yīng)該選擇使用StatefulWidget創(chuàng)建一個有狀態(tài)控件。

如果自定義的控件僅依賴于對象本身的配置信息，僅僅是用于展示給定的信息。那我們應(yīng)該選擇使用StatelessWidget創(chuàng)建一個無狀態(tài)控件。

作者：何小有
鏈接：http://www.itdecent.cn/p/d538ef5ff6a3
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。