Flutter版本玩Android客戶端(7)——狀態管理

• 2019 年 10 月 4 日
• 筆記

在上一篇文章Flutter版本玩Android客戶端(6)——登錄註冊模組以及文章收藏與取消中完成了登錄模組，但遺留的問題是未進行狀態同步，導致left drawer的狀態沒有變化。本文繼續完善該部分，效果如下：

狀態管理

對於登錄狀態這個值，很多widget需要用到，屬於全局狀態，這裡使用provider進行管理。 關於狀態管理的更多知識，可以參考後面的文章。

提供初始化狀態

在main入口處，根據sharedpreference中的狀態進行初始化，Provider包括MyApp類。

void main() {    final _loginState = LoginState();      KvStores.get(KeyConst.LOGIN).then((isLogin) {      if (isLogin != null && isLogin) {        KvStores.get(KeyConst.USER_NAME).then((name) {          _loginState.login(name);        });      } else {        _loginState.logout();      }      runApp(Provider<LoginState>.value(        child: ChangeNotifierProvider.value(          value: _loginState,          child: MyApp(),        ),      ));    });  }  

獲取登錄狀態

LeftDrawer中需要根據登錄狀態進行ui的切換以及跳轉邏輯的控制，獲取登錄狀態如下：

final _loginState = Provider.of<LoginState>(context);  

根據是否登錄來控制用戶名的顯示，

Container(                    child: Column(                      mainAxisAlignment: MainAxisAlignment.center,                      children: <Widget>[                        FlutterLogo(                          size: 48,                        ),                        Padding(padding: EdgeInsets.all(8)),                        Text(                          _loginState.isLogin()                              ? _loginState.getUserName()                              : '未登錄',                          style: TextStyle(color: Colors.white, fontSize: 12),                        )                      ],                    ),                  ),  

更新登錄狀態

通過

final _loginState = Provider.of<LoginState>(context);  

拿到LoginState後，像設置普通對象一樣，那麼需要使用該對象的地方將會自動同步。是不是很神奇？

關於程式碼，參考Github

插件

• provider

參考

• Flutter | 狀態管理指南篇——Provider