dart - Flutter 重叠 InkWells 手势检测

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: () { },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

标签： dartfluttergesturedetection

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");
                    },
                ),
            ],
            ),
        ),
        ),
    );
}

如果你想再次设置右下角的按钮，你可以在它周围设置一个 Row 和 Colum 并指定它的对齐方式：

@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");
                                                },
                                            ),
                                        ],
                                    ),
                                ],
                            ),
                        ],
                    ),
                ),
            ),
        ),
    );
}

上面的代码将导致分离的小部件：