Flutter中Stack内InkWell Splash Effect无法覆盖Image问题求助

我有一个Stack组件，期望InkWell的Splash Effect能显示在Stack中的Image上方，但不覆盖右上角的IconButton；实际效果是水波纹在IconButton下方，且没有按预期覆盖Image。以下是我的Stack代码：

Stack(
    alignment: Alignment.bottomRight,
    children: [
      Container(
        constraints: const BoxConstraints(minHeight: 180.0),
        child: Material(
          color: const Color(0xFFFCECDE),
          borderRadius: const BorderRadius.all(Radius.circular(10.0)),
          child: InkWell(
            onTap: onTap,
            borderRadius: const BorderRadius.all(Radius.circular(10.0)),
            splashColor: Colors.grey,
            child: Ink(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(10.0),
                    child: Image.asset(
                      urlImage,
                      height: 102.0,
                      fit: BoxFit.cover,
                    ),
                  ),
                  Padding(
                    padding:
                        const EdgeInsets.fromLTRB(4.0, 16.0, 4.0, 24.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          title,
                          style: const TextStyle(
                            fontSize: 14.0,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        const SizedBox(height: 4.0),
                        Text(
                          price,
                          style: GoogleFonts.lexend(
                            textStyle: const TextStyle(
                              fontSize: 14.0,
                              fontWeight: FontWeight.w400,
                              color: Color(0xFFB71C1C),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          height: 24.0,
          width: 24.0,
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            color: Color(0xFF921616),
          ),
          child: const Center(
            child: Icon(
              Icons.add,
              color: Colors.white,
              size: 15.0,
            ),
          ),
        ),
      ),
    ],
  );

解决方案 #

问题核心在于普通Image组件是独立的绘制层，会遮挡InkWell的水波纹，同时要确保IconButton保持在最上层不被水波纹覆盖。可以通过以下修改解决：

1. 用Ink.image替代Image.asset #

Ink.image会将图像绘制在Ink的上下文中，这样水波纹就能显示在图像上方。同时结合ClipRRect实现圆角效果。

2. 保持IconButton的层级 #

当前Stack中IconButton是最后一个子组件，默认层级最高，无需调整，水波纹不会覆盖它。

修改后的代码：

Stack(
  alignment: Alignment.bottomRight,
  children: [
    Container(
      constraints: const BoxConstraints(minHeight: 180.0),
      child: Material(
        color: const Color(0xFFFCECDE),
        borderRadius: const BorderRadius.all(Radius.circular(10.0)),
        child: InkWell(
          onTap: onTap,
          borderRadius: const BorderRadius.all(Radius.circular(10.0)),
          splashColor: Colors.grey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                // 替换为Ink.image
                child: Ink.image(
                  image: AssetImage(urlImage),
                  height: 102.0,
                  fit: BoxFit.cover,
                ),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(4.0, 16.0, 4.0, 24.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: const TextStyle(
                        fontSize: 14.0,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    const SizedBox(height: 4.0),
                    Text(
                      price,
                      style: GoogleFonts.lexend(
                        textStyle: const TextStyle(
                          fontSize: 14.0,
                          fontWeight: FontWeight.w400,
                          color: Color(0xFFB71C1C),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 24.0,
        width: 24.0,
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          color: Color(0xFF921616),
        ),
        child: const Center(
          child: Icon(
            Icons.add,
            color: Colors.white,
            size: 15.0,
          ),
        ),
      ),
    ),
  ],
);

关键说明 #

• Ink.image必须放在Material组件内部，才能继承其墨水效果上下文。
• 移除了原来嵌套的Ink组件，因为InkWell已经提供了墨水效果的载体，Ink.image直接作为InkWell的子组件即可。

内容的提问来源于stack exchange，提问作者Lucky Ugwu