Flutter中可变状态控件状态管理的两种方式

Flutter 有两种状态控件：StatelessWidget、StatefulWidget，对于有可变状态控件的管理，官方文档是写了有3种模式：控件自己管理状态、交给父控件管理状态以及混合管理。我个人初学对于自己管理比较好理解，对于父控件管理理解起来有点困难，所以只能多看多学。这里写一下两种状态管理的方式和代码，加深自己的印象，尤其是父控件管理方式。

项目说明：两种方式实现一个容器盒子，点击的时候切换颜色和显示内容。我将把这两个盒子做到一个页面，虽然最终效果是一样的，但是实现方式不同。

一、控件自身管理自己的状态

/*
TapBoxA 是自身widget管理自己状态
 */
class TapBoxA extends StatefulWidget {
  @override
  _TapBoxAState createState() {
    return new _TapBoxAState();
  }
}

class _TapBoxAState extends State {
  bool _aActive = false;

  void _aActiveChanged() {
    setState(() {
      if (_aActive) {
        _aActive = false;
      } else {
        _aActive = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _aActiveChanged,
      child: new Center(
        child: new Container(
          alignment: Alignment.center,
          width: 200.0,
          height: 200.0,
          child: new Text(
            _aActive ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 50.0, color: Colors.white),
          ),
          decoration: new BoxDecoration(
              color: _aActive ? Colors.green[400] : Colors.grey),
        ),
      ),
    );
  }
}

二、由父控件管理子控件的状态

子控件自身是无状态的控件，但是父控件会在子控件发生变化以后得知这一更新，并进行状态的更新以及控件的重绘。

/*
TapBoxB 是父widget管理子widget状态;
TapBoxB 继承自无状态控件，不管理任何状态
 */
class TapBoxB extends StatelessWidget {
  TapBoxB({Key key, this.bActive: false, this.onChanged}) : super(key: key);
  final bActive;
  final ValueChanged onChanged;

  void _bActiveChanged() {
    onChanged(!bActive);
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _bActiveChanged,
      child: new Center(
        child: new Container(
          alignment: Alignment.center,
          width: 200.0,
          height: 200.0,
          child: new Text(
            bActive ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 50.0, color: Colors.white),
          ),
          decoration: new BoxDecoration(
              color: bActive ? Colors.green[400] : Colors.grey),
        ),
      ),
    );
  }
}

/*
ParentWidget类是TapBoxB的父类
他会得知盒子是否被点击从而管理盒子的状态，通过setState更新展示内容
 */
class ParentWidgetB extends StatefulWidget {
  @override
  _ParentWidgetBState createState() {
    return new _ParentWidgetBState();
  }
}

class _ParentWidgetBState extends State {
  bool _bActive = false;

  void _handleTapBoxBChanged(bool value) {
    setState(() {
      _bActive = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new TapBoxB(
      bActive: _bActive,
      onChanged: _handleTapBoxBChanged,
    );
  }
}

最后是代码整合，把上面两个不同方式实现盒子点击状态更改的代码在一个APP里展示出来

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'TapBox',
      theme: new ThemeData(primaryColor: Colors.white),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('TapBox'),
        ),
        body: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            new TapBoxA(),
            new ParentWidgetB(),
          ],
        ),
      ),
    );
  }
}

运行后首页显示如下：

点击后状态发生变化（但是实现方式是不同的）：