简介

Flutter新建组件有俩种状态组件:StatelessWidgetStatefulWidget,这些在新建Flutter项目就能看到相关展示代码,下面就详细解释下这俩者区别:

StatefulWidget:是指有状态变化的组件,例如系统提供的 Checkbox, Radio, Slider, InkWell, Form, and TextField 都是 stateful widgets, 他们都是 StatefulWidget的子类。

StatelessWidget:是指没有内部状态变化的组件,例如 IconIconButton, 和Text 都是无状态widget, 他们都是 StatelessWidget的子类。

stateful组件就是和用户交互后会有状态变化,例如滚动条Slider。
stateless组件就是交互后没有状态变化,例如显示的一个文本Text。

自定义状态管理组件

stateful组件:

  • 创建一个继承自StatefulWidget的类来表示你要自定义的可变控件
  • 创建一个继承自State的类来处理这个可变控件的状态和显示样式(build方法)。
  • 当用户交互发生,例如onPressed点击事件被触发时,可以调用setState方法告诉组件需要重绘。
/*
  switchBoxFul 是自身widget管理自己状态
*/
class switchBoxFul extends StatefulWidget {
  @override
  _SwitchBoxState createState() {
    return new _SwitchBoxState();
  }
}

Flutter中定义Stateful类必须返回一个State类的对象,所以这里定义了一个叫_SwitchBoxStatestate类,这个类名前面加了下划线 _ 代表这个是私有的类。

class _SwitchBoxState extends State<switchBoxFul> {
  bool _switchActive = false; // 按钮显示`关闭`这个状态
 
  void _switchActiveChanged() {
    setState(() {
      _switchActive = !(_switchActive);
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _switchActiveChanged,
      child: new Center(
        child: new Container(
          alignment: Alignment.center,
          width: 200.0,
          height: 200.0,
          child: new Text(
            _switchActive ? '开' : '关',
            style: new TextStyle(fontSize: 50.0, color: Colors.white),
          ),
          decoration: new BoxDecoration(
              color: _switchActive ? Colors.green[400] : Colors.grey),
        ),
      ),
    );
  }
}

_switchActiveChanged()方法来处理状态的变化,里面用setState方法告诉组件需要重绘,里面将状态的值可以修改。

无状态管理组件:

其实上面的案例就完全足够了,但在无状态管理组件下如何实现状态管理呢?可以在组件外面一层套入状态管理组件(父类组件)就行了,最终结果实现的效果这俩者没有任何区别,不过这样代码维护比较麻烦一下,下面代码就不再详述了:

/*
  SwitchBoxLess 是父widget管理子widget状态;
  SwitchBoxLess 继承自无状态控件,不管理任何状态
*/
class SwitchBoxLessWidget extends StatelessWidget {
  SwitchBoxLessWidget({Key key, this.switchActive: false, this.onChanged}) : super(key: key);
  final switchActive;
  final ValueChanged<bool> onChanged;
 
  void _switchActiveChanged() {
    onChanged(!switchActive);
  }
 
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _switchActiveChanged,
      child: new Center(
        child: new Container(
          alignment: Alignment.center,
          width: 200.0,
          height: 200.0,
          child: new Text(
            switchActive ? '开启' : '关闭',
            style: new TextStyle(fontSize: 50.0, color: Colors.white),
          ),
          decoration: new BoxDecoration(
              color: switchActive ? Colors.blue : Colors.red),
        ),
      ),
    );
  }
}
 
/*
ParentWidget类是SwitchBoxLess的父类
他会得知盒子是否被点击从而管理盒子的状态,通过setState更新展示内容
*/
class switchBoxLess extends StatefulWidget {
  @override
  _SwitchBoxLessState createState() {
    return new _SwitchBoxLessState();
  }
}
 
class _SwitchBoxLessState extends State<switchBoxLess> {
  bool _switchActive = false;
 
  void _handleSwitchBoxLessChanged(bool value) {
    setState(() {
      _switchActive = value;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return new SwitchBoxLessWidget(
      switchActive: _switchActive,
      onChanged: _handleSwitchBoxLessChanged,
    );
  }
}

代码展示的效果可以在我编写的App布局里展示。

StatefulWidget状态管理展示实例