Flutter开发：如何将InkWell组件正确包裹在Card组件中

核心注意点：

• Card 本身属于 Material 类型组件，直接在其内部嵌套 InkWell 即可保留点击水波纹效果，无需额外嵌套 Material 组件
• 原代码中 InkWell 的子组件为 Expanded，由于你原有 Card 的 child 是 Stack 布局，Expanded 仅在 Flex（Row/Column）布局下生效，需要替换为 Positioned.fill 让图片撑满 Card 区域

修改后完整代码（保留原有Stack结构） #

如果你后续还要在 Stack 中添加角标、说明文本等其他层，可使用该版本：

card: Card(
  elevation: 4.0,
  child: Stack(
    fit: StackFit.loose,
    children: [
      InkWell(
        onTap: () => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (BuildContext context) => ImageScreen(
              url: '${_productosModel[index].image}' + '?alt=media',
            ),
          ),
        ),
        child: Positioned.fill(
          child: CachedNetworkImage(
            imageUrl: '${_productosModel[index].image}' + '?alt=media',
            fit: BoxFit.cover,
            placeholder: (_, __) {
              return Center(
                child: CupertinoActivityIndicator(
                  radius: 15,
                ),
              );
            },
          ),
        ),
      ),
      // 此处可继续添加Stack的其他子组件
    ],
  ),
)

精简版代码（无额外Stack子组件时使用） #

如果你的 Stack 没有其他子元素，可直接移除 Stack 简化代码：

card: Card(
  elevation: 4.0,
  child: InkWell(
    onTap: () => Navigator.push(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) => ImageScreen(
          url: '${_productosModel[index].image}' + '?alt=media',
        ),
      ),
    ),
    child: CachedNetworkImage(
      imageUrl: '${_productosModel[index].image}' + '?alt=media',
      fit: BoxFit.cover,
      placeholder: (_, __) {
        return Center(
          child: CupertinoActivityIndicator(
            radius: 15,
          ),
        );
      },
    ),
  ),
)

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