Flutter中为控件添加交互

1. Stateful（有状态）和 stateless（无状态） widgets

有些widgets是有状态的, 有些是无状态的如果用户与widget交互，widget会发生变化，那么它就是有状态的. widget的状态（state）是一些可以更改的值, 如一个slider滑动条的当前值或checkbox是否被选中. widget的状态保存在一个State对象中, 它和widget的布局显示分离。当widget状态改变时, State 对象调用setState(), 告诉框架去重绘widget.

stateless widget 没有内部状态. Icon、 IconButton, 和Text 都是无状态widget, 他们都是 StatelessWidget的子类。

stateful widget 是动态的. 用户可以和其交互 (例如输入一个表单、或者移动一个slider滑块),或者可以随时间改变 (也许是数据改变导致的UI更新). Checkbox, Radio, Slider, InkWell, Form, and TextField 都是 stateful widgets, 他们都是 StatefulWidget的子类。

2.创建一个有状态的widget

要创建一个自定义有状态widget，需创建两个类：StatefulWidget和State，其中StatefulWidget是控件本身，State是控件的状态。也就是说，在State中编写控件的响应代码，而StatefulWidget只需要通过调用CreateState()来返回一个新的实体就可以了。状态对象包含widget的状态和build() 方法。当widget的状态改变时，状态对象调用setState()，告诉框架重绘widget。

step1: 决定哪个对象管理widget的状态,Widget的状态可以通过多种方式进行管理。

step1: 创建StatefulWidget子类

FavoriteWidget类管理自己的状态，因此它重写createState()来创建状态对象。框架会在构建widget时调用createState()。在这个例子中，createState()创建_FavoriteWidgetState的实例，您将在下一步中实现该实例。

    class FavoriteWidget extends StatefulWidget {
      @override
      _FavoriteWidgetState createState() => new _FavoriteWidgetState();
    }

step3: 创建State子类自定义State类存储可变信息 - 可以在widget的生命周期内改变逻辑和内部状态。当应用第一次启动时，用户界面显示一个红色实心的星星形图标，表明该湖已经被收藏，并有41个“喜欢”。状态对象存储这些信息在_isFavorited和_favoriteCount变量。

状态对象也定义了build方法。此build方法创建一个包含红色IconButton和Text的行。该widget使用IconButton（而不是Icon），因为它具有一个onPressed属性，该属性定义了处理点击的回调方法。IconButton也有一个icon的属性，持有Icon。

按下IconButton时会调用_toggleFavorite()方法，然后它会调用setState()。调用setState()是至关重要的，因为这告诉框架，widget的状态已经改变，应该重绘。 _toggleFavorite在: 1）实心的星形图标和数字“41” 和 2）虚心的星形图标和数字“40”之间切换UI。

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

  void _toggleFavorite() {
    setState(() {
      // If the lake is currently favorited, unfavorite it.
      if (_isFavorited) {
        _favoriteCount -= 1;
        _isFavorited = false;
        // Otherwise, favorite it.
      } else {
        _favoriteCount += 1;
        _isFavorited = true;
      }
    });
  }

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

代码运行结果如下：

3.管理状态

有多种方法可以管理状态，用户可以选择使用何种管理方法,一般而言就在父widget中管理状态。

1.widget管理自己的state

有些情况下widget在内部管理其状态是最好的。例如，当ListView的内容超过渲染框时， ListView自动滚动。大多数使用ListView的开发人员不想管理ListView的滚动行为，因此ListView本身管理其滚动偏移量。 class TapBoxA extends StatefulWidget{ @override State createState() { return new _TapBoxA(); } }

class _TapBoxA extends State<TapBoxA>{
  bool _active = false;

  void _handleTap(){
    setState(() {
      _active = !_active;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _handleTap,
      child: new Container(
        child: new Center(
          child: new Text(
            _active ? "Active" : "Inactive",
            style: new TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: _active ? Colors.lightGreen[700] :Colors.grey[600],
        ),
      ),
    );
  }
}

代码运行效果如图：

2.父widget管理widget的状态

对于父widget来说，管理状态并告诉其子widget何时更新通常是最有意义的。例如，IconButton允许您将图标视为可点按的按钮。 IconButton是一个无状态的小部件，因为我们认为父widget需要知道该按钮是否被点击来采取相应的处理。在以下示例中，TapboxB通过回调将其状态导出到其父项。由于TapboxB不管理任何状态，因此它的父类为StatelessWidget。

class ParentWidget extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return new _ParentWidgetState();
  }
}

class _ParentWidgetState extends State<ParentWidget>{
  bool _active = false;

  void _handleTapboxChanged(bool newValue){
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: TapBoxB(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

class TapBoxB extends StatelessWidget{
  TapBoxB({Key key, this.active: false, @required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap(){
    onChanged(!active);
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: _handleTap,
      child: new Container(
        child: new Center(
          child: new Text(
            active ? "Active" : "Inactive",
            style: new TextStyle(fontSize: 32, color: Colors.white),
          ),
        ),
        width: 200,
        height: 200,
        decoration: new BoxDecoration(
          color: active ? Colors.lightGreen[700] :Colors.grey[600],
        ),
      ),
    );
  }
}

代码效果：

3.混搭管理

对于一些widget来说，混搭管理的方法最有意义的。在这种情况下，有状态widget管理一些状态，并且父widget管理其他状态。

在TapboxC示例中，点击时，盒子的周围会出现一个深绿色的边框。点击时，边框消失，盒子的颜色改变。 TapboxC将其_active状态导出到其父widget中，但在内部管理其_highlight状态。这个例子有两个状态对象_ParentWidgetState和_TapboxCState。

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => new _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapboxC(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

//----------------------------- TapboxC ------------------------------

class TapboxC extends StatefulWidget {
  TapboxC({Key key, this.active: false, @required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  _TapboxCState createState() => new _TapboxCState();
}

class _TapboxCState extends State<TapboxC> {
  bool _highlight = false;

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    widget.onChanged(!widget.active);
  }

  Widget build(BuildContext context) {
    // This example adds a green border on tap down.
    // On tap up, the square changes to the opposite state.
    return new GestureDetector(
      onTapDown: _handleTapDown, // Handle the tap events in the order that
      onTapUp: _handleTapUp, // they occur: down, up, tap, cancel
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: new Container(
        child: new Center(
          child: new Text(widget.active ? 'Active' : 'Inactive',
              style: new TextStyle(fontSize: 32.0, color: Colors.white)),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color:
              widget.active ? Colors.lightGreen[700] : Colors.grey[600],
          border: _highlight
              ? new Border.all(
                  color: Colors.teal[700],
                  width: 10.0,
                )
              : null,
        ),
      ),
    );
  }
}

代码效果展示：

4.其他交互式widgets

你可以使用GestureDetector来给任何自定义widget添加交互性。

Flutter中为控件添加交互

Flutter中为控件添加交互

1. Stateful（有状态） 和 stateless（无状态） widgets

2.创建一个有状态的widget

3.管理状态

4.其他交互式widgets

1. Stateful（有状态）和 stateless（无状态） widgets