Flutter MainAxisAlignment 无法正常工作

Question

我正在尝试在一行中使用 MainAxixsAlignment(spaceBetween)。 这是我的代码

ListView.separated(
                  shrinkWrap: true,
                  separatorBuilder: (context, index) => Divider(
                    color: Colors.black,
                    indent: 20,
                    endIndent: 20,
                  ),
                  itemCount: prayerTimes.length,
                  itemBuilder: (context, index) => Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Center(
                        child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          prayerTimes[index].name,
                          style: TextStyle(
                              color: Colors.teal,
                              fontWeight: FontWeight.bold,
                              fontSize: 18.0),
                        ),
                        Text(
                          prayerTimes[index].time,
                          style: TextStyle(color: Colors.teal, fontSize: 18.0),
                        ),
                        Icon(
                          Icons.volume_up,
                          color: Colors.teal,
                        )
                      ],
                    )),
                  ),
                )

结果：

如您所见，当第一行标题名称较大时，中间行中的时间未对齐。 如何使中间的文本小部件与第一个和最后一个小部件的对齐方式相同？

Answer 1

将第一个 Text 包裹在 Expanded 中并使用 MainAxisSize.max（删除对齐）。然后你可以使用padding为时间文本设置一些间距就完成了。