如何将Flutter VitalWidget内的TextFormField与单位文本对齐到屏幕右侧

你可以通过Spacer组件自动填充行内剩余空间的特性实现需求，无需写死边距，适配所有屏幕尺寸，修改方案如下：

• 核心改动：在左侧生命体征类型Text与右侧输入框+单位的Row组件之间插入Spacer()，自动将右侧组推至屏幕右端
• 优化点：给单位Text增加左侧边距避免和输入框紧贴，外层Row明确设置占满父容器宽度

修改后的完整代码：

class VitalWidget extends StatelessWidget {
  VitalWidget({
    this.vitalType,
    this.unit,
    this.initialValue,
    Key key,
  }) : super(key: key);
  final String vitalType;
  final String unit;
  final String initialValue;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          // 确保Row占满父容器全部宽度
          mainAxisSize: MainAxisSize.max,
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 40),
              child: Text(
                vitalType,
                style: TextStyle(fontSize: 15),
              ),
            ),
            // 新增Spacer自动填充剩余空间
            const Spacer(),
            Row(
              children: [
                SizedBox(
                  width: 90,
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: TextFormField(
                      initialValue: initialValue,
                      textAlign: TextAlign.center,
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                      decoration: const InputDecoration(),
                    ),
                  ),
                ),
                // 给单位加左右边距优化UI
                Padding(
                  padding: const EdgeInsets.only(left: 8, right: 40),
                  child: Text(unit),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

可选适配方案 #

如果需要左右区域按固定比例分配空间，可以替换Spacer为Flexible组件指定flex权重，示例：

// 左侧占2份宽度，右侧占1份宽度
Flexible(flex:2, child: 左侧Text组件),
Flexible(flex:1, child: 右侧输入框+单位Row),

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