如何在 ListView.Builder 中右对齐卡片中的行？

Posted 2023-02-23

【中文标题】如何在 ListView.Builder 中右对齐卡片中的行？

【英文标题】：How to right align a Row in a card within a ListView.Builder?

【发布时间】：2021-03-06 14:40:25

【问题描述】：

我在 ListView.Builder 中对齐卡片末尾的行时遇到问题。当我申请 mainAxisAlignment: MainAxisAlignment.end 它不会像我想要的那样进入卡片的右侧。它走的正确距离因数据之前的长度而异。我究竟做错了什么？欢迎任何建议！谢谢！

这就是它的样子。我希望美元金额一直向右。

这是 ListView.Builder 的代码

              return ListView.builder(
                itemCount: transaction.length,
                shrinkWrap: true,
                itemBuilder: (context, index) 
                  return Padding(
                    padding: EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
                    child: Card(
                      color: (index % 2 == 0) ? greycolor : Colors.white,
                      child: Container(
                          height: 60,
                          child: Row(
                            children: <Widget>[
                              Expanded(
                                flex: 1,
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Container(
                                    margin: EdgeInsets.only(left: 5, top: 13),
                                    child: AutoSizeText(transaction[index].date,
                                        maxLines: 1,
                                        style: TextStyle(
                                            fontSize: 14, color: Colors.black),
                                        textAlign: TextAlign.left),
                                  ),
                                ],
                              ),),
                              Flexible(
                                flex: 3,
                                child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Padding(
                                      padding: EdgeInsets.only(top: 13, left: 10),
                                      child: AutoSizeText(transaction[index].tester,
                                              maxLines: 1,
                                              style: TextStyle(
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                  fontFamily: 'Montserrat'),)
                                      ),
                                  Padding(
                                    padding: EdgeInsets.only(left: 10),
                                    child:
                                        AutoSizeText(
                                          '$transaction[index].test',
                                          overflow: TextOverflow.ellipsis,
                                          style: TextStyle(
                                              color: Colors.black,
                                              fontStyle: FontStyle.italic),
                                        ),
                                  ),
                                ],
                              ),),
                              Flexible(
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                children: [
                                  Padding(
                                    padding:
                                    EdgeInsets.only(top: 13),
                                    child: Container(
                                      child: Text(
                                          '\$$transaction[index].amount',
                                          style: TextStyle(
                                              fontSize: 16,
                                              color: Colors.black),
                                          textAlign: TextAlign.right),
                                    ),
                                  ),
                                ],
                              ),)
                            ],
                          )),
                    ),
                  );
                ,
              );

【参考方案1】：

只需将 Flexible 替换为 Expanded

Flexible 只占用所需空间，Expanded 占用所有可用空间

请参阅this 以了解更多信息

希望对您有所帮助

【讨论】：

您可以使用位于container 内部的alignment: Alignment.right 来对齐其中的元素，而不是使用Row