Flutter InkWell 小部件未通过容器的渐变和颜色显示

Question

编辑：我尝试将 Container 包装在 Material 小部件中并将颜色属性移动到 Material 小部件，但我正在放置一个水平 ListView, 中的一堆 ResourceCards，因此 Material 小部件的颜色似乎只填充了 ResourceCard 周围的 space。

我在 Flutter 中创建了自己的小部件 ResourceCard。我用 GestureDetector 包裹它来检测点击，但我想显示某种反馈或效果来通知用户它被点击了。我决定用 InkWell 小部件替换 GestureDetector，但我看不到容器的线性渐变和颜色的飞溅效果，所以我只是将其恢复为 GestureDetector .我看过其他具有潜在变通方法的帖子，但其中 none 可以使用线性渐变和颜色。这是 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',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

最简单的解决方案是使用 Material 小部件作为 InkWell 的父级并将其 color 设置为透明。 InkWell 必须仅在卡上设置（在您的示例中，GestureDetector 设置在整列上）。为了符合确切的形状，InkWell 与您的卡（容器）

相同 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,
                ),
              ),
            ),
          ),
        ),
        ...

Flutter InkWell 小部件未通过容器的渐变和颜色显示

Flutter InkWell widget not showing through a container's gradient and color

containers

widget

gesturedetector

dart

flutter