Flutter中如何让过宽图片自适应可用空间避免布局溢出

• 硬编码的width: 348是固定逻辑像素值，不同设备的屏幕尺寸、分辨率、父容器边距差异极大，固定值无法匹配所有设备的可用布局空间：小屏设备上该值超过可用宽度就会触发布局溢出，大屏设备上又无法撑满预留空间。
• Row组件水平方向默认传递无界宽度约束，直接在Row中放置设置了BoxFit.fitWidth的图片时，图片会优先按自身原始像素宽度渲染，这也是去掉固定宽度后依然会溢出的核心原因。

直接用Expanded组件包裹图片即可，不需要硬编码任何宽度值，可自动适配全尺寸设备：

Widget build(BuildContext context) {
    return Stack(
      children: [
        Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(
                  left: 12.0, top: 5.0, bottom: 16.0, right: 0.0),
              child: Row(
                children: [
                  Expanded(
                    child: Image.asset(
                      'assets/images/my_image.png',
                      fit: BoxFit.fitWidth,
                      // 移除硬编码的width属性
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }

实现逻辑：Expanded会自动占满Row水平方向的剩余可用空间，图片拿到明确的宽度约束后，会按照BoxFit.fitWidth的规则宽度撑满可用空间，高度按图片原始比例自动缩放，无论什么尺寸的设备，都会自动适配当前布局给到的可用宽度，不会出现溢出或者留空问题。

如果你需要自定义图片占可用空间的比例（比如占可用宽度的80%），或者需要基于可用宽度做其他尺寸计算，可以用LayoutBuilder拿到当前组件的实时布局约束：

Padding(
  padding: EdgeInsets.only(left: 12.0, top: 5.0, bottom: 16.0, right: 0.0),
  child: LayoutBuilder(
    builder: (context, constraints) {
      // 可用宽度直接取布局约束的maxWidth，不需要硬编码
      double imageWidth = constraints.maxWidth * 0.9; // 示例：设置为可用宽度的90%
      return Image.asset(
        'assets/images/my_image.png',
        fit: BoxFit.fitWidth,
        width: imageWidth,
      );
    },
  ),
)

• 不要直接用MediaQuery.of(context).size.width设置图片宽度，该值是设备整个屏幕的宽度，没有计算当前组件的父容器边距、同级组件占用的空间，很容易出现尺寸计算错误。
• 如果需要固定图片宽高比避免变形，可以在外层嵌套AspectRatio组件指定宽高比，配合上述适配方案使用效果更稳定。
• 如果你的Stack、Column没有其他子组件，可以直接移除冗余嵌套，减少不必要的布局性能开销。

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