Flutter中如何实现行内文本顶部对齐、图标垂直居中

需求说明 #

• 列表项采用三列布局：第一列显示图标（需垂直居中），第二列显示两段文本，第三列显示日期（文本需顶部对齐）
• 不能使用固定高度，需自动适配父组件可用高度
• 原尝试SizedBox、Container居中方式无效

核心改动 #

保持Row的crossAxisAlignment: CrossAxisAlignment.start以确保文本顶部对齐，同时将第一列的图标包裹在Center组件内，让图标在自身分配的垂直空间中居中对齐，无需固定高度。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class MyClass {
  final String text1;
  final String text2;
  final DateTime date;
  MyClass({required this.text1, required this.text2, required this.date});
}

class MyWidget extends StatelessWidget {
  final elements = [
    MyClass(text1: "Very long Text with numbers 1234855", text2: "Text2", date: DateTime.now()),
    MyClass(text1: "Very long Text with numbers 2653673", text2: "Text4", date: DateTime.now()),
    MyClass(text1: "Very long Text with numbers 2653673", text2: "Text6", date: DateTime.now()),
  ];
  
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(primarySwatch: Colors.blue),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: const Text('Demo'),
        ),
        body: Column(
          children: [
            const Center(child: Text("Select one:")),
            Expanded(
              child: ListView.builder(
                itemCount: elements.length,
                itemBuilder: (context, index) {
                  final elem = elements[index];
                  return Card(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // 第一列：图标垂直居中
                        Expanded(
                          flex: 2,
                          child: Center(
                            child: Icon(Icons.donut_small_sharp),
                          ),
                        ),
                        // 第二列：文本顶部对齐
                        Expanded(
                          flex: 12,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(elem.text1),
                              Text(elem.text2),
                            ],
                          ),
                        ),
                        // 第三列：日期文本顶部对齐
                        Expanded(
                          flex: 6,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Text("Date:"),
                              Text(DateFormat('E d HH:mm').format(elem.date))
                            ],
                          ),
                        )
                      ],
                    ),
                  );
                },
              ),
            ),
            Center(child: ElevatedButton(onPressed: () {}, child: const Text("Go"))),
          ],
        ),
      ),
    );
  }
}

关键说明 #

1. 文本顶部对齐：Row的crossAxisAlignment: CrossAxisAlignment.start保证第二、三列的Column组件顶部对齐，文本自然从顶部开始排列。
2. 图标垂直居中：第一列的Expanded会占据Row分配的垂直空间（由内容最高的列决定），内部的Center组件让图标在该空间内垂直居中，完全适配动态高度。
3. 自适应高度：整个Row的高度由内容最长的子项自动撑开，无需设置固定高度，完美适配父组件的可用空间。

内容的提问来源于stack exchange，提问作者Yván Ecarri