Flutter实现8:1比例双图无重叠叠加布局的Widget方案咨询

问题背景 #

已实现单图逐像素适配功能，此前尝试通过Stack组件实现双图排布时，出现上层图片部分重叠的问题，当前需求为两张图片严格按8:1比例纵向排布。

效果参考 #

• 预期效果：
  
• 当前异常效果：
  

原有实现代码 #

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
        backgroundColor: Colors.deepOrangeAccent,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
                flex: 8,
                child: Image.asset(
                    fit: BoxFit.fill, "images/someimage1.png")),
            Expanded(
                flex: 1,
                child:
                    Image.asset(fit: BoxFit.fitWidth, "images/someimage2.png")),
          ],
        ),
     ),
  );
}

问题原因 #

原有Column + Expanded按flex分配空间的思路本身是正确的，出现重叠/比例异常的核心原因有两点：

• 两张图片的缩放模式不统一：上方图片用BoxFit.fill会强制拉伸填满分配空间，下方图片用BoxFit.fitWidth会保留原始宽高比缩放，当下方图片原始高度超过分配的1份空间高度时，就会溢出到上方区域造成重叠
• 没有对超出布局边界的图片内容做裁剪，也没有配置对齐规则，图片缩放时容易出现偏移

修正代码 #

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.deepOrangeAccent,
      // 增加安全区避免系统状态栏、底部导航栏遮挡布局
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              flex: 8,
              child: Image.asset(
                // 改用BoxFit.cover，填满空间的同时避免图片非必要拉伸变形
                fit: BoxFit.cover,
                "images/someimage1.png"
              ),
            ),
            // 可选：加2px间隔避免两张图视觉粘连，不需要可删除
            const SizedBox(height: 2),
            Expanded(
              flex: 1,
              child: ClipRect(
                // 强制裁剪超出1份高度空间的图片内容，彻底避免溢出重叠
                child: Align(
                  alignment: Alignment.topCenter,
                  heightFactor: 1,
                  child: Image.asset(
                    fit: BoxFit.fitWidth,
                    "images/someimage2.png"
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

可选固定比例方案 #

如果不需要布局随屏幕高度自适应拉伸，想要严格固定8:1的比例不受设备尺寸影响，可以用AspectRatio组件包裹整个图片组，固定整体宽高比即可，示例写法：

Center(
  child: AspectRatio(
    aspectRatio: 对应整体宽高比, // 结合两张图的实际像素尺寸计算
    child: Column(
      children: [
        Expanded(flex:8, child: Image.asset("images/someimage1.png", fit: BoxFit.cover)),
        Expanded(flex:1, child: Image.asset("images/someimage2.png", fit: BoxFit.fitWidth)),
      ],
    ),
  ),
)

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