Flutter Overlapped InkWells 手势检测

Question

在处理应用程序时，我们有一个实例，我们希望卡片上有墨水池以及卡片上的按钮（也有墨水池）。但是，我一直无法确定一种方法来分离手势，以便只调用用户点击下的墨水池。就像今天一样，点击 'bleeds through' 到下一个墨水瓶似乎会调用两种飞溅效果。这是不受欢迎的行为，应用程序似乎正在选择卡片而不是卡片上的可调用项（注意：实际应用程序有很大不同，但存在相同的问题）。我在一个简单的应用程序中重现了这一点，以演示当用户按下卡片右下角的按钮时的渗色。我缺少什么可以防止这种行为吗？谢谢

  class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Card(
        color: Colors.blue,
        child: InkWell(
          onTap: () { },
          child: Container(
            height: 150.0,
            child: Align(
              alignment: Alignment.bottomRight,
              child: RaisedButton(
                color: Colors.red,
                onPressed: () { },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

这是正常的预期 InkWell 行为，因为在大多数情况下，您希望对其树中的每个小部件使用点击功能。所以你可以做的是定义一个 Stack 并在 InkWell 上方的 z 轴绝对值中设置按钮：

Widget build(BuildContext context) {
    return new Scaffold(
        body: Center(
        child: Card(
            color: Colors.blue,
            child: Stack(
            children: <Widget>[
                InkWell(
                    onTap: () {
                        print("inkwell");
                    },
                    child: Container(
                        height: 150.0,
                    ),
                ),
                RaisedButton(
                    color: Colors.red,
                    onPressed: () {
                        print("button");
                    },
                ),
            ],
            ),
        ),
        ),
    );
}

如果您想再次设置右下角的按钮，您可以在其周围设置行和列并指定其对齐方式：

@override
Widget build(BuildContext context) {
    return new Scaffold(
        body: Center(
            child: Container(
                height: 150.0,
                child: Card(
                color: Colors.blue,
                    child: Stack(
                        children: <Widget>[
                            InkWell(
                                onTap: () {
                                    print("inkwell");
                                },
                                child: Container(
                                    height: 150.0,
                                ),
                            ),
                            Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: <Widget>[
                                    Column(
                                        mainAxisAlignment: MainAxisAlignment.end,
                                        children: <Widget>[
                                        RaisedButton(
                                            color: Colors.red,
                                                onPressed: () {
                                                    print("button");
                                                },
                                            ),
                                        ],
                                    ),
                                ],
                            ),
                        ],
                    ),
                ),
            ),
        ),
    );
}

上面的代码会产生分离的小部件：

Flutter Overlapped InkWells 手势检测

Flutter Overlapped InkWells Gesture Detection

detection

gesture

dart

flutter