Flutter开发：如何让图片像附件示例一样贴合容器右下角？

你当前代码里图片无法贴合右下角的核心原因是Container设置了right和bottom方向的内边距，同时Column布局下的Row仅能实现水平右对齐，无法突破内边距限制贴紧容器边缘。可以通过以下方式修改：

解决思路 #

使用Stack + Positioned组合实现精准定位：Stack允许子组件层叠布局，Positioned可直接指定组件相对于父容器的位置，让图片完全贴紧右下角。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class MenuCard extends StatelessWidget {
  const MenuCard({
    Key? key,
    required this.cardTitle,
    required this.pageDestination,
    required this.imageSource,
    required this.cardColor,
  }) : super(key: key);

  final String cardTitle;
  final Widget pageDestination;
  final String imageSource;
  final Color cardColor;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => pageDestination),
      ),
      child: Padding(
        padding: const EdgeInsets.only(right: 10),
        child: Container(
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            color: cardColor,
          ),
          child: Stack(
            children: [
              // 标题区域：保留原左上间距
              Padding(
                padding: const EdgeInsets.only(left: 20, top: 50),
                child: Text(
                  cardTitle,
                  style: GoogleFonts.quicksand(
                    textStyle: const TextStyle(
                      fontSize: 25,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
              // 图片区域：定位到右下角
              Positioned(
                bottom: 0,
                right: 0,
                child: Image.asset(
                  imageSource,
                  width: 75,
                  height: 75,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键改动说明 #

• 移除Container的right和bottom方向padding，消除图片定位的空间限制
• 用Stack替换原Column，实现组件层叠布局
• 通过Positioned(bottom:0, right:0)将图片精准固定在容器右下角
• 给标题单独添加左上padding，保留原有排版效果

（参考图说明：彩色圆角卡片内，标题位于左上区域，图片完全紧贴卡片右下角边缘，无额外间距）

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