Flutter如何将AppBar标题对齐至顶部而非居中？

当你设置toolbarHeight为较大值时，AppBar的标题默认会垂直居中显示。要让标题对齐到顶部，可以通过以下两种简单方法实现：

方法一：使用Align组件包裹标题文本 #

直接将Text组件放在Align中，指定对齐方式为顶部居中：

AppBar(
  toolbarHeight: 100,
  title: Align(
    alignment: Alignment.topCenter,
    child: Text('TITLE'),
  ),
)

如果需要标题左对齐顶部，只需将alignment改为Alignment.topLeft即可。

方法二：使用Container组件控制对齐 #

通过设置Container的高度为toolbar的高度，再指定顶部对齐：

AppBar(
  toolbarHeight: 100,
  title: Container(
    height: 100,
    alignment: Alignment.topCenter,
    child: Text('TITLE'),
  ),
)

原理说明 #

AppBar的title区域会自动填充整个toolbar的高度，默认的垂直居中是AppBar内部的布局逻辑导致的。通过外层包裹Align或Container，我们可以覆盖默认的对齐规则，强制文本定位到顶部区域。

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