Flutter Row组件内元素对齐问题：右侧体重图标无法上下对齐

图标顶部不对齐的核心原因是：默认Row的crossAxisAlignment为CrossAxisAlignment.center，加上Material图标本身的视觉边界设计差异，导致不同图标和文本组合后顶部无法对齐。以下是可行的修复方案：

修改后的完整代码 #

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.only(left: 0.0, right: 0.0, top: 8.0, bottom: 8.0),
    child: Slidable(
      endActionPane: ActionPane(motion: StretchMotion(), children: [
        SlidableAction(
          onPressed: deleteTapped,
          backgroundColor: Colors.red.shade400,
          icon: Icons.delete,
          borderRadius: BorderRadius.circular(8),
        )
      ]),
      child: Container(
        padding: const EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          color: Color(0xFFD9F0FF),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          // 关键：外层Row设置顶部对齐
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 日期区域：单独封装Row，确保内部图标和文本顶部对齐
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Icon(
                  Icons.date_range_outlined,
                  color: Color(0xFF006B8F),
                ),
                const SizedBox(width: 8),
                Text(date,
                    style: const TextStyle(
                        fontWeight: FontWeight.w400,
                        fontSize: 18,
                        color: Color(0xFF006B8F))),
              ],
            ),
            const Spacer(),
            // 分隔线：添加alignment确保顶部对齐
            const Align(
              alignment: Alignment.topCenter,
              child: Text(
                "|",
                style: TextStyle(
                    fontSize: 18,
                    color: Color(0xFF006B8F),
                    fontWeight: FontWeight.bold),
              ),
            ),
            const Spacer(),
            // 体重区域：单独封装Row，确保内部图标和文本顶部对齐
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Icon(
                  Icons.monitor_weight_outlined,
                  color: Color(0xFF006B8F),
                ),
                const SizedBox(width: 8),
                Text(weight + " kg",
                    style: const TextStyle(
                        fontWeight: FontWeight.w400,
                        fontSize: 18,
                        color: Color(0xFF006B8F))),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

关键修改点 #

• 外层Row添加crossAxisAlignment: CrossAxisAlignment.start，让左右两个区域整体顶部对齐
• 日期和体重区域各自封装为独立Row，并设置crossAxisAlignment: CrossAxisAlignment.start，确保每个区域内的图标和文本顶部对齐
• 中间分隔线用Align包裹，设置alignment: Alignment.topCenter，保证分隔线顶部和图标、文本顶部一致

如果调整后仍有细微偏差，可以尝试给图标设置固定的size属性（比如size: 24），统一两个图标的尺寸，进一步消除视觉差异。

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