Flutter：在列中的 wrap 小部件中对齐收音机

Question

我在上面找到了，但它不是像我在这里使用 List 那样动态创建的，因为我可能想添加新项目。那么我该如何对齐，因为我的第二列收音机没有垂直对齐。
这是我的代码：

List<OptionList> optList = [
    OptionList(name: "Super Fast", total: 20, index: 1, price: 50),
    OptionList(name: "Fast", total: 6, index: 2, price: 20),
    OptionList(name: "Regular", total: 5, index: 3, price: 10),
    OptionList(name: "Slow", total: 5, index: 3, price: 5),
  ];

Wrap(
    spacing: 20,
    runSpacing: 15,
    direction: Axis.horizontal,
    alignment: WrapAlignment.spaceBetween,
    runAlignment: WrapAlignment.spaceEvenly,
    children: optList.map((data) => Row(
                  mainAxisSize: MainAxisSize.min,
                   children: [
                        Radio(
                           value: data.name,
                           groupValue: data.index,
                           onChanged: (val) {
                               setState(() {
                                   speed = data.name;
                                   id = data.index;
                               });
                           }),
                           Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                 Text("${data.total}" ' ' "${data.name}"),
                                 Text('~'"${data.price}" ' ')
                              ],
                           ),
                       ],)).toList(),
    ),

Answer 1

Wrap 子项大小不同 alignment: WrapAlignment.spaceBetween,，这就是您遇到此问题的原因。您可以提供解决问题的固定方法，但这也取决于文本大小。如果您固定使用这些字符串，120 宽度就足够了。

children: optList
    .map(
      (data) => SizedBox(
        width: 120,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Radio(
                value: data.name,
                groupValue: data.index,
                onChanged: (val) {}),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("${data.total}" ' ' "${data.name}"),
                Text('~' "${data.price}" ' ')
              ],
            ),
          ],
        ),
      ),
    )
    .toList(),

如果长文本溢出，您可以用 Expanded 小部件包裹 Column。

Answer 2

通过使用 GridView，您可以将代码转换成如下形式：

return GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 4,
  ),
  itemCount: optList.length,
  itemBuilder: (context, index) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Radio<dynamic>(
            value: data.name,
            groupValue: data.index,
            onChanged: (val) {
              setState(() {
                speed = data.name;
                id = data.index;
              });
            }),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text("${data.total}" ' ' "${data.name}"),
            Text('~' "${data.price}" ' ')
          ],
        ),
      ],
    );

Flutter：在列中的 wrap 小部件中对齐收音机

Flutter : Align radio in wrap widget in column

flutter

dart