对齐列小部件中列出的行项目

Question

我已经搜索过，但没有找到完全解决我的问题的问题/答案。 作为我自己的解决方案，这与我使用

padRight(20)

得到的结果一样接近：

TextField()

小部件的长度相同，我希望它们对齐，但我对于如何轻松做到这一点却一无所知！ 代码如下：

  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,
                  //                labelText: 'Your Email',
                  //                floatingLabelBehavior: FloatingLabelBehavior.never,
                  border: OutlineInputBorder(
                    //                  borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide(color: Colors.grey),
                  ),
                ),
              ),
            ),
          ),
        ],
      );
}

我希望

padRight()

能够解决问题，但我不想使用

GridView()

。 必须有一个快速解决方案。

Answer 1

您选择了错误的小部件结构，我建议的是一排两列。

如果您愿意，一列用于文本，另一列用于文本字段 您可以调整该结构。

问题中的结构可以填充，但需要每个 用于分配宽度的特定预定义百分比的文本，可以是 完成扩展。

我建议第一个选项。

Answer 2

扩展正是您所寻找的。

我建议将代码更改为 1 行 2 列，但两者都有效：

将行的每个子项包装在 Expanded() 小部件中。 Expanded 使 Widget 在行或列中占据尽可能多的空间。

多个 Expanded 均匀共享可用空间。

在您的情况下，两个小部件将占据行的 50%，并自动对齐它们。

如果您愿意，可以在扩展小部件中设置一个 Flex 参数，这会更改空间的份额。

扩展详细信息：https://api.flutter.dev/flutter/widgets/Expanded-class.html