Flutter中如何让Image组件在Card组件外部重叠显示

要让图片超出Card显示，核心是用Stack布局将Card和图片分层——原代码把图片放在Card内部Row中，再加上Card的clipBehavior: Clip.antiAlias会裁剪超出边界的内容，自然无法实现重叠效果。具体修改方式如下：

1. 用Stack包裹Card和图片组件，让图片能独立定位在Card外侧
2. 移除Card的clipBehavior: Clip.antiAlias（若无需裁剪Card内部内容）
3. 借助Positioned组件控制图片位置，使其部分区域超出Card范围

修改后的完整代码：

Stack(
  alignment: Alignment.centerRight, // 可根据需求调整图片对齐方向
  children: [
    Card(
      margin: EdgeInsets.zero,
      color: Theme.of(context).colorScheme.primary,
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: SizedBox(
        height: 70, // 和原代码保持一致的Card高度
        child: Row(
          children: [
            Container(
              alignment: Alignment.bottomLeft,
              margin: const EdgeInsets.all(12),
              child: Text(
                "This is a text widget.",
                style: Theme.of(context).textTheme.bodyText1,
              ),
            ),
          ],
        ),
      ),
    ),
    // 图片移至Stack上层，通过Positioned控制超出位置
    Positioned(
      right: -20, // 向右偏移20，让部分图片露出Card外侧，数值可按需调整
      child: Image.asset(
        'images/picture1.png',
        scale: 5,
      ),
    ),
  ],
)

关键细节说明 #

• Stack支持子组件重叠，上层组件会覆盖下层的Card
• Positioned的right设为负数，是让图片突破Card的右边界，可根据图片尺寸调整偏移量
• 给Card套SizedBox固定高度，保证布局稳定性，和原代码的高度逻辑匹配

内容的提问来源于stack exchange，提问作者richard.online