Flutter2.*_狀態(tài)管理
????Flutter以widget作為的基礎(chǔ)，分為有狀態(tài)和無狀態(tài)兩類，可以簡單以是否存在交互為判斷依據(jù)，不存在則為無狀態(tài)組件Statelesswige，否則即有狀態(tài)組件StatefulWidget，二者皆繼承與父類Widget。今天我們來聊一下有狀態(tài)組件的狀態(tài)管理。
????flutter有多種辦法管理狀態(tài)，作為開發(fā)者，需要定義管理的方法，如果眼下對于此中的規(guī)則不清楚，可以默認在父類widget中管理狀態(tài)。細致來說，根據(jù)具體地開發(fā)情況，有三種思路管理狀態(tài)：widget管理自己的狀態(tài)、父widget管理此widget的狀態(tài)、混搭管理，決定此三種選擇哪一個，可以參考原則：
????· 若狀態(tài)是用戶數(shù)據(jù)，如復(fù)選框選中、滑塊位置，狀態(tài)由父widget管理；
????·若所討論的狀態(tài)與界面外觀，則widget本身管理狀態(tài)；
自身管理狀態(tài)：
class?MyApp?extends?StatelessWidget?{
??const?MyApp({Key??key})?:?super(key:?key);
??@override??Widget?build(BuildContext?context)?{
????return?MaterialApp(
??????title:?'Flutter?Demo',
??????home:?Scaffold(
????????appBar:?AppBar(
??????????title:?const?Text('Flutter?Demo'),
????????),
????????body:?const?Center(
??????????child:?TapboxA(),
????????),
??????),
????);
??}}
class?TapboxA?extends?StatefulWidget?{
??const?TapboxA({Key??key})?:?super(key:?key);
??@override
??_TapboxAState?createState()?=>?_TapboxAState();}class?_TapboxAState?extends?State?{
??bool?_active?=?false;
??void?_handleTap()?{
????setState(()?{
??????_active?=?!_active;
????});
??}
??@override??Widget?build(BuildContext?context)?{
????return?GestureDetector(
??????onTap:?_handleTap,
??????child:?Container(
????????child:?Center(
??????????child:?Text(
????????????_active???'Active'?:?'Inactive',
????????????style:?const?TextStyle(fontSize:?32.0,?color:?Colors.white),
??????????),
????????),
????????width:?200.0,
????????height:?200.0,
????????decoration:?BoxDecoration(
??????????color:?_active???Colors.lightGreen[700]?:?Colors.grey[600],
????????),
??????),
????);
??}}
父widget管理widget狀態(tài)，此種場景一般用在當(dāng)前組件是無狀態(tài)的，需要父類widget來進行識別作為子組件的目標(biāo)是否要執(zhí)行不同條件對應(yīng)的邏輯，來看下列示例代碼：
class?TapboxB?extends?StatelessWidget?{
??const?TapboxB({
????Key??key,
????this.active?=?false,
????required?this.onChanged,
??})?:?super(key:?key);
??final?bool?active;
??final?ValueChanged?onChanged;
??void?_handleTap()?{
????onChanged(!active);
??}
??@override??Widget?build(BuildContext?context)?{
????return?GestureDetector(
??????onTap:?_handleTap,
??????child:?Container(
????????child:?Center(
??????????child:?Text(
????????????active???'Active'?:?'Inactive',
????????????style:?const?TextStyle(fontSize:?32.0,?color:?Colors.white),
??????????),
????????),
????????width:?200.0,
????????height:?200.0,
????????decoration:?BoxDecoration(
??????????color:?active???Colors.lightGreen[700]?:?Colors.grey[600],
????????),
??????),
????);
??}}
作為子組件的TapboxB為無狀態(tài)組件，在接收點擊事件通過onChanged通知父組件 ParentWidget，ParentWidget以_handleTapboxChanged接收的value更新設(shè)置TapboxB屬性_active，同時更新widget樹渲染頁面。
class?ParentWidget?extends?StatefulWidget?{
??const?ParentWidget({Key??key})?:?super(key:?key);
??@override
??_ParentWidgetState?createState()?=>?_ParentWidgetState();}class?_ParentWidgetState?extends?State?{
??bool?_active?=?false;
??void?_handleTapboxChanged(bool?newValue)?{
????setState(()?{
??????_active?=?newValue;
????});
??}
??@override??Widget?build(BuildContext?context)?{
????return?SizedBox(
??????child:?TapboxB(
????????active:?_active,
????????onChanged:?_handleTapboxChanged,
??????),
????);
??}}
? ? 混合管理即為組件自管理和父類組件管理子組件狀態(tài)的組合使用，flutter提供各種按鈕和類似的交互式widget，可以參考material design gudelines.
? ? 感謝各位抽出時間閱讀，如果各位對此有新的想法和疑問，歡迎留言探討，或者通過下面二維碼進群討論學(xué)習(xí)。