Flutter中为何flexibleSpace组件显示在AppBar标题上方？

问题原因 #

flexibleSpace 默认会填充整个 AppBar 的空间，内部的 Text 组件默认对齐左上角，所以会显示在最顶部。另外，AppBar 的 title 与 flexibleSpace 是层叠布局关系，title 会覆盖在 flexibleSpace 上方，容易导致布局混乱。

解决方案 #

方案一：调整flexibleSpace内组件的位置

用Container包裹flexibleSpace里的文本，通过内边距避开标题和底部TabBar的区域：

@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(200),
        child: AppBar(
          bottom: const TabBar(
            tabs: [
              Tab(icon: Icon(Icons.view_carousel)),
              Tab(icon: Icon(Icons.grid_view))
            ],
          ),
          flexibleSpace: Container(
            // 适配状态栏和标题的位置，根据需求调整数值
            padding: const EdgeInsets.only(top: 80, left: 16),
            child: const Text('SubTitle very long..........................'),
          ),
          title: const Text('Title',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
              )),
        ),
      ),
      body: const TabBarView(
        children: [AttendanceCarousel(), AttendanceGrid()],
      ),
    ),
  );
}

方案二：统一将标题和副标题放入flexibleSpace

把title和副标题都放到flexibleSpace中，用Column垂直排列，完全控制布局：

@override
Widget build(BuildContext context) {
  // 获取状态栏高度，适配不同设备
  final statusBarHeight = MediaQuery.of(context).padding.top;
  
  return DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(200),
        child: AppBar(
          bottom: const TabBar(
            tabs: [
              Tab(icon: Icon(Icons.view_carousel)),
              Tab(icon: Icon(Icons.grid_view))
            ],
          ),
          flexibleSpace: Padding(
            padding: EdgeInsets.only(top: statusBarHeight + 20, left: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: const [
                Text('Title',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                    )),
                SizedBox(height: 12), // 标题与副标题的间距
                Text('SubTitle very long..........................'),
              ],
            ),
          ),
        ),
      ),
      body: const TabBarView(
        children: [AttendanceCarousel(), AttendanceGrid()],
      ),
    ),
  );
}

补充说明 #

• 方案二中使用MediaQuery获取状态栏高度，能更好适配不同机型的状态栏差异。
• 可以根据实际需求调整内边距、间距和对齐方式，达到理想的显示效果。

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