原文链接

更多资源

Flutter如何自定义一个Stateful（有状态）组件

你将学到：

• 什么是stateful 组件
• 如何创建一个stateful 组件
• 自定义有状态组件的实例
  实例的样子：

什么是stateful widget

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

相对应的就有stateless widget 没有内部状态变化的组件，例如 Icon、 IconButton, 和Text 都是无状态widget, 他们都是 StatelessWidget的子类。

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

如何创建一个stateful 组件

创建有状态的组件可以遵循以下步骤：

• 1.创建一个继承自StatefulWidget的类来表示你要自定义的可变控件
• 2.创建一个继承自State的类来处理这个可变控件的状态和显示样式（build方法）。
• 3.当用户交互发生，例如onPressed点击事件被触发时，可以调用setState方法告诉组件需要重绘

自定义有状态组件的实例

1.分析一下要实现的例子，这里需要先继承自StatefulWidget类定义一个属于这个组件的类：

class FavoriteWidget extends StatefulWidget {  //组件名：FavoriteWidget
  @override
  _FavoriteWidgetState createState() {  // 分析1
    return _FavoriteWidgetState();
  }
}

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

2.实现State的子类_FavoriteWidgetState

_FavoriteWidgetState类如上面讲到的需要保存组件的状态，并且要在build方法中处理组件的展示样式。这里使用变量_isFavorited代表是否点击过喜欢，_favoriteCount代表当前喜欢的次数。

先定义变量：

class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true; //代表是否点击过喜欢
  int _favoriteCount = 55; //代表当前喜欢的次数
}

然后处理点击事件的方法：
点击后如果_isFavorited是true表示喜欢，我们将次数_favoriteCount加一，否则就减一。

class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true;
  int _favoriteCount = 55;

  void _toggleFavorite() {  //分析2
    setState(() {
      if (_isFavorited) {
        _favoriteCount -= 1;
        _isFavorited = false;
        // Otherwise, favorite it.
      } else {
        _favoriteCount += 1;
        _isFavorited = true;
      }
    });
  }

分析2:用_toggleFavorite方法来处理状态的变化，里面用setState方法告诉组件需要重绘，里面将状态的值尽心修改。

1. 最后一步根据状态的值来绘制组件长的样子

这里添加一个IconButton和一个text：

@override
  Widget build(BuildContext context) {
    return new Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        new Container(
          padding: new EdgeInsets.all(0.0),
          child: new IconButton(
              icon: (_isFavorited
                  ? new Icon(Icons.star)
                  : new Icon(Icons.star_border)),
              onPressed: _toggleFavorite),
        ),
        new SizedBox(
          width: 18.0,
          child: new Container(child: new Text('$_favoriteCount')),
        ),
      ],
    );
  }

该widget使用IconButton（而不是Icon）， 因为它具有一个onPressed属性，该属性定义了处理点击的回调方法onPressed,在回调方法中我们调用了上面的改变状态的方法。