MAUI Shell顶部固定标题添加及TabBar尺寸调整咨询

1. 实现AppShell顶部固定标题（切换Tab不改变） #

直接在AppShell的Scaffold组件中设置全局的appBar，不要在每个Tab对应的页面里单独设置AppBar。示例代码如下：

class MyAppShell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3, // 你的Tab数量
      child: Scaffold(
        // 全局固定的AppBar，切换Tab不会变化
        appBar: AppBar(
          title: Text("固定标题"),
          bottom: TabBar(
            tabs: [
              Tab(text: "首页"),
              Tab(text: "我的"),
              Tab(text: "设置"),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            HomePage(), // 这些页面里不要再设置AppBar
            ProfilePage(),
            SettingsPage(),
          ],
        ),
      ),
    );
  }
}

确保全局的AppBar是最外层Scaffold的一部分，而非每个子页面的组件。

2. 控制TabBar的尺寸 #

完全可以控制TabBar的尺寸，常用方法如下：

• 直接设置TabBar的height属性：

TabBar(
  height: 60, // 自定义TabBar的高度
  tabs: [
    Tab(text: "首页"),
    Tab(text: "我的"),
  ],
)

• 用Container包裹TabBar，设置宽高：

Container(
  height: 50,
  width: double.infinity,
  child: TabBar(
    tabs: [
      Tab(text: "首页"),
      Tab(text: "我的"),
    ],
  ),
)

另外，还可以通过调整Tab内部的padding、字体大小间接调整TabBar整体尺寸，比如：

Tab(
  child: Padding(
    padding: EdgeInsets.symmetric(vertical: 8),
    child: Text("首页", style: TextStyle(fontSize: 16)),
  ),
)

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