Flutter如何在macOS中自定义状态栏

在Flutter开发macOS应用时，如何自定义窗口顶部状态栏的样式和内容？比如修改背景色、添加自定义按钮或图标，或者调整状态栏的高度和布局？

2 回复

在macOS中自定义状态栏，可使用window_manager插件。通过WindowManager设置标题栏样式，隐藏默认状态栏，并自定义Widget实现个性化状态栏。

更多关于Flutter如何在macOS中自定义状态栏的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 macOS 中自定义 Flutter 应用的状态栏（菜单栏），可以通过以下步骤实现：

1. 修改 macos/Runner/AppDelegate.swift

在 macOS 项目中，编辑 AppDelegate.swift 文件，调整状态栏样式：

import Cocoa
import FlutterMacOS

@NSApplicationMain
class AppDelegate: FlutterAppDelegate {
  override func applicationDidFinishLaunching(_ notification: Notification) {
    // 隐藏标题栏和工具栏（可选）
    if let window = NSApplication.shared.windows.first {
      window.titleVisibility = .hidden
      window.titlebarAppearsTransparent = true
      window.styleMask.insert(.fullSizeContentView)
    }
    
    // 设置状态栏样式
    NSApplication.shared.setActivationPolicy(.regular) // 确保应用显示在 Dock 和菜单栏
  }

  override func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool {
    return true
  }
}

2. 自定义状态栏菜单（系统菜单栏）

如果需要添加自定义菜单项，在 AppDelegate.swift 中添加：

override func applicationWillFinishLaunching(_ notification: Notification) {
  // 创建自定义菜单
  let mainMenu = NSMenu()
  
  let appMenuItem = NSMenuItem()
  mainMenu.addItem(appMenuItem)
  
  let appMenu = NSMenu()
  appMenuItem.submenu = appMenu
  
  // 添加菜单项
  appMenu.addItem(NSMenuItem(title: "关于", action: #selector(NSApplication.orderFrontStandardAboutPanel(_:)), keyEquivalent: ""))
  appMenu.addItem(NSMenuItem.separator())
  appMenu.addItem(NSMenuItem(title: "退出", action: #selector(NSApplication.terminate(_:)), keyEquivalent: "q"))
  
  NSApplication.shared.mainMenu = mainMenu
}

3. 使用 bitsdojo_window 包（推荐）

对于更高级的自定义（如隐藏标题栏、自定义窗口控制），可使用第三方包：

  1. 添加依赖：
dependencies:
  bitsdojo_window_macos: ^0.1.1
  1. 在 main.dart 中初始化：
import 'package:bitsdojo_window_macos/bitsdojo_window_macos.dart';

void main() {
  runApp(MyApp());
  doWhenWindowReady(() {
    final win = appWindow;
    win.size = Size(800, 600);
    win.alignment = Alignment.center;
    win.show();
  });
}
  1. 自定义标题栏：
AppBar(
  backgroundColor: Colors.transparent,
  elevation: 0,
  toolbarHeight: 30,
  title: MoveWindow(), // 允许拖动
  actions: [
    MinimizeWindowButton(),
    MaximizeWindowButton(),
    CloseWindowButton(),
  ],
)

注意事项：

  • 修改系统菜单栏主要影响应用菜单（如“文件”、“编辑”等）。
  • 若要完全自定义窗口样式（如无边框），需结合 bitsdojo_window 或修改原生代码。
  • 测试时请使用 flutter run -d macos 运行 macOS 版本。

通过以上方法，你可以灵活控制 macOS 状态栏和窗口样式，实现更符合设计需求的应用界面。

回到顶部