状态管理

管理自身状态

定义_active：确定盒子的当前颜色的布尔值。
定义_handleTap()函数，该函数在点击该盒子时更新_active，并调用setState()更新UI。

dart

class Page extends StatefulWidget {
  Page({Key? key}) : super(key: key);

  @override
  _State createState() => _State();
}

class _State extends State<Page> {
  bool _active = false;

  void _handleTap() {
    setState(() {
      _active = !_active;
    });
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        color: _active ? Colors.lightGreen[700] : Colors.grey[600],
        child: Center(
          child: Text(
            _active ? 'Active' : 'Inactive',
            style: TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

父管理子状态，父子通信

HomePagee 类：

管理 _active 状态
定义 _changeActive 方法，让子可以改变 _active 状态

HomeChild 类：

当用户点击时，调用 changeActive 改变父的 _active 状态，从而实现颜色和文字的响应式更新

dart

class HomePage extends StatefulWidget {
  HomePage({Key? key, required this.title}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _active = false;

  void _changeActive(newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: HomeChild(
        active: _active,
        changeActive: _changeActive,
      ),
    );
  }
}

class HomeChild extends StatefulWidget {
  HomeChild({Key? key, this.active = false, required this.changeActive}) : super(key: key);

  final bool active;
  final ValueChanged<bool> changeActive;

  @override
  _HomeChildState createState() => _HomeChildState();
}

class _HomeChildState extends State<HomeChild> {
  void handleTap() {
    widget.changeActive(!widget.active);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: handleTap,
      child: Container(
        color: widget.active ? Colors.green : Colors.grey,
        child: Center(
          child: Text(
            widget.active ? 'active' : 'inactive',
            style: TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

全局状态

实现一个全局的事件总线，将语言状态改变对应为一个事件，然后在APP中依赖应用语言的组件的initState 方法中订阅语言改变的事件。当用户在设置页切换语言后，我们发布语言改变事件，而订阅了此事件的组件就会收到通知，收到通知后调用setState(...)方法重新build一下自身即可
使用一些专门用于状态管理的包，如 Provider、Redux

状态管理 ​

管理自身状态 ​

父管理子状态，父子通信 ​

全局状态 ​

状态管理

管理自身状态

父管理子状态，父子通信

全局状态