Flutter中Column内Row项TextField对齐问题求快速解决方案

我搜索了相关内容但未找到能解决问题的方案。尝试用padRight(20)实现Column组件内自定义_Row项中TextField的对齐，但效果不佳（TextField未对齐）。这些TextField长度相同，我希望它们能对齐，且不想使用GridView，求快速修复方法，我的代码如下：

Material(
      child: Padding(
        padding: EdgeInsets.only(left: 10.w),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _Row(
                text: 'Project Name'.tr,
                controller: TextEditingController(text: con.name)),
            _Row(
                text: 'Project Location'.tr,
                controller: TextEditingController(text: con.location)),
            _Row(
                text: 'Description'.tr,
                controller: TextEditingController(text: con.description)),
            _Row(
                text: 'Organization'.tr,
                controller: TextEditingController(text: con.organization)),
            _Row(
                text: 'Android Language'.tr,
                controller: TextEditingController(text: con.androidLanguage)),
            _Row(
                text: 'iOS Language'.tr,
                controller: TextEditingController(text: con.iOSLanguage)),
            _Row(
                text: 'Platforms'.tr,
                controller: TextEditingController(text: con.platforms)),
            CheckboxListTile(
              title: Text('Create Project Offline'.tr),
              tristate: true,
              value: con.offLineValue,
              onChanged: con.offLineChanged,
            ),
          ],
        ),
      ),
    );

class _Row extends StatelessWidget {
  const _Row({
    super.key,
    required this.text,
    required this.controller,
  });

  final String text;
  final TextEditingController controller;

  @override
  Widget build(BuildContext context) => Row(
        children: [
          Flexible(child: Text(text.trim().padRight(25))),
          Flexible(
            child: SizedBox(
              width: 100.w,
              child: TextField(
                controller: controller,
                decoration: const InputDecoration(
                  contentPadding: EdgeInsets.fromLTRB(6, 6, 6, 6),
                  fillColor: Colors.grey,
                  isCollapsed: true,
                  filled: true,
                  border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.grey),
                  ),
                ),
              ),
            ),
          ),
        ],
      );
}

padRight无法实现对齐的核心原因是不同字符的宽度存在差异（比如中英文、不同字母的宽度不一致），单纯通过补空格无法保证左侧文本区域宽度统一。以下两种快速修复方法可解决问题：

方法1：给左侧文本设置固定宽度 #

修改_Row组件的build方法，将左侧的Flexible替换为固定宽度的容器，确保所有行的左侧文本区域宽度一致：

@override
Widget build(BuildContext context) => Row(
      children: [
        // 根据UI需求调整宽度值，这里示例用150.w
        SizedBox(
          width: 150.w,
          child: Text(text.trim(), textAlign: TextAlign.left),
        ),
        Flexible(
          child: SizedBox(
            width: 100.w,
            child: TextField(
              controller: controller,
              decoration: const InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(6, 6, 6, 6),
                fillColor: Colors.grey,
                isCollapsed: true,
                filled: true,
                border: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey),
                ),
              ),
            ),
          ),
        ),
      ],
    );

方法2：用Expanded按比例分配空间 #

若不想固定宽度，可通过两个Expanded设置flex值，让左侧文本和右侧TextField按比例占据空间，适配不同屏幕尺寸：

@override
Widget build(BuildContext context) => Row(
      children: [
        Expanded(
          flex: 2, // 左侧占2份空间，可按需调整比例
          child: Text(text.trim()),
        ),
        Expanded(
          flex: 3, // 右侧占3份空间，可按需调整比例
          child: TextField(
            controller: controller,
            decoration: const InputDecoration(
              contentPadding: EdgeInsets.fromLTRB(6, 6, 6, 6),
              fillColor: Colors.grey,
              isCollapsed: true,
              filled: true,
              border: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
            ),
          ),
        ),
      ],
    );

两种方法均可解决TextField对齐问题：方法1适合需要精确控制左侧宽度的场景，方法2更适配不同屏幕，灵活度更高，可根据你的UI需求选择。

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