Flutter新版本中Icon与Text无法居中，使用Align仍无效求助

你的问题核心在于Row组件的默认布局行为以及多余的Flexible组件影响了居中效果：

1. Row默认的mainAxisAlignment是MainAxisAlignment.start，会让内部元素靠左排列；
2. 外层的Flexible会强制Row撑满AppBar的title区域，导致即使加了Align，Row内部元素还是会保持左对齐状态。

方案一：最简洁的实现（推荐） #

直接利用AppBar的centerTitle属性，同时给Row设置合适的主轴对齐和尺寸约束：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.amber),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true, // 开启title区域整体居中
          title: Row(
            mainAxisSize: MainAxisSize.min, // 让Row仅包裹子元素宽度，不撑满整个区域
            mainAxisAlignment: MainAxisAlignment.center, // 确保内部元素居中
            children: const [
              Icon(Icons.access_time_filled_sharp),
              SizedBox(width: 8), // 增加图标与文本的间距，提升美观度
              Text('Flutter'),
            ],
          ),
        ),
      ),
    ),
  );
}

方案二：保留Align组件的实现 #

如果需要用Align来控制，只需移除多余的Flexible，并让Row包裹内容：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.amber),
      home: Scaffold(
        appBar: AppBar(
          title: Align(
            alignment: Alignment.center,
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Icon(Icons.access_time_filled_sharp),
                SizedBox(width: 8),
                Text('Flutter'),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

关键说明 #

• mainAxisSize: MainAxisSize.min是核心：让Row只占用子元素所需的宽度，而不是撑满整个AppBar的title区域，这样居中设置才能生效；
• 不需要依赖Flutter版本调整，这个布局逻辑在各版本中都是一致的，问题出在布局组件的组合使用上。

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