Flutter设置UI中如何将三项重量数据放在同一行且不发生位移

核心原理是利用Flutter的Row+Expanded组件做自适应宽度分配，替代手动拼接空格的方案，SettingsTile的title和subtitle参数支持传入任意Widget，无需限制为字符串。

修改后的代码如下：

SettingsSection(
  title: 'Weight',
  tiles: [
    SettingsTile(
      leading: FaIcon(FontAwesomeIcons.weightHanging),
      // 标题行用Row均匀分配三个标签的宽度
      title: Row(
        children: const [
          Expanded(child: Text('Gross')),
          Expanded(child: Text('Packaging')),
          Expanded(child: Text('Net')),
        ],
      ),
      // 数值行同样用Row分配宽度，保证和标签严格对齐
      subtitle: Row(
        children: const [
          Expanded(
            child: Text(
              '490000',
              style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold, color: Colors.black),
            ),
          ),
          Expanded(
            child: Text(
              '19000',
              style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold, color: Colors.black),
            ),
          ),
          Expanded(
            child: Text(
              '30000',
              style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold, color: Colors.black),
            ),
          ),
        ],
      ),
    ),
  ],
)

可选优化点 #

• 可以调整Expanded的flex参数给不同项分配不同宽度，比如包装重量标签更长，可以给对应项设flex:2，另外两项设flex:1，适配标签长度差异
• 文本对齐方式可以通过Text的textAlign参数调整，比如需要数值居中就添加textAlign: TextAlign.center属性
• 数值动态更新时也不会出现错位，每个区块的宽度为固定比例分配，和内容长度无关

效果参考：

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