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,
                        )
                      ],
                    )),
                  ),
                )

結果：

如您所見，當第一行標題名稱較大時，中間行中的時間未對齊。 如何使中間文本小部件與第一個和最后一個小部件相同的 alignment？

Answer 1

將第一個文本包裝在 Expanded 中並使用 MainAxisSize.max（刪除對齊）。 之后，您可以使用時間文本填充來設置一些間距，然后就完成了。