交互

當小部件的狀態(tài)發(fā)生變化時，狀態(tài)對象調(diào)用setState（）來告訴框架重新繪制小部件 創(chuàng)建一個自定義的有狀態(tài)小部件。將用一個自定義的有狀態(tài)小部件替換兩個無狀態(tài)小部件-紅色實心星形圖標及其旁邊的數(shù)字計數(shù)-小部件管理一行，其中包含兩個子小部件：IconButton和Text。

class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => new _FavoriteWidgetState();
}

要創(chuàng)建自定義的有狀態(tài)小部件，需要創(chuàng)建兩個類：StatefulWidget和State state對象包含小部件的狀態(tài)和build（）方法。

要實現(xiàn)自定義有狀態(tài)小部件，需要創(chuàng)建兩個類： 定義從StatefulWidget繼承的小部件類 包含小部件狀態(tài)并定義小部件build（）方法的類。它繼承自State 本節(jié)介紹如何為Lakes應(yīng)用程序構(gòu)建名為FavoriteWidget的有狀態(tài)Widget。第一步是選擇如何管理FavoriteWidgets的狀態(tài)。

步驟1：確定哪個對象管理小部件的狀態(tài) 小部件的狀態(tài)可以通過多種方式進行管理，但在我們的示例中，小部件本身（FavoriteWidget）將管理自己的狀態(tài)。在本例中，切換星形圖標是一個獨立的操作，不會影響父窗口小部件或其他用戶界面，因此小部件可以在內(nèi)部處理自己的狀態(tài)。

步驟2：創(chuàng)建StatefulWidget的子類 FavoriteWidget類管理自己的狀態(tài)，因此它重寫createState（）以創(chuàng)建狀態(tài)對象。框架在構(gòu)建小部件時調(diào)用createState（）。createState（）創(chuàng)建了FavoriteWidgetState的一個實例，將在下一步中實現(xiàn)它。

new Icon(
  Icons.star,
  color: Colors.red[500],
),
new Text('41')

小工具管理其狀態(tài)

有時，小部件最好在內(nèi)部管理其狀態(tài)。例如，當ListView的內(nèi)容超過渲染框時，ListView會自動滾動。大多數(shù)使用ListView的開發(fā)人員不希望管理ListView的滾動行為，因此ListView本身管理其滾動偏移。

class TapboxA extends StatefulWidget {
  TapboxA({Key key}) : super(key: key);
  @override
  _TapboxAState createState() => new _TapboxAState();
}
class _TapboxAState extends State<TapboxA> {
  bool _active = false;
  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _handleTap,
      child: new Container(
        child: new Center(
          child: new Text(
            _active ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: _active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
}

_TapboxAState類： 管理TapboxA的狀態(tài) Definition_Active：確定框當前顏色的布爾值 定義_當框被單擊時，handleTap（）函數(shù)會更新，并調(diào)用setState（）更新UI

widget的state

實現(xiàn)小部件的所有交互行為 對于父窗口小部件，管理狀態(tài)并告訴其子窗口小部件何時更新通常是最有意義的。例如，IconButton允許將圖標視為可單擊的按鈕。IconButton是一個無狀態(tài)小部件，因為我們認為父小部件需要知道按鈕是否被單擊以采取相應(yīng)的操作。 在下面的示例中，TapboxB通過回調(diào)將其狀態(tài)導(dǎo)出到其父級。因為TapboxB不管理任何狀態(tài)，所以它的父類是StatelessWidget。

ParentWidgetState類： 管理TapboxB_活動狀態(tài) Implementation_ HandleTapboxChanged（），單擊框時調(diào)用的方法 當狀態(tài)更改時，調(diào)用setState（）更新UI TapboxB類： 繼承StatelessWidget類，因為所有狀態(tài)都由其父控件處理 當檢測到單擊時，它會通知父控件

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => new _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;
  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapboxB(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

混合管理

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => new _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;
  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapboxC(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

對于某些小部件，mashup管理方法是最有意義的。在這種情況下，有狀態(tài)小部件管理一些狀態(tài)，而父小部件管理其他狀態(tài)。 在TapboxC示例中，單擊時，框周圍會出現(xiàn)一個深綠色邊框。單擊時，邊框?qū)⑾?，框的顏色將更改。TapboxC將_活動狀態(tài)導(dǎo)出到其父控件，但內(nèi)部管理_突出顯示狀態(tài)。此示例有兩個狀態(tài)對象_PrentWidgetState和_TapboxCState

class _TapboxCState extends State<TapboxC> {
  bool _highlight = false;
  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

ParentWidgetState對象： 管理_活動狀態(tài) Implementation HandleTapboxChanged（），單擊該框時調(diào)用 當單擊框并_調(diào)用setState（）以在活動狀態(tài)更改時更新UI時 _TapboxCState對象： 管理_突出顯示狀態(tài)。 手勢檢測器監(jiān)聽所有敲擊事件。當用戶單擊時，它會添加高亮顯示（深綠色邊框）；當用戶釋放時，高亮顯示將被刪除。 按下、抬起或取消時更新突出顯示狀態(tài)，調(diào)用setState（）更新UI。 單擊時，狀態(tài)更改將傳遞給父控件

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }
  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

另一個實現(xiàn)可能會在保持活動狀態(tài)的同時將突出顯示的狀態(tài)導(dǎo)出到父窗口小部件。活動狀態(tài)是內(nèi)部的，但如果你要求某人使用TapBox，他們可能會抱怨這沒有多大意義。開發(fā)人員只關(guān)心盒子是否處于活動狀態(tài)。開發(fā)人員可能不關(guān)心突出顯示是如何管理的，而是傾向于讓TapBox處理這些細節(jié)。

以上就是Flutter交互并使用小工具管理其狀態(tài)widget的state詳解的詳細內(nèi)容，更多關(guān)于Flutter交互狀態(tài)管理widget state的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論