Flutter实现FittedBox宽度扩展且内部Row支持SpaceBetween布局

需求说明 #

基于Container构建的ListView中，每个列表项需要适配两种屏幕场景的布局效果：

• 大宽度屏幕场景：文本区域按spaceBetween规则实现两端对齐，标签与值分别靠左右两侧排布
  
• 小宽度屏幕场景：所有文本及字号作为整体等比缩放，保持内容比例一致，无溢出、无换行
  

问题根因分析 #

原有代码的逻辑矛盾来自布局约束的冲突：

1. FittedBox的缩放逻辑要求子组件具备自然固有宽度，才能在内容超出可用空间时按比例缩小；
2. Row的spaceBetween对齐规则要求子组件撑满父组件传递的最大宽度约束，才能将两端元素顶到边缘；
3. 单独使用IntrinsicWidth会强制子组件按内容最小宽度布局，导致宽屏场景下无法撑满可用宽度，两端对齐失效；去掉IntrinsicWidth时，FittedBox传递给子组件的宽度约束为无界值，spaceBetween因无明确宽度边界直接失效，两个文本会挤在一起。

实现方案 #

该需求完全可实现，不需要自定义渲染逻辑，通过LayoutBuilder+约束组合即可解决约束冲突，核心思路是给内容同时设置「最小宽度为可用区域宽度」和「宽度按内容自适应」的规则：

• 宽屏时内容固有宽度小于可用宽度，组件被最小宽度约束强制撑满，spaceBetween正常生效
• 窄屏时内容固有宽度大于可用宽度，组件按内容实际宽度布局，触发FittedBox的等比缩放逻辑

改造后代码 #

直接替换原有标题下方的内容主体部分即可，ItemDataText组件不需要做任何修改，保持原有的Row+spaceBetween结构：

// 替换原有的SizedBox+FittedBox+IntrinsicWidth结构
LayoutBuilder(
  builder: (context, constraints) {
    // 获取中间内容区域的可用最大宽度
    final double maxContentWidth = constraints.maxWidth;
    return FittedBox(
      fit: BoxFit.scaleDown,
      // 对齐方式设为左对齐，和标题样式保持一致
      alignment: Alignment.centerLeft,
      child: ConstrainedBox(
        // 给内容设置最小宽度约束，保证宽屏时撑满区域
        constraints: BoxConstraints(minWidth: maxContentWidth),
        child: IntrinsicWidth(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ItemDataText(type1, data1),
              ItemDataText(type2, data2),
              ItemDataText(type3, data3),
              ItemDataText(type4, data4),
              ItemDataText(type5, data5),
            ],
          ),
        ),
      ),
    );
  },
)

注意事项 #

• 不要给ItemDataText内部的Text组件设置硬编码固定宽度，内边距、行间距等固定尺寸会跟随文本整体等比缩放，保持视觉比例一致
• 如果需要调整缩放触发的阈值，可以修改BoxConstraints的minWidth参数，比如设置为maxContentWidth * 0.9即可在内容宽度达到可用宽度90%时提前触发缩放
• 标题组件ItemDataTitle放在LayoutBuilder外层即可，不会参与内容区域的缩放逻辑，保持固定字号

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