垂直對齊行內的項目 flutter

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