Flutter布局问题：如何让容器内的分类名称在不同屏幕尺寸下始终居底

你当前用Stack+固定margin的方式定位文本容器，这种固定值的定位在不同屏幕尺寸下很容易错位。下面给你两种靠谱的解决方法：

方法一：用Positioned固定文本容器在底部 #

在Stack里把文本容器用Positioned包裹，强制它对齐到容器底部，这样不管父容器高度怎么变，文本栏都会牢牢贴在底部：

class CategoryItem extends StatelessWidget {
  final Category category;
  const CategoryItem({super.key, required this.category});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 20),
      decoration: BoxDecoration(
        color: category.backColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10), 
          topRight: Radius.circular(10)
        )
      ),
      child: Stack(
        children: [
          Image.asset(
            category.image,
            height: 80,
            width: 80,
            alignment: Alignment.topCenter,
          ),
          // 用Positioned替代margin，固定在底部
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              padding: EdgeInsets.all(10),
              color: Colors.white,
              child: Text(category.title)
            ),
          )
        ]
      ),
    );
  }
}

方法二：改用Column布局（更推荐） #

因为你的元素是垂直排列的，用Column比Stack更符合布局逻辑，直接把文本容器放在布局末尾，就能确保它始终贴在底部：

class CategoryItem extends StatelessWidget {
  final Category category;
  const CategoryItem({super.key, required this.category});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: category.backColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10), 
          topRight: Radius.circular(10)
        )
      ),
      child: Column(
        children: [
          // 顶部图片，保留原有的top padding
          Padding(
            padding: EdgeInsets.only(top: 20),
            child: Image.asset(
              category.image,
              height: 80,
              width: 80,
            ),
          ),
          // 文本容器自动贴在底部
          Container(
            padding: EdgeInsets.all(10),
            width: double.infinity,
            color: Colors.white,
            child: Text(category.title)
          )
        ],
      ),
    );
  }
}

两种方法都能解决不同屏幕下文本位置错位的问题，方法二更符合Flutter的布局规范，后续维护也更简单。

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