美文网首页
Flutter 交互控制、 事件传递处理

Flutter 交互控制、 事件传递处理

作者: KB_MORE | 来源:发表于2021-06-01 16:32 被阅读0次

    AbsorbPointer

    AbsorbPointer是一种禁止用户输入的控件,比如按钮的点击、输入框的输入、ListView的滚动等,你可能说将按钮的onPressed设置为null,一样也可以实现,是的,但AbsorbPointer可以提供多组件的统一控制,而不需要你单独为每一个组件设置。

    用法如下:

    AbsorbPointer(
      child: Row(
        children: <Widget>[
          RaisedButton(onPressed: (){},),
          RaisedButton(onPressed: (){},),
          RaisedButton(onPressed: (){},),
          RaisedButton(onPressed: (){},),
    
        ],
      ),
    )
    
    

    默认情况下,这些按钮是否响应点击事件的,如果想要响应点击事件只需设置absorbing为false即可:

    AbsorbPointer(
      absorbing: false,
      ...
    )
    
    

    IgnorePointer

    IgnorePointer的用法和AbsorbPointer一样,而且达到的效果一样,用法如下:

    IgnorePointer(
      child: Row(
        children: <Widget>[
          RaisedButton(onPressed: (){},),
          RaisedButton(onPressed: (){},),
          RaisedButton(onPressed: (){},),
          RaisedButton(onPressed: (){},),
        ],
      ),
    )
    
    

    区别

    AbsorbPointer本身可以接收点击事件,消耗掉事件,而IgnorePointer无法接收点击事件,其下的控件可以接收到点击事件(不是子控件)。

    如果有2个盒子,一个200x200的红色盒子,一个100x100的蓝色盒子,蓝色盒子位于红色盒子之上居中显示,给2个盒子添加点击事件,如下:

    return Container(
          height: 200,
          width: 200,
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Listener(
                onPointerDown: (v) {
                  print('click red');
                },
                child: Container(
                  color: Colors.red,
                ),
              ),
              Listener(
                onPointerDown: (v) {
                  print('click red');
                },
                child: Container(
                  color: Colors.blue,
                  width: 100,
                  height: 100,
                ),
              ),
            ],
          ),
        );
    
    

    点击蓝色盒子时,打印结果:

    flutter: click blue
    
    

    点击蓝色盒子区域以外的红色盒子,打印结果:

    flutter: click red
    
    

    此时用AbsorbPointer包裹蓝色盒子:

    return Container(
      height: 200,
      width: 200,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Listener(
            onPointerDown: (v) {
              print('click red');
            },
            child: Container(
              color: Colors.red,
            ),
          ),
          Listener(
            onPointerDown: (v) {
              print('click blue self');
            },
            child: AbsorbPointer(
              child: Listener(
                onPointerDown: (v) {
                  print('click blue child');
                },
                child: Container(
                  color: Colors.blue,
                  width: 100,
                  height: 100,
                ),
              ),
            ),
          ),
        ],
      ),
    );
    
    

    点击蓝色盒子,打印如下:

    flutter: click blue self
    
    

    说明AbsorbPointer本身接收到了点击事件,将AbsorbPointer改为IgnorePointer,打印如下:

    flutter: click red
    
    

    点击事件穿透蓝色盒子到红色盒子,红色盒子接收到了点击事件。

    使用场景

    1、根据业务需求禁用/启用多个组件。

    2、根据业务需求禁用/启用整个App。

    http://laomengit.com/flutter/widgets/AbsorbPointer.html#absorbpointer

    相关文章

      网友评论

          本文标题:Flutter 交互控制、 事件传递处理

          本文链接:https://www.haomeiwen.com/subject/nyowsltx.html