Flutter的InkWell小部件不能显示在一个容器的渐变和颜色之上

Question

编辑：我已经尝试将Container包装在Material小部件中，并将颜色属性移动到Material小部件中，但是我在一个水平的ListView中放置了很多ResourceCards，因此来自Material小部件的颜色似乎只填充ResourceCard周围的空间。

我在Flutter中创建了自己的小部件ResourceCard。 我使用GestureDetector对其进行了包装以检测点击，但是我想显示某种反馈或效果以通知用户它已被点击。我决定使用InkWell小部件替换GestureDetector，但是我没有通过容器的线性渐变和颜色看到涟漪效果，所以我将其恢复回GestureDetector。我看到其他帖子中有一些潜在的解决办法，但是没有一种适用于线性渐变和颜色。这是其中一个ResourceCard小部件的外观：https://imgur.com/dg3fu9e。以下是该小部件的代码：

class ResourceCard extends StatelessWidget {
  ResourceCard({
    @required this.colour,
    @required this.margin,
    @required this.cardText,
    this.onPress,
    @required this.cardCaption,
    @required this.paddingText,
  });

  final Color colour;
  final String cardText;
  final Function onPress;
  final EdgeInsets margin;
  final String cardCaption;
  final EdgeInsets paddingText;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Column(
        children: <Widget>[
          Container(
            width: 75.0,
            height: 75.0,
            child: Center(
              child: Text(
                cardText,
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Circular STD',
                  fontWeight: FontWeight.w900,
                  fontSize: 20.0,
                ),
              ),
            ),
            margin: margin,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [colour, Colors.blue],
              ),
              color: colour,
              borderRadius: BorderRadius.circular(15.0),
              boxShadow: [
                BoxShadow(
                  color: Color.fromRGBO(0, 0, 0, 0.5),
                  blurRadius: 10.0,
                  spreadRadius: 1.0,
                )
              ],
            ),
          ),
          Padding(
            padding: paddingText,
            child: Text(
              cardCaption,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white70,
                fontWeight: FontWeight.w300,
                fontSize: 10.0,
                fontFamily: 'Circular STD',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

- Rohan

---

只是为了确认：您想要从InkWell中获取的溅射效果覆盖整张牌，而不仅仅是带有渐变的圆角容器吗？ - Manuel

请查看 https://api.flutter.dev/flutter/material/InkWell-class.html 并检查“故障排除”部分。 - pskink

@Manuel 我希望InkWell闪屏只出现在卡片上（圆形容器内有几个字母），而不是下面的文本。本质上，我希望它像FlatButton一样运作。 - Rohan

Answer 1

最简单的解决方法是将 InkWell 的父控件设置为 Material，并将其 color 设为透明。在卡片上必须设置 InkWell（在您的示例中 GestureDetector 设置在整个列上）。为了适应确切的形状，InkWell 获得与您的卡片（Container）相同的 borderRadius。

这里是您构建方法的解决方案，我将 InkWell 和 Materal 小部件放置在 Center 小部件的父级中。

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Container(
        width: 75.0,
        height: 75.0,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onPress,
            borderRadius: BorderRadius.circular(15.0),
            splashColor: Colors.grey[500],
            child: Center(
              child: Text(
                cardText,
                style: TextStyle(
                  color: Colors.white,
                  fontFamily: 'Circular STD',
                  fontWeight: FontWeight.w900,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ),
        ...

- Manuel

---

如果我在容器上加入装饰，它对我没有作用。 - Moralde-Sama

@Moralde-Sama用一个装饰参数包装InkWell和Ink小部件。 - Ittai Barkai

Answer 2

只需在Material类上设置所需的背景颜色即可：

Material(
  color: Colors.grey.shade200, // background color
  child: InkWell(
    onTap: () {},
    splashColor: Colors.grey.shade300, // splash color
    child: Container(
        // content
      ),
  ),
);

- Rens