Question

假设我有这个小部件：

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

我只想在点击Card时禁用（防止显示）在InkWell / RaisedButton上的波纹效果，而在点击Card时显示它（即按钮之外）。有什么办法可以达到这种效果？

我认为一般性的问题可能是：当点击内部的InkWell时如何防止对周围InkWell的波纹影响？如果您查看源代码，则可以看到{{1} }有RaisedButton和Material小部件会引起波动。

Here is the full sample code。

Answer 1

如果您想快速攻克，请检查一下：

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

Answer 2

尝试https://dartpad.dev/7ff7f5756d93db2d4ed6a4b9a6d75208。我用hack封装了要与父项InkWell包围的小部件InkWell

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

轻敲内部的InkWell时如何防止对周围InkWell的波纹影响

3 个答案: