Обнаружение жестов 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: () { },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

Это нормальное ожидаемое поведение InkWell, так как большую часть времени вы хотите использовать его функцию касания для каждого виджета в своем дереве. Итак, что вы можете сделать, это определить стек и установить кнопку в абсолютной оси Z над InkWell:

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

Верхний код приведет к разделению виджетов: