Flutter組件狀態(tài)管理的3種方法
前言
前面講了Flutter布局，布局只是靜態(tài)的。在Flutter中，組件分為StatelesslWidget和StatefulWidget。
- StatelesslWidget
沒有狀態(tài)，是一成不變的。比如圖標(biāo)，文字，按鈕等
- StatefulWidget
有狀態(tài)的組件，頁面數(shù)據(jù)是動(dòng)態(tài)的，或者會(huì)隨著用戶操作變化，比如多選框，文本輸入框等。
有狀態(tài)組件
重點(diǎn)來了，如何使用實(shí)現(xiàn)一個(gè)有狀態(tài)的組件呢？
- 有狀態(tài)的組件一般由兩個(gè)類構(gòu)成，一個(gè)StatefulWidget子類和一個(gè)State子類.
- State類包含了組件的
build()方法，并且負(fù)責(zé)維護(hù)組件狀態(tài) - 當(dāng)這個(gè)組件的狀態(tài)變化了，可以調(diào)用
setState()方法來刷新頁面
狀態(tài)管理
由誰來負(fù)責(zé)狀態(tài)管理呢？是組件本身，還是他的父類，兩者都有又或是其他對(duì)象？答案是都可以。也就是說有三種方法實(shí)現(xiàn)狀態(tài)管理：
1.組件自己管理自己的狀態(tài)
2.組件的父組件管理狀態(tài)
3.混搭管理
那么如何決定該用那種方式來進(jìn)行狀態(tài)管理呢？一般來講有以下原則：
1.如果是用戶數(shù)據(jù)，比如多選框是否被選中，一般是由選擇第2種方法
2.如果動(dòng)效，比如放大縮小，那一般用第1種方法
PS：如果你實(shí)在迷芒，就直接選擇用第2種方法，用父類管理狀態(tài)。
舉例
組件自己管理自己的狀態(tài)
如下代碼：_TapboxAState這個(gè)State子類為TapboxA維護(hù)狀態(tài)，內(nèi)部定義了一個(gè)_active變量來決定當(dāng)前是否為激活的狀態(tài)，內(nèi)部還定義了一個(gè)_handleTap()回調(diào)函數(shù)，來處理用戶點(diǎn)擊后的邏輯，并且調(diào)用了setState()生命周期方法，重新刷新頁面。
import 'package:flutter/material.dart';
// TapboxA 自己管理狀態(tài)
void main() => runApp(const MyApp());
//------------------------- TapboxA ----------------------------------
class TapboxA extends StatefulWidget {
? const TapboxA({Key? key}) : super(key: key);
? @override
? _TapboxAState createState() => _TapboxAState();
}
class _TapboxAState extends State<TapboxA> {
? 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],
? ? ? ? ),
? ? ? ),
? ? );
? }
}
//------------------------- MyApp ----------------------------------
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(),
? ? ? ? ),
? ? ? ),
? ? );
? }
}父組件管理狀態(tài)
更多時(shí)候我們需要父組件來決定子組件什么時(shí)候來更新狀態(tài)，子組件只需要根據(jù)父組件傳過來的參數(shù)進(jìn)行合理的展示即可。這種情況下子組件并不需要維護(hù)狀態(tài)，所以子組件是一個(gè)StatelessWidget，父組件ParentWidget才是StatefulWidget。代碼如下：
父組件維護(hù)了一個(gè)_active變量用來標(biāo)記是否為激活狀態(tài)，并且實(shí)現(xiàn)了回調(diào)函數(shù)_handleTapboxChanged用來反轉(zhuǎn)激活狀態(tài)，供子組件調(diào)用。子組件TapboxB是一個(gè)無狀態(tài)組件，只需要在被點(diǎn)擊的時(shí)候通知父組件來管理狀態(tài)。
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class ParentWidget extends StatefulWidget {
? const ParentWidget({Key? key}) : super(key: key);
? @override
? _ParentWidgetState createState() => _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
? bool _active = false;
? void _handleTapboxChanged(bool newValue) {
? ? setState(() {
? ? ? _active = newValue;
? ? });
? }
? @override
? Widget build(BuildContext context) {
? ? return SizedBox(
? ? ? child: TapboxB(
? ? ? ? active: _active,
? ? ? ? onChanged: _handleTapboxChanged,
? ? ? ),
? ? );
? }
}
//------------------------- TapboxB ----------------------------------
class TapboxB extends StatelessWidget {
? const TapboxB({
? ? Key? key,
? ? this.active = false,
? ? required this.onChanged,
? }) : super(key: key);
? final bool active;
? final ValueChanged<bool> 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],
? ? ? ? ),
? ? ? ),
? ? );
? }
}
//------------------------- MyApp ----------------------------------
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(),
? ? ? ? ? child: ParentWidget(),
? ? ? ? ),
? ? ? ),
? ? );
? }
}混搭管理
混搭管理狀態(tài)，就是因?yàn)橛行┣闆r下我們需要父組件管理一部分狀態(tài)，子組件獨(dú)立管理另一部分狀態(tài)。在本次，我們根據(jù)上例添加一個(gè)動(dòng)效，按鈕按下時(shí)要顯示高亮狀態(tài)（前文講過，動(dòng)效一類的狀態(tài)一般要組件本身管理），抬起時(shí)取消高亮。
如下代碼：ParentWidget負(fù)責(zé)維護(hù)_active狀態(tài)來標(biāo)志是否被激活，子組件TapboxC負(fù)責(zé)維護(hù)_highlight狀態(tài)用來控制是否高亮顯示。
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class ParentWidget extends StatefulWidget {
? const ParentWidget({Key? key}) : super(key: key);
? @override
? _ParentWidgetState createState() => _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
? bool _active = false;
? void _handleTapboxChanged(bool newValue) {
? ? setState(() {
? ? ? _active = newValue;
? ? });
? }
? @override
? Widget build(BuildContext context) {
? ? return SizedBox(
? ? ? child: TapboxC(
? ? ? ? active: _active,
? ? ? ? onChanged: _handleTapboxChanged,
? ? ? ),
? ? );
? }
}
//----------------------------- TapboxC ------------------------------
class TapboxC extends StatefulWidget {
? const TapboxC({
? ? Key? key,
? ? this.active = false,
? ? required this.onChanged,
? }) : super(key: key);
? final bool active;
? final ValueChanged<bool> onChanged;
? @override
? _TapboxCState createState() => _TapboxCState();
}
class _TapboxCState extends State<TapboxC> {
? bool _highlight = false;
? void _handleTapDown(TapDownDetails details) {
? ? setState(() {
? ? ? _highlight = true;
? ? });
? }
? void _handleTapUp(TapUpDetails details) {
? ? setState(() {
? ? ? _highlight = false;
? ? });
? }
? void _handleTapCancel() {
? ? setState(() {
? ? ? _highlight = false;
? ? });
? }
? void _handleTap() {
? ? widget.onChanged(!widget.active);
? }
? @override
? Widget build(BuildContext context) {
? ? return GestureDetector(
? ? ? onTapDown: _handleTapDown, // Handle the tap events in the order that
? ? ? onTapUp: _handleTapUp, // they occur: down, up, tap, cancel
? ? ? onTap: _handleTap,
? ? ? onTapCancel: _handleTapCancel,
? ? ? child: Container(
? ? ? ? child: Center(
? ? ? ? ? child: Text(widget.active ? 'Active' : 'Inactive',
? ? ? ? ? ? ? style: const TextStyle(fontSize: 32.0, color: Colors.white)),
? ? ? ? ),
? ? ? ? width: 200.0,
? ? ? ? height: 200.0,
? ? ? ? decoration: BoxDecoration(
? ? ? ? ? color: _highlight?Colors.lightGreen :widget.active ? Colors.lightGreen[700] : Colors.grey[600],
? ? ? ? ),
? ? ? ),
? ? );
? }
}
//------------------------- MyApp ----------------------------------
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(),
? ? ? ? ? child: ParentWidget(),
? ? ? ? ),
? ? ? ),
? ? );
? }
}當(dāng)然你也可以把高亮顯示的狀態(tài)交給父組件來管理，但是當(dāng)你開發(fā)完這個(gè)組件交給同事來用的時(shí)候，別人可能只會(huì)關(guān)注業(yè)務(wù)邏輯上的處理，不會(huì)關(guān)注的動(dòng)效處理。
其他交互組件
Flutter內(nèi)部預(yù)置了很多交互組件，甚至還有IOS風(fēng)格的組件，都可以拿來用。如果有必要的話，可以向上面的例子一樣自定義組件使用。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android利用RenderScript實(shí)現(xiàn)毛玻璃模糊效果示例
毛玻璃效果（亦稱磨砂效果），近兩年在移動(dòng)端的UI設(shè)計(jì)上越來越流行，下面這篇文章主要介紹了Android利用RenderScript實(shí)現(xiàn)毛玻璃模糊效果的相關(guān)資料，文中給出了詳細(xì)的示例代碼，需要的朋友可以參考學(xué)習(xí)，下面來一起看看吧。2017-03-03
Android的Activity跳轉(zhuǎn)動(dòng)畫各種效果整理
Android的Activity跳轉(zhuǎn)就是很生硬的切換界面。其實(shí)Android的Activity跳轉(zhuǎn)可以設(shè)置各種動(dòng)畫，本文整理了一些，還有很多動(dòng)畫效果，就要靠我們發(fā)揮自己的想象力2013-06-06
ViewModel 是 Jetpack 的一部分。 ViewModel 類旨在以注重生命周期的方式存儲(chǔ)和管理界面相關(guān)的數(shù)據(jù)。ViewModel 類讓數(shù)據(jù)可在發(fā)生屏幕旋轉(zhuǎn)等配置更改后繼續(xù)留存。本文簡單講解ViewModel的使用2021-06-06
Android自動(dòng)測(cè)試工具M(jìn)onkey
Monkey是Android中的一個(gè)命令行工具，可以運(yùn)行在模擬器里或?qū)嶋H設(shè)備中。它向系統(tǒng)發(fā)送偽隨機(jī)的用戶事件流(如按鍵輸入、觸摸屏輸入、手勢(shì)輸入等)，實(shí)現(xiàn)對(duì)正在開發(fā)的應(yīng)用程序進(jìn)行壓力測(cè)試。Monkey測(cè)試是一種為了測(cè)試軟件的穩(wěn)定性、健壯性的快速有效的方法2016-01-01
Android開發(fā)中DatePicker日期與時(shí)間控件實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了Android開發(fā)中DatePicker日期與時(shí)間控件,代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-08-08
Android從0到完整項(xiàng)目（1）使用Android studio 創(chuàng)建項(xiàng)目詳解
本篇文章主要介紹了Android從0到完整項(xiàng)目（1）使用Android studio 創(chuàng)建項(xiàng)目詳解，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
Android自定義ScrollView使用自定義監(jiān)聽
這篇文章主要介紹了Android自定義ScrollView使用自定義監(jiān)聽 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Android開發(fā)之高德地圖實(shí)現(xiàn)定位
本篇文章主要介紹了Android中高德地圖實(shí)現(xiàn)定位的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了Android Volley圖片加載功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Android中自定義控件之液位指示器 方法的相關(guān)資料,需要的朋友可以參考下2016-03-03