Flutter Widget：State 状态管理

响应式的编程框架永恒的主题——“状态(State)管理”

无论是在 React/Vue/Flutter 中讨论的问题和解决的思想都是一致的。

StatefulWidget的状态应该被谁管理？Widget本身？父 Widget ？都会？还是另一个对象？

下面是官方给出的一些原则：

• 如果状态是用户数据如复选框的选中状态、滑块的位置，则最好由父 Widget 管理。
• 如果状态是有关界面外观效果如颜色、动画，最好由 Widget 本身来管理。
• 如果状态是不同 Widget 共享的，最好由它们共同的父 Widget 管理。

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

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

接下来，我们将通过例子说明管理状态的不同方式：创建一个盒子，当点击它时，盒子背景会在绿色与灰色之间切换。状态 _active确定颜色：绿色为true ，灰色为false。如图所示：

Widget管理自身状态

我们实现一个TapboxA，对应的状态类_TapboxAState :

class TapboxA extends StatefulWidget {
  TapboxA({Key? key}) : super(key: key);
  @override
  _TapboxAState createState() => _TapboxAState();
}
class _TapboxAState extends State<TapboxA> {
  bool _active = false;//确定盒子的当前颜色的布尔值。
  void _handleTap() {//更新_active，并调用setState()更新UI。
    setState(() { _active = !_active;});
  }
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        child: Center(
          child: Text(
            _active ? 'Active' : 'Inactive',
            style: 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状态

父Widget管理状态并告诉其子Widget何时更新。