Flutter

Flutter

1. 状态管理

全局状态管理------------待补充（当应用中需要一些跨组件（包括跨路由）的状态需要同步时，上面介绍的方法便很难胜任了。比如，我们有一个设置页，里面可以设置应用的语言，我们为了让设置实时生效，我们期望在语言状态发生改变时，App中依赖应用语言的组件能够重新 build 一下，但这些依赖应用语言的组件和设置页并不在一起，所以这种情况用上面的方法很难管理。这时，正确的做法是通过一个全局状态管理器来处理这种相距较远的组件之间的通信）。

父Widget管理子Widget的状态：父组件负责“拥有”状态（即管理状态），而子组件负责“触发”状态变化。通过父组件传递回调函数，子组件可以“通知”父组件发生了什么变化，父组件通过 setState() 更新自己的状态并重新构建 UI。

// ParentWidget 为 TapboxB 管理状态.

//------------------------ ParentWidget --------------------------------

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ParentWidget extends StatefulWidget {
  @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 Container(
      child: TapboxB(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

//------------------------- TapboxB ----------------------------------

class TapboxB extends StatelessWidget {
  TapboxB({Key? key, this.active = false, required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap() {
    onChanged(!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],
        ),
      ),
    );
  }
}

用户点击 -> _handleTap -> 执行 onChanged(!active) ->子组件的 onChanged为父组件传递的_handleTapboxChanged回调 -> 执行_handleTapboxChanged方法，里面包含setState，就会更新UI。
整体来看：父组件控制子类的状态，通过定义setState来实现状态的变化，为了要控制子组件，父类传递给子类状态和回调（只是函数的名字，没有执行，只是传递），在子类中，当用户点击之后执行父类传递的回调函数（这里是函数名字+（参数），即执行方法），这个方法为setState，出发UI更新和状态变化。