交互

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

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

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

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

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

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

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

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

有時(shí)，小部件最好在內(nèi)部管理其狀態(tài)。例如，當(dāng)ListView的內(nèi)容超過渲染框時(shí)，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：確定框當(dāng)前顏色的布爾值 定義_當(dāng)框被單擊時(shí)，handleTap（）函數(shù)會更新，并調(diào)用setState（）更新UI

widget的state

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

ParentWidgetState類： 管理TapboxB_活動狀態(tài) Implementation_ HandleTapboxChanged（），單擊框時(shí)調(diào)用的方法 當(dāng)狀態(tài)更改時(shí)，調(diào)用setState（）更新UI TapboxB類： 繼承StatelessWidget類，因?yàn)樗袪顟B(tài)都由其父控件處理 當(dāng)檢測到單擊時(shí)，它會通知父控件

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示例中，單擊時(shí)，框周圍會出現(xiàn)一個(gè)深綠色邊框。單擊時(shí)，邊框?qū)⑾?，框的顏色將更改。TapboxC將_活動狀態(tài)導(dǎo)出到其父控件，但內(nèi)部管理_突出顯示狀態(tài)。此示例有兩個(gè)狀態(tài)對象_PrentWidgetState和_TapboxCState

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

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

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

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

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

最新評論