flutter 基本组件学习二 TapRegion 监听组件外部点击

216 阅读1分钟

效果:1 TapRegion 可以监听点击自己child外部的事件。

2 多个TapRegion可以通过绑定同一个groupId,来实现绑定,就是说点击任何一个TapRegion都属于内部点击,点击他们的合集之外才是点击外部。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class OutClickTestPage extends StatelessWidget {
  const OutClickTestPage({super.key});

  @override
  Widget build(BuildContext context) {


    return Material(
      color: Colors.yellow,
      child: Stack(
        alignment: Alignment.center,
        children: [
          TapRegion(
            groupId: Container,
            onTapInside: (event){
              //监听点击child的内部
              debugPrint("ccccc===onTapInside==${event.position}");
            },
            onTapOutside: (event){
              //监听点击child的外部
              debugPrint("cccccc=====onTapOutside==${event.position}");
            },
            child: GestureDetector(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
          ),
          Positioned(
            left: 0,
            top: 0,
            child: TapRegion(
                groupId: Container,
                child: Container(width: 100,height: 100,color: Colors.green,)
            ),
          )
        ],

      ),
    );
  }
}