Flutter 如何实现文本位于图片横幅下方不重叠且适配小屏幕布局

问题原因 #

你当前布局出现小屏重叠的核心原因是用了固定数值的定位逻辑：

• 文本的top偏移、height都写死了固定值，小屏设备上横幅高度被压缩后，文本的实际展示范围会超出Stack的可视区域，或是和下方内容重叠
• 外层SizedBox固定使用父组件最大高度作为约束，没有适配内容本身的高度

调整方案 #

如果需要文本完全在横幅下方不重叠，直接放弃Stack的绝对定位逻辑，改用Column垂直排列即可；如果要保留原设计里文本顶部少量压在横幅底部的效果，可以用负边距实现，同时移除所有写死的固定高度约束，适配不同屏幕尺寸。

修改后代码如下：

return SingleChildScrollView(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 横幅图片区域
      Image(
        image: AssetImage("asset/images/banner.jpg"),
        fit: BoxFit.fill,
        width: double.infinity,
      ),
      // 文本区域，需要少量压在横幅上就保留top负边距，不需要就删掉该参数
      Padding(
        padding: EdgeInsets.only(left: Left, top: -BannerHeight/4),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("Nominal",
                style: TextStyle(color: Colors.white)),
            Text("Rp. 1.000.000.000",
                style: TextStyle(color: Colors.white)),
            Text("Point 10.538",
                style: TextStyle(color: Colors.white))
          ],
        ),
      ),
      // 此处可继续放置其他页面内容
    ],
  ),
);

修改说明 #

• 移除了外层固定高度的SizedBox和Stack布局，改用Column垂直排列内容，天然不会出现元素重叠问题
• 图片宽度设为满屏，高度自适应图片比例，不需要手动设置BannerHeight硬约束
• 文本区域的偏移改用padding实现，不需要绝对定位，小屏设备会自动调整位置不会超出范围
• 如果不需要文本压在横幅上的效果，直接删除Padding的top: -BannerHeight/4参数即可，文本会完全在横幅下方正常展示

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