Question

在处理应用程序时，我们有一个实例，我们希望卡片具有墨水池以及卡片上的按钮（也带有墨水池）。但是，我无法确定一种分离手势的方法，从而仅调用用户点击下方的墨池。就像今天一样，水龙头似乎“渗漏”到了下一个墨水池，从而调用了两个飞溅效果。这是不受欢迎的行为，应用程序似乎选择的是卡而不是卡上的可调用项（请注意：实际应用程序有很大不同，但存在相同的问题）。我已经在一个简单的应用程序中重现了这一点，以演示用户按下卡右下角的按钮时的渗色。我缺少某种可以阻止这种行为的东西吗？谢谢

  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行为，因为在大多数情况下，您想对树中的每个小部件使用它的点击功能。因此，您可以定义一个堆栈，并在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");
                                                },
                                            ),
                                        ],
                                    ),
                                ],
                            ),
                        ],
                    ),
                ),
            ),
        ),
    );
}

上面的代码将导致单独的小部件：

颤动重叠的笔势手势检测

1 个答案: