StatefulWidget

StatefulWidget 是有状态控件,这样的控件拥有自己的私有数据和业务逻辑,基本定义过程如下:

定义有状态的控件

// 定义一个 电影详情 控件,继承自 StatefulWidget
class MovieDetail extends StatefulWidget {
  // 构造函数,初始化当前组件必须的 id 属性
  MovieDetail({Key key, @required this.id}) : super(key: key);

  // 电影的Id值
  final String id;

  // StatefulWidget 控件必须实现 createState 函数
  // 在 createState 函数中,必须返回一个继承自 State<T> 状态类的对象
  // 这里的 _MovieDetailState 就继承自 State<T>
  _MovieDetailState createState() => new _MovieDetailState();
}

定义继承自 State<T> 的状态类

// 这个继承自 State<T> 的类,专门用来定义有状态控件的 业务逻辑 和 私有数据
class _MovieDetailState extends State<MovieDetail> {
  // build 函数是必须的,用来渲染当前有状态控件对应的 UI 结构
  @override
  Widget build(BuildContext context) {
    // 注意:在这个 _MovieDetailState 状态类中,可以使用 widget 对象访问到 StatefulWidget 控件中的数据并直接使用
    // 例如:widget.id
    return Text('MovieDetail --' + widget.id);
  }
}

定义和修改私有数据


// 这个继承自 State<T> 的类,专门用来定义有状态控件的 业务逻辑 和 私有数据
class _MovieDetailState extends State<MovieDetail> {
  // 1. 定义私有状态数据【以 _ 开头的数据,是当前类的私有数据】
  int _count;

  // 2. 通过 initState 生命周期函数,来初始化私有数据
  @override
  void initState() {
    super.initState();
    // 2.1 把 _count 的值初始化为 0
    _count = 0;
  }

  // build 函数是必须的,用来渲染当前有状态控件对应的 UI 结构
  @override
  Widget build(BuildContext context) {
    // 注意:在这个 _MovieDetailState 状态类中,可以使用 widget 对象访问到 StatefulWidget 控件中的数据并直接使用
    // 例如:widget.id
    return Column(
      children: <Widget>[
        Text('MovieDetail --' + widget.id + ' --- ' + _count.toString()),
        RaisedButton(
          child: Icon(Icons.add),
          // 3. 指定点击事件的处理函数为 _add
          onPressed: _add,
        )
      ],
    );
  }

  // 4. 定义 _count 自增的函数【以 _ 开头的函数,是私有函数】
  void _add() {
    // 如果要为私有数据重新赋值,必须调用 setState() 函数
    setState(() {
      // 让私有数据 _count 自增 +1
      _count++;
    });
  }
}

results matching ""

    No results matching ""