Flutter小部件之AbsorbPointer

AbsorbPointer

简述：一个吸收指针事件得小部件。

属性	释义
absorbing	是否吸收指针事件，默认是true
ignoringSemantics	是否编译时可以忽略语义树

示例1

Stack相对布局中两个按钮，上面得按钮通过AbsorbPointer包裹，设置absorbing为true,表示吸收指针事件，点击上面按钮是没有点击事件发生得，

 Stack(
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        SizedBox(
          width: 200.0,
          height: 100.0,
          child: ElevatedButton(
            onPressed: () {
              showToast('点击了');
            },
            child: null,
          ),
        ),
        SizedBox(
          width: 100.0,
          height: 200.0,
          child: AbsorbPointer(
            absorbing: true,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.blue.shade200,
              ),
              onPressed: () {
                showToast('点击了');
              },
              child: null,
            ),
          ),
        ),
      ],
    );

absorbpointer_1.gif

示例2

我们也可以通过AbsorbPointer小部件来控制ListView得滑动,切换absorbing为true得时候，ListView就不能滑动了。

 Column(
      children: [
        Container(
          width: double.infinity,
          height: 400,
          child: AbsorbPointer(
            absorbing: _absorbing,
            child: ListView.builder(itemBuilder: (context, index) {
              return Container(
                color: Colors.deepOrange[400],
                width: double.infinity,
                height: 50,
                alignment: Alignment.center,
                margin: EdgeInsets.only(left: 16, right: 16, top: 10),
                child: Text(index.toString()),
              );
            }),
          ),
        ),
        Container(
          alignment: Alignment.center,
          height: 50,
          child: ElevatedButton(
            onPressed: () {
              setState(() {
                _absorbing = !_absorbing;
                showToast("当前absorbing：$_absorbing");
              });
            },
            child: Text("切换absorbing"),
          ),
        )
      ],
    );

absorbpointer_2.gif

示例3

AbsorbPointer可以统一控制多个小部件，不用为每一个小部件进行设置。

Center(
      child: Column(
       children: [
         AbsorbPointer(
           absorbing: _absorbing,
           child: Column(
             children: [
               ElevatedButton(onPressed: () => showToast('点击了'), child: Text("按钮",style: TextStyle(color: Colors.white))),
               ElevatedButton(onPressed: () => showToast('点击了'), child: Text("按钮",style: TextStyle(color: Colors.white))),
               ElevatedButton(onPressed: () => showToast('点击了'), child: Text("按钮",style: TextStyle(color: Colors.white))),
               ElevatedButton(onPressed: () => showToast('点击了'), child: Text("按钮",style: TextStyle(color: Colors.white))),
             ],
           ),
         ),
         ElevatedButton(
           onPressed: () {
             setState(() {
               _absorbing = !_absorbing;
               showToast("当前absorbing：$_absorbing");
             });
           },
           child: Text("切换absorbing"),
         ),
       ],
      ),
    );

absorbpointer_3.gif

示例4 AbsorbPointer与IgnorePointer的区别

AbsorbPointer在absorbing为true时，自身有指针事件，而子部件没有指针事件;absorbing为false时,AbsorbPointer自身和子部件都有指针事件。

Center(
      child: Container(
        height: 200,
        width: 200,
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Listener(
              onPointerDown: (v) {
                showToast('点击了红色',position: ToastPosition.top);
              },
              child: Container(
                color: Colors.red,
              ),
            ),
            Listener(
              onPointerDown: (v) {
                showToast('点击了AbsorbPointer自身',position: ToastPosition.center);
              },
              child: AbsorbPointer(
                absorbing: false,
                child: Listener(
                  onPointerDown: (v) {
                    showToast('点击了AbsorbPointer的子部件',position: ToastPosition.bottom);
                  },
                  child: Container(
                    color: Colors.blue,
                    width: 100,
                    height: 100,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );

AbsorbPointer在absorbing为true时，效果如下:

absorbpointer_4.gif

AbsorbPointer在absorbing为false时，效果如下:

absorbpointer_5.gif

IgnorePointer在ignoring为true时，自身和子部件都没有指针事件，好像被直接穿透一样,指针事件向下面的部件传递;
在ignoring为false时,自身和子部件都有指针事件。

Center(
      child: Container(
        height: 200,
        width: 200,
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Listener(
              onPointerDown: (v) {
                showToast('点击了红色',position: ToastPosition.top);
              },
              child: Container(
                color: Colors.red,
              ),
            ),
            Listener(
              onPointerDown: (v) {
                showToast('点击了IgnorePointer自身',position: ToastPosition.center);
              },
              child: IgnorePointer(
                ignoring: false,
                child: Listener(
                  onPointerDown: (v) {
                    showToast('点击了IgnorePointer的子部件',position: ToastPosition.bottom);
                  },
                  child: Container(
                    color: Colors.blue,
                    width: 100,
                    height: 100,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );

IgnorePointer在ignoring为true时,效果如下:

absorbpointer_6.gif

IgnorePointer在ignoring为false时,效果如下:

absorbpointer_7.gif