Flutter MainAxisAlignment 无法正常工作

Question

我正在尝试在 Row 中使用 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

将第一个文本包装在 Expanded 中并使用 MainAxisSize.max（删除对齐）。之后，您可以使用填充时间 Text 来设置一些间距，然后就完成了。