Flutter怎么交互并使用小工具管理其狀態widget的state

這篇文章主要介紹“Flutter怎么交互并使用小工具管理其狀態widget的state”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Flutter怎么交互并使用小工具管理其狀態widget的state”文章能幫助大家解決問題。

交互

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

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

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

要實現自定義有狀態小部件，需要創建兩個類： 定義從StatefulWidget繼承的小部件類 包含小部件狀態并定義小部件build（）方法的類。它繼承自State 本節介紹如何為Lakes應用程序構建名為FavoriteWidget的有狀態Widget。第一步是選擇如何管理FavoriteWidgets的狀態。

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

步驟2：創建StatefulWidget的子類 FavoriteWidget類管理自己的狀態，因此它重寫createState（）以創建狀態對象。框架在構建小部件時調用createState（）。createState（）創建了FavoriteWidgetState的一個實例，將在下一步中實現它。

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

小工具管理其狀態

有時，小部件最好在內部管理其狀態。例如，當ListView的內容超過渲染框時，ListView會自動滾動。大多數使用ListView的開發人員不希望管理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的狀態 Definition_Active：確定框當前顏色的布爾值 定義_當框被單擊時，handleTap（）函數會更新，并調用setState（）更新UI

widget的state

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

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

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管理方法是最有意義的。在這種情況下，有狀態小部件管理一些狀態，而父小部件管理其他狀態。 在TapboxC示例中，單擊時，框周圍會出現一個深綠色邊框。單擊時，邊框將消失，框的顏色將更改。TapboxC將_活動狀態導出到其父控件，但內部管理_突出顯示狀態。此示例有兩個狀態對象_PrentWidgetState和_TapboxCState

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

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

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

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

關于“Flutter怎么交互并使用小工具管理其狀態widget的state”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。