垂直对齐行颤动内的项目

Question

我有一个列表，我希望项目在 listView 内对齐。但是我的逻辑不能很好地工作，因为项目不能很好地对齐，因为它们具有不同的宽度。

代码

  ListView.builder(
                         physics: ScrollPhysics(),
                         shrinkWrap: true,
                         itemCount: mainBloc.walletHistory!=null?
                         mainBloc.walletHistory.length:0,
                         itemBuilder: (context, index){
                           return Container(
                             margin: EdgeInsets.only(bottom: 14),
                             child:  Row(
                               children: [
                                 Text(
                                   mainBloc.walletHistory[index].createdAt
                                       .substring(2,7),
                                   textAlign: TextAlign.start,
                                   style: TextStyle(
                                       color: transactionTextColor,
                                       fontSize: 18,
                                       fontFamily: 'Inter',
                                       fontWeight: FontWeight.w500),
                                 ),
                                 Spacer(),
                                 Text(
                                   mainBloc.walletHistory[index].action??"None",
                                   style: TextStyle(
                                       color: HexColor("#6B7377"),
                                       fontSize: 18,
                                       fontFamily: 'Inter',
                                       fontWeight: FontWeight.w500),
                                 ),
                                 Spacer(),
                                 Container(
                                   padding: EdgeInsets.only(bottom: 10),
                                   child: SvgPicture.asset(
                                     'assets/images/blacknaira.svg',
                                     color: primaryColor,
                                   ),
                                 ),
                                 Text(
                                   '${mainBloc.walletHistory[index]
                                       .transactionAmount
                                       .toStringAsFixed(2)}',
                                   textAlign: TextAlign.start,
                                   style: TextStyle(
                                       color: primaryColor,
                                       fontSize: 18,
                                       fontFamily: 'Inter',
                                       fontWeight: FontWeight.w700),
                                 ),
                                 Spacer(),
                               ],
                             ),
                           );
                         },
                       ),

我尝试使用空间，因为我希望所有项目的宽度相等，但现在我遇到了一个问题，因为它们在行内没有垂直对齐，这使得它看起来像您看到的那样分散。

Answer 1

让一行中的项目按列对齐的最简单方法是为一行中的项目创建固定宽度并展开包含最多内容的行中的项目。

我重构了 ListView.builder 以更好地展示示例。

ListView.builder(
  physics: ScrollPhysics(),
  shrinkWrap: true,
  itemCount: mainBloc.walletHistory!=null?
  mainBloc.walletHistory.length:0,
  itemBuilder: (context, index){
    return TransactionRow(history: mainBloc.walletHistory[index]);
  },
);

我创建了一个 TransactionRow 小部件，它传递完成它所需的数据。

class TransactionRow extends StatelessWidget {
  final double dateRowWidth = 75.0; // {double} for date width
  final double amountRowWidth = 150.0; // {double} for amount width
  final history; // Might want to typecast this

  const TransactionRow({Key? key, this.history}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 14.0),
      child: Row(
        children: [
          Container(
            width: dateRowWidth,
            child: Text(
              history.createdAt.substring(2, 7),
              textAlign: TextAlign.start,
              style: TextStyle(
                color: transactionTextColor,
                fontSize: 18,
                fontFamily: 'Inter',
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          Expanded(
            child: Text(
              history.action ?? "None",
              style: TextStyle(
                color: HexColor("#6B7377"),
                fontSize: 18,
                fontFamily: 'Inter',
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          Container(
            width: amountRowWidth,
            child: Row(
              children: [
                Container(
                  padding: EdgeInsets.only(bottom: 10),
                  child: SvgPicture.asset(
                    'assets/images/blacknaira.svg',
                    color: primaryColor,
                  ),
                ),
                Text(
                  '${history.transactionAmount.toStringAsFixed(2)}',
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    color: primaryColor,
                    fontSize: 18,
                    fontFamily: 'Inter',
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}