如何在点击内部InkWell时防止对周围InkWell产生涟漪效果

Question

假设我有这个小部件：

Card(
  child: InkWell(
    onTap: () {},
    child: Padding(
      padding: const EdgeInsets.all(28.0),
      child: RaisedButton(
        child: Text('Test'),
        onPressed: () {},
      ),
    ),
  ),
),

我希望仅在点击RaisedButton时禁用（不显示）Card/InkWell上的涟漪效果，但在点击Card（即按钮外部）时显示它。有没有办法实现这种效果？

我认为一般化的问题可以是：“如何防止在内部InkWell上点击时周围的InkWell产生涟漪效果？”如果您查看源代码，则可以看到RaisedButton具有Material和InkWell小部件，这些小部件会导致涟漪。 这里是完整的示例代码。

- Dominik Roszkowski

---

@Eugene 当点击卡片本身时，我想要显示涟漪效果。 - Dominik Roszkowski

你尝试过使用IgnorePointer吗？ - Tokenyet

@Tokenyet，您建议如何使用IgnorePointer？ - Dominik Roszkowski

Answer 1

如果你想要快速的解决方案，可以尝试以下方法：

Container(
  width: 180,
  height: 120,
  child: Stack(
    children: <Widget>[
      Card(
        child: InkWell(
          onTap: () {},
        ),
      ),
      Center(
        child: RaisedButton(
          child: Text('Test'),
          onPressed: () {},
        ),
      )
    ],
  ),
)

- imaN NeoFighT

---

这在这种情况下有效，因此解决了问题，但坦白地说，我的小部件树更加复杂，因此可能有人有更强大的解决方案。无论如何，感谢聪明的技巧。 - Dominik Roszkowski

Dominik Roszkowski，你找到了更好的解决方案吗？我的小部件树也很复杂。 - Ilya Maximencko

这个解决方案对我来说完全没有问题。非常感谢。 - Reza Esfandiari

Answer 2

请试用此代码 https://dartpad.dev/7ff7f5756d93db2d4ed6a4b9a6d75208。我使用hack方法来包裹你想要在父组件InkWell中围绕的小部件InkWell。

- Ilya Maximencko

Answer 3

您可以在 onHighlightChanged 方法中处理逻辑；

Color _color;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: Card(
        child: InkWell(
          splashColor: _color,
          highlightColor: _color,
          onTap: () {},
          child: Padding(
            padding: const EdgeInsets.all(28.0),
            child: RaisedButton(
              onHighlightChanged: (value) {
                if (value) {
                  setState(() => _color = Colors.white);
                } else {
                  Timer(Duration(milliseconds: 200), () {
                    setState(() => _color = null);
                  });
                }
              },
              child: Text('Test'),
              onPressed: () {},
            ),
          ),
        ),
      ),
    ),
  );
}

- CopsOnRoad

---

过于复杂并且在边缘处有瑕疵。 - user10539074

@Eugene 哈哈，可能是这样，但已经有人使用 Stack 发布了，所以我采用了不同的方法，请查看更新后的截图，边缘问题已解决。 - CopsOnRoad