Flutter ListView.builder最后一个元素对齐异常，其余元素显示正常

问题现象 #

列表中多数元素的左右两列布局对齐正常，但最后一个元素的右侧列出现位置偏移，布局错乱。

问题根源 #

1. Row未设置纵向对齐方式，默认CrossAxisAlignment.center会导致左右列因高度不一致而居中对齐，视觉上出现错位；
2. 中间用Expanded(child: SizedBox())占位不够简洁，且右侧列存在多个无效空Text，干扰了布局高度计算；
3. ListView的shrinkWrap: true结合外层Flexible，导致最后一项的布局约束与前面项不一致，放大了对齐问题。

修复方案 #

修改点1：设置Row的纵向对齐 #

给Card内的Row添加crossAxisAlignment: CrossAxisAlignment.start，让左右两列始终从顶部开始布局：

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start, // 新增此属性
  children: [
    // 左侧Column...
  ]
)

修改点2：替换中间占位组件 #

将Expanded(child: SizedBox())替换为Spacer()，更高效地实现左右列的间距填充：

// 原代码
Expanded(child: SizedBox()),
// 修改后
Spacer(),

修改点3：移除右侧列的无效空Text #

删除右侧Column中的空Text，改用SizedBox控制底部间距，保证左右列高度匹配：

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text("Interest", style: TextStyle(fontSize: 13)),
    Text("$trinterest", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
    SizedBox(height: 15),
    Text("Discount", style: TextStyle(fontSize: 13)),
    Text("$discnt", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
    SizedBox(height: 15),
    Text("Remarks", style: TextStyle(fontSize: 13)),
    Text("$trRemark", style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
    SizedBox(height: 61), // 计算左侧剩余高度，用SizedBox填充
  ],
)

修改后的完整ItemBuilder代码 #

return Card(
  shadowColor: Color.fromARGB(255, 245, 175, 45),
  elevation: 5,
  child: Padding(
    padding: const EdgeInsets.only(left: 11, right: 14, top: 12),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("Transaction Type", style: TextStyle(fontSize: 13)),
            Text("$trType", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
            SizedBox(height: 15),
            Text("Transaction Amount", style: TextStyle(fontSize: 13)),
            Text("$tramt", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
            SizedBox(height: 15),
            Text("Transaction Date", style: TextStyle(fontSize: 13)),
            Text("$transdt", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
            SizedBox(height: 15),
            Text("Amount Cleared", style: TextStyle(fontSize: 13)),
            Text("$amtCleared", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
            SizedBox(height: 6),
          ],
        ),
        Spacer(),
        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("Interest", style: TextStyle(fontSize: 13)),
            Text("$trinterest", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
            SizedBox(height: 15),
            Text("Discount", style: TextStyle(fontSize: 13)),
            Text("$discnt", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
            SizedBox(height: 15),
            Text("Remarks", style: TextStyle(fontSize: 13)),
            Text("$trRemark", style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
            SizedBox(height: 61),
          ],
        )
      ],
    ),
  )
);

内容的提问来源于stack exchange，提问作者Minal Suryawanshi