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

问题描述 投票:0回答:2

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

padRight(20)
得到的结果一样接近: TextField() not aligned.

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()
。 必须有一个快速解决方案。

flutter alignment
2个回答
0
投票

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

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

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

我建议第一个选项。


0
投票

扩展正是您所寻找的。

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

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

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

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.