Flutter初识状态管理

Flutter中，管理状态的最常见的方法：

• Widget管理自身的状态
• 父Widget管理子Widget的状态
• 混合状态(父Widget和子Widget都管理状态)

---

1. Widget管理自身的状态

在自身Widget中更新视图。

在SelfPage类中，定义一个_active变量，定义一个_handleTap()点击事件函数，在调用该函数时更新_active变量的值，并调用setState()来更新视图；

代码示例如下：

class SelfPage extends StatefulWidget {

  @override
  _SelfPageState createState() => new _SelfPageState();
}

class _SelfPageState extends State<SelfPage> {
  bool _active = false;

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

  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _handleTap,
      child: new Container(
        child: new Center(
          child: new Text(
            _active ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0
      ),
    );
  }
}

---

2. 父Widget管理子Widget的状态

在父Widget中，通知其子Widget更新视图。

在ParentPage类中，定义一个_active变量，用于赋值给子类，定义一个当状态发生变化时_handleChangeTap()函数，调用setState()来更新子类的视图；

在ChildPage 子类中，定义所需接收的参数值，active（变量），onChanged（事件）

代码示例如下：

class ParentStatePage extends StatefulWidget {
  @override
  _ParentStatePageState createState() => new _ParentStatePageState();
}

class _ParentStatePageState extends State<ParentStatePage> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new ChildPage(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

class ChildPage extends StatelessWidget {
  ChildPage({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 new GestureDetector(
      onTap: () {
        _handleTap();
      },
      child: new Container(
        child: new Center(
          child: new Text(
            active ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0
      ),
    );
  }
}

---

3. 混合状态(父Widget和子Widget都管理状态)

可以通过父Widget来通知其子Widget更新视图，也可以子Widget自己来更新视图。

在2示例代码中，在原来的代码基础上，对子Widget类增加一个处理按下事件的函数，去更新视图
代码示例如下：

class ParentPage extends StatefulWidget {
  @override
  _ParentPageState createState() => new _ParentPageState();
}

class _ParentPageState extends State<ParentPage> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapboxC(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

class ChildPage extends StatefulWidget {
  ChildPage({Key key, this.active: false, @required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;
  bool _highlight = false;

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

  void _handleTap() {
    onChanged(!active);
  }

  Widget build(BuildContext context) {
    return new GestureDetector(
     // 处理按下事件时
     onTapDown: () {
        _handleTapDown(); 
      }, 
      onTap: () {
        _handleTap();
      }, 
      child: new Container(
        child: new Center(
          child: new Text(
            active ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: _highlight ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
}

---

当应用中需要一些跨组件管理状态时，就需要全局状态管理了，可以使用一些专门用于状态管理的包，如Provider、Redux，读者可以在pub上查看其详细信息。