Flutter自定义Stateful(有状态)组件

Flutter如何自定义一个Stateful(有状态)组件

你将学到:

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

实例的样子:

什么是stateful widget

stateful widget 是指有状态变化的组件,例如系统提供的 CheckboxRadioSliderInkWellForm, 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,在回调方法中我们调用了上面的改变状态的方法。

全部代码:

完整代码

发表评论

关闭菜单