微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Flutter MainAxisAlignment 无法正常工作

如何解决Flutter MainAxisAlignment 无法正常工作

我正在尝试在一行中使用 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,Icon(
                          Icons.volume_up,color: Colors.teal,)
                      ],)),)

结果:

enter image description here

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

解决方法

将第一个 Text 包裹在 Expanded 中并使用 MainAxisSize.max(移除对齐)。之后,您可以使用填充时间文本来设置一些间距,您就完成了。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。