一、状态管理概述

以下是管理状态的最常见的方法：

  • Widget 管理自己的状态。
  • Widget 管理子 Widget 状态。
  • 混合管理（父 Widget 和子 Widget 都管理状态）。

如何决定使用哪种管理方法？下面是官方给出的一些原则可以帮助你做决定：

  • 如果状态是用户数据，如复选框的选中状态、滑块的位置，则该状态最好由父 Widget 管理。
  • 如果状态是有关界面外观效果的，例如颜色、动画，那么状态最好由 Widget 本身来管理。
  • 如果某一个状态是不同 Widget 共享的则最好由它们共同的父 Widget 管理。
  • 在 Widget 内部管理状态封装性会好一些，而在父 Widget 中管理会比较灵活。

两种组件的继承：

  • StatefulWidget 有状态组件
  • StatelessWidget 无状态组件

一个典型的有状态组件结构如下：

  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
  4. void main() {
  5.   runApp(new StartApp());
  6. }
  8. class StartApp extends StatefulWidget {
  9.   @override
  10.   State<StatefulWidget> createState() {
  11.     return new _StartAppState();
  12.   }
  13. }
  15. class _StartAppState extends State<StartApp> {
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return MaterialApp(
  19.       title: '首页',
  20.       theme: new ThemeData(
  21.         primarySwatch: Colors.blue,
  22.       ),
  23.       home: new Scaffold(
  24.         appBar: new AppBar(
  25.           title: new Text('Welcome to Flutter'),
  26.         ),
  27.         body: new Center(
  28.           child: new Text('Hello World'),
  29.         ),
  30.       ),
  31.     );
  32.   }
  33. }

二、Widget 管理自身状态

setState：Flutter 中, 有状态组件通过 setState 设置自身状态, 传入一个匿名函数, 在函数内部的操作(比如赋值、往列表里面添加元素等)将会触发视图更新。

示例一：点击单词重新生成

  1. import 'package:english_words/english_words.dart';
  3. class RandomWords extends StatefulWidget {
  4.   @override
  5.   createState() => new _RandomWordsState();
  6. }
  8. class _RandomWordsState extends State<RandomWords> {
  9.   var wordPair = new WordPair.random();
  10.   _handlerTap () {
  11.     setState(() {
  12.       wordPair = new WordPair.random();
  13.     });
  14.   }
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return new GestureDetector(
  19.       onTap: _handlerTap,
  20.       child: Center(
  21.         child: Text(wordPair.asPascalCase),
  22.       ),
  23.     );
  24.   }
  25. }

示例二：点击切换屏幕颜色

  1. class TapboxA extends StatefulWidget {
  2.   TapboxA({Key key}) : super(key: key);
  4.   @override
  5.   createState() => new _TapboxAState();
  6. }
  8. class _TapboxAState extends State<TapboxA> {
  9.   bool _active = false;
  11.   void _handleTap() {
  12.     setState(() {
  13.       _active = !_active;
  14.     });
  15.   }
  17.   Widget build(BuildContext context) {
  18.     return new GestureDetector(
  19.       onTap: _handleTap,
  20.       child: new Container(
  21.         child: new Center(
  22.           child: new Text(
  23.             _active ? 'Active' : 'Inactive',
  24.             style: new TextStyle(fontSize: 32.0, color: Colors.white),
  25.           ),
  26.         ),
  27.         width: 200.0,
  28.         height: 200.0,
  29.         decoration: new BoxDecoration(
  30.           color: _active ? Colors.lightGreen[700] : Colors.grey[600],
  31.         ),
  32.       ),
  33.     );
  34.   }
  35. }

三、父 Widget 管理子 Widget 的状态

先上示例：

  1. // ParentWidget 为 TapboxB 管理状态.
  3. //------------------------ ParentWidget --------------------------------
  5. class ParentWidget extends StatefulWidget {
  6.   @override
  7.   _ParentWidgetState createState() => new _ParentWidgetState();
  8. }
  10. class _ParentWidgetState extends State<ParentWidget> {
  11.   bool _active = false;
  13.   void _handleTapboxChanged(bool newValue) {
  14.     setState(() {
  15.       _active = newValue;
  16.     });
  17.   }
  19.   @override
  20.   Widget build(BuildContext context) {
  21.     return new Container(
  22.       child: new TapboxB(
  23.         active: _active,
  24.         onChanged: _handleTapboxChanged,
  25.       ),
  26.     );
  27.   }
  28. }
  30. //------------------------- TapboxB ----------------------------------
  32. class TapboxB extends StatelessWidget {
  33.   TapboxB({Key key, this.active: false, @required this.onChanged})
  34.       : super(key: key);
  36.   final bool active;
  37.   final ValueChanged<bool> onChanged;
  39.   void _handleTap() {
  40.     onChanged(!active);
  41.   }
  43.   Widget build(BuildContext context) {
  44.     return new GestureDetector(
  45.       onTap: _handleTap,
  46.       child: new Container(
  47.         child: new Center(
  48.           child: new Text(
  49.             active ? 'Active' : 'Inactive',
  50.             style: new TextStyle(fontSize: 32.0, color: Colors.white),
  51.           ),
  52.         ),
  53.         width: 200.0,
  54.         height: 200.0,
  55.         decoration: new BoxDecoration(
  56.           color: active ? Colors.lightGreen[700] : Colors.grey[600],
  57.         ),
  58.       ),
  59.     );
  60.   }
  61. }

父 Widget 将 active 和 onChanged 传入子 Widget, 分别使用本身的 _active 和 _handleTapboxChanged 作映射, 当点击子 Widget 时, 触发 _handleTapboxChanged 并改变 _active 的值。

四、混合状态管理

_ParentWidgetStateC 类：

  • 管理_active 状态。
  • 实现 _handleTapboxChanged() ，当盒子被点击时调用。
  • 当点击盒子并且_active 状态改变时调用 setState()更新 UI。

_TapboxCState 对象：

  • 管理_highlight 状态。
  • GestureDetector 监听所有 tap 事件。当用户点下时，它添加高亮（深绿色边框）；当用户释放时，会移除高亮。
  • 当按下、抬起、或者取消点击时更新_highlight 状态，调用 setState()更新 UI。
  • 当点击时，将状态的改变传递给父组件。
  1. //---------------------------- ParentWidget ----------------------------
  3. class ParentWidgetC extends StatefulWidget {
  4.   @override
  5.   _ParentWidgetCState createState() => new _ParentWidgetCState();
  6. }
  8. class _ParentWidgetCState extends State<ParentWidgetC> {
  9.   bool _active = false;
  11.   // 处理子Widget的点击事件
  12.   void _handleTapboxChanged(bool newValue) {
  13.     setState(() {
  14.       _active = newValue;
  15.     });
  16.   }
  18.   @override
  19.   Widget build(BuildContext context) {
  20.     return new Container(
  21.       child: new TapboxC(
  22.         active: _active,
  23.         onChanged: _handleTapboxChanged,
  24.       ),
  25.     );
  26.   }
  27. }
  29. //----------------------------- TapboxC ------------------------------
  31. class TapboxC extends StatefulWidget {
  32.   // 接收父Widget传入的状态
  33.   TapboxC({Key key, this.active: false, @required this.onChanged})
  34.       : super(key: key);
  36.   final bool active;
  37.   final ValueChanged<bool> onChanged;
  39.   @override
  40.   _TapboxCState createState() => new _TapboxCState();
  41. }
  43. class _TapboxCState extends State<TapboxC> {
  44.   bool _highlight = false;
  46.   // 自己处理本Widget的按下、抬起事件
  47.   void _handleTapDown(TapDownDetails details) {
  48.     setState(() {
  49.       this._highlight = true;
  50.     });
  51.   }
  53.   void _handleTapUp(TapUpDetails details) {
  54.     setState(() {
  55.       _highlight = false;
  56.     });
  57.   }
  59.   void _handleTapCancel() {
  60.     setState(() {
  61.       _highlight = false;
  62.     });
  63.   }
  65.   // 交由父 Widget 处理点击事件
  66.   void _handleTap() {
  67.     // 使用Widget中的状态(此处为父Widget传入的状态)时, 不能用this, 而是直接用widget
  68.     widget.onChanged(!widget.active);
  69.   }
  71.   @override
  72.   Widget build(BuildContext context) {
  73.     // 在按下时添加绿色边框，当抬起时，取消高亮
  74.     return new GestureDetector(
  75.       onTapDown: _handleTapDown, // 处理按下事件
  76.       onTapUp: _handleTapUp, // 处理抬起事件
  77.       onTap: _handleTap,
  78.       onTapCancel: _handleTapCancel,
  79.       child: new Container(
  80.         child: new Center(
  81.           child: new Text(widget.active ? 'Active' : 'Inactive',
  82.               style: new TextStyle(fontSize: 32.0, color: Colors.white)),
  83.         ),
  84.         width: 200.0,
  85.         height: 200.0,
  86.         decoration: new BoxDecoration(
  87.           color: widget.active ? Colors.lightGreen[700] : Colors.grey[600],
  88.           border: _highlight
  89.               ? new Border.all(
  90.             color: Colors.teal[700],
  91.             width: 10.0,
  92.           ) : null,
  93.         ),
  94.       ),
  95.     );
  96.   }
  97. }

五、全局状态管理

以下部分选读, 可能在项目中根本不需要用到，参见：