Flutter中如何在矩形Card末尾添加不同颜色的方形Card

核心思路 #

通过Stack组件叠加两个Card，利用Positioned控制方形Card的位置，让它部分覆盖在主矩形Card的右侧，这种布局逻辑比在Card的trailing里嵌套Card更合理。

完整代码示例 #

Stack(
  alignment: Alignment.centerRight,
  children: [
    // 主矩形Card
    Card(
      color: Colors.grey[200],
      margin: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
      child: const SizedBox(
        height: 80,
        width: double.infinity,
        child: Padding(
          padding: EdgeInsets.only(right: 40), // 避免主内容被方形Card遮挡
          child: Align(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 16),
              child: Text("主Card展示内容"),
            ),
          ),
        ),
      ),
    ),
    // 右侧方形Card
    Positioned(
      right: 12, // 调整此值控制重叠程度
      child: Card(
        color: Colors.blueAccent,
        elevation: 4,
        child: const SizedBox(
          height: 60,
          width: 60,
          child: Icon(Icons.check_circle, color: Colors.white, size: 32),
        ),
      ),
    ),
  ],
)

代码说明 #

• Stack作为容器将两个Card叠加，alignment: Alignment.centerRight确保方形Card在主Card右侧居中
• 主Card设置margin保证和屏幕边缘的间距，通过padding: EdgeInsets.only(right:40)给方形Card留出空间，防止主内容被遮挡
• Positioned的right属性控制方形Card与屏幕右侧的距离，数值越小，重叠区域越大
• 方形Card设置固定宽高，通过color和elevation与主Card区分，增强视觉层次

替代方案（Row+Transform） #

如果更习惯线性布局，也可以用Row结合Transform.translate实现重叠：

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Expanded(
        child: Card(
          color: Colors.grey[200],
          child: const SizedBox(
            height: 80,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 16),
                child: Text("主Card展示内容"),
              ),
            ),
          ),
        ),
      ),
      Transform.translate(
        offset: const Offset(-20, 0), // 向左偏移实现重叠
        child: Card(
          color: Colors.blueAccent,
          elevation: 4,
          child: const SizedBox(
            height: 60,
            width: 60,
            child: Icon(Icons.check_circle, color: Colors.white, size: 32),
          ),
        ),
      ),
    ],
  ),
)

内容的提问来源于stack exchange，提问作者David L Joseph