You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter如何修改macOS应用顶部标题栏文字及背景色

顶部标题栏效果示例

标题栏文字和背景色修改方案

分两种使用场景配置即可:

单个页面自定义标题栏

如果只需要修改某一个页面的标题栏,直接在对应页面的Scaffold组件中传入appBar参数配置:

Scaffold(
  appBar: AppBar(
    // 替换成你需要显示的标题文字
    title: const Text("自定义页面标题"),
    // 设置标题栏背景色
    backgroundColor: Colors.deepPurple,
    // 可选:自定义标题文字样式
    titleTextStyle: const TextStyle(
      color: Colors.white,
      fontSize: 18,
      fontWeight: FontWeight.w500
    ),
  ),
  // 页面其余内容
  body: const Center(child: Text("页面主体内容"))
)

全局统一配置默认标题栏

如果要让所有页面的标题栏默认统一样式、默认标题,直接在应用入口的MaterialApp中配置主题即可,不需要每个页面单独写:

MaterialApp(
  // 这里就是你之前没写代码时默认继承的应用名,修改这里就能改默认标题
  title: "应用默认标题",
  theme: ThemeData(
    // 全局AppBar主题配置
    appBarTheme: const AppBarTheme(
      // 默认标题栏背景色
      backgroundColor: Colors.deepPurple,
      // 默认标题文字样式
      titleTextStyle: TextStyle(
        color: Colors.white,
        fontSize: 18,
        fontWeight: FontWeight.w500
      ),
      // 可选:标题栏图标默认颜色(如返回按钮)
      iconTheme: IconThemeData(color: Colors.white),
      centerTitle: true,
    ),
  ),
  home: const HomePage(),
)

注意:如果单个页面单独配置了AppBar的对应参数,会覆盖全局主题的配置,优先以页面单独设置的规则生效。

内容的提问来源于stack exchange,提问作者sumit kumar Pradhan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 04:39:20