Flutter学习记录-交互

Flutter学习记录-汇总

这是第三篇，会根据第一篇的成品修改，UI如下：

image.png

首先，最简单的，为左上角的back按钮增加一个点击事件

在此需要引入一个widget：GestureDetector，简单来说可以称为手势监听控件

GestureDetector能监听的属性非常多，在此仅介绍常用的几项：

onTap：点击事件
onDoubleTap：双击事件
onLongPress：长按事件

详细介绍参见：GestureDetector

加入后的代码如下：

                new GestureDetector(
                  onTap: () {
                    Navigator.maybePop(context);
                  },
                  child: new Text(
                    "back",
                    style: new TextStyle(
                        decoration: TextDecoration.none,
                        fontSize: 18,
                        color: Colors.blue),
                  ),
                ),

代码很简单，外层一个GestureDetector包含了点击事件onTap和子widget：Text

实现的效果就是点击back时该页面会自动关闭。

不过使用中发现这个效果很不好触发，原因是Text的热区太小，可以使用padding优化一下：

                new GestureDetector(
                    onTap: () {
                      //Navigator.maybePop(context);
                    },
                    child: Container(
                      height: 50,
                      alignment: Alignment.center,
                      child: new Text(
                        "back",
                        style: new TextStyle(
                            decoration: TextDecoration.none,
                            fontSize: 18,
                            color: Colors.blue),
                      ),
                    )),

这样就很容易点击了，下一步再给这个按钮增加一个点击效果

widget中，有StatelessWidget和StatefulWidget之分

简单来说，如果widget会发生变化，那么它就是StatefulWidget，显然能够变色的按钮是属于StatefulWidget的

首先声明一个StatefulWidget的Button类

class Button extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ButtonState();
  }
}

然后需要实现他的state，也就是ButtonState

class ButtonState extends State<Button> {
  var isPress = false;

  void onButtonTapDown(TapDownDetails details) {
    setState(() {
      isPress = true;
    });
  }

  void onButtonTapUp(TapUpDetails details) {
    setState(() {
      isPress = false;
    });
  }

  void onButtonTap() {}

  void onButtonTapCancel() {
    setState(() {
      isPress = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTapDown: onButtonTapDown,
      onTapUp: onButtonTapUp,
      onTap: onButtonTap,
      onTapCancel: onButtonTapCancel,
      child: Container(
        height: 50,
        alignment: Alignment.center,
        child: new Text(
          "MORE",
          style: new TextStyle(
              decoration: TextDecoration.none,
              fontSize: 18,
              color: isPress ? Colors.red : Colors.blue),
        ),
      ),
    );
  }

在state中，定义了一个bool参数isPress来表示是否在按下状态，在build中根据isPress参数来确定color的值

而isPress参数则由onTapDown, onTapUp, onTapCancel控制，同时调用setState更新状态

然后用Button来替换上面的GestureDetector，就能得到一个按下时会显示红色的按钮了

但在这个类中，我们还需要能灵活配置的Text内容，和对点击事件的响应，所以还需要进行一些扩充

class Button extends StatefulWidget {
  final String txt;
  final GestureTapCallback onClick;

  Button({@required this.txt, @required this.onClick});

  @override
  State<StatefulWidget> createState() {
    return ButtonState(txt);
  }
}

  void onButtonTap() {
    widget.onClick();
  }

child: new Text(
          txt,
          style: new TextStyle(
              decoration: TextDecoration.none,
              fontSize: 18,
              color: isPress ? Colors.red : Colors.blue),
        ),

在Button中扩充了两个参数，text和onClick，然后在onButtonTap中调用onClick方法，在Text中使用txt参数

这样我们就有了一个有按下状态，并可以动态设置文字和点击事件的按钮了。