?系統托盤(Tray)

系統托盤就是狀態欄里面對應的圖標點擊菜單

?

主要有兩款框架

框架	一句話評價
tray_manager	輕量、簡單、易用，適合常規托盤功能
system_tray	更底層、更強大、支持圖標/菜單/消息彈窗等更多功能，但復雜度更高

---

🧱 基礎能力對比

能力	tray_manager ?	system_tray ?
添加系統托盤圖標	?	?
托盤菜單支持	?（基本菜單）	?（更豐富，支持子菜單、圖標）
點擊托盤事件監聽	?（click, right click 等）	?（支持更多系統原生事件）
更改托盤圖標	?	?
彈出系統原生消息（Balloon）	?	?（僅 Windows 支持）
子菜單圖標/多級菜單	?	?
多平臺支持（Win/macOS/Linux）	?（全支持）	?（全支持）
桌面通知	?	?（Windows balloon）
設置 Tooltip	?	?

---

?? 技術架構對比

屬性	tray_manager	system_tray
底層語言	通過 Dart FFI 調用 C++/Objective-C	更底層，直接使用 C/C++ 實現系統調用
依賴框架	flutter, ffi	flutter, ffi, tray_system（C庫）
項目大小	小、純 Flutter	稍大，構建依賴更復雜
接入簡單性	更簡單，API 清晰	功能強大但 API 比較底層，寫法偏原生

---

🔧 示例代碼對比

（添加托盤圖標 + 菜單）

tray_manager 簡潔示例：

await trayManager.setIcon('assets/tray_icon.png');
await trayManager.setContextMenu(Menu(items: [MenuItem(key: 'show', label: 'Show Window'),MenuItem.separator(),MenuItem(key: 'exit', label: 'Exit'),
]));trayManager.addListener(MyTrayListener());

system_tray 強大示例：

final SystemTray tray = SystemTray();
await tray.initSystemTray(iconPath: 'assets/tray_icon.png',toolTip: 'My Tray App',
);final Menu menu = Menu();
await menu.buildFrom([MenuItemLabel(label: 'Show Window'),MenuSeparator(),MenuItemLabel(label: 'Exit'),
]);await tray.setContextMenu(menu);
tray.registerSystemTrayEventHandler((eventName) {print("Tray event: $eventName");
});

---

? 推薦場景（選型建議）

你的需求	推薦插件	理由
只要托盤圖標 + 簡單菜單	tray_manager	簡單好用，集成快
要顯示系統消息、子菜單、圖標菜單	system_tray	功能強大，系統級集成更全面
要更復雜的原生交互（例如原生通知）	system_tray	支持 Windows Balloon/原生消息
想快速開發 MVP，功能不復雜	tray_manager	更容易快速上線
在意插件活躍度 / 維護頻率	system_tray	JetBrains 社區更認可（大佬多）

hello word

import 'dart:io';import 'package:flutter/material.dart';
import 'package:system_tray/system_tray.dart';void main() {runApp(const MyApp());initSystemTray();
}Future<void> initSystemTray() async {String path =Platform.isWindows ? 'assets/app_icon.ico' : 'assets/app_icon.png';final AppWindow appWindow = AppWindow();final SystemTray systemTray = SystemTray();// We first init the systray menuawait systemTray.initSystemTray(title: "system tray",iconPath: path,);// create context menufinal Menu menu = Menu();await menu.buildFrom([MenuItemLabel(label: 'Show', onClicked: (menuItem) => appWindow.show()),MenuItemLabel(label: 'Hide', onClicked: (menuItem) => appWindow.hide()),MenuItemLabel(label: 'Exit', onClicked: (menuItem) => appWindow.close()),]);// set context menuawait systemTray.setContextMenu(menu);// handle system tray eventsystemTray.registerSystemTrayEventHandler((eventName) {debugPrint("eventName: $eventName");if (eventName == kSystemTrayEventClick) {Platform.isWindows ? appWindow.show() : systemTray.popUpContextMenu();} else if (eventName == kSystemTrayEventRightClick) {Platform.isWindows ? systemTray.popUpContextMenu() : appWindow.show();}});
}
class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(// This is the theme of your application.//// TRY THIS: Try running your application with "flutter run". You'll see// the application has a purple toolbar. Then, without quitting the app,// try changing the seedColor in the colorScheme below to Colors.green// and then invoke "hot reload" (save your changes or press the "hot// reload" button in a Flutter-supported IDE, or press "r" if you used// the command line to start the app).//// Notice that the counter didn't reset back to zero; the application// state is not lost during the reload. To reset the state, use hot// restart instead.//// This works for code too, not just values: Most code changes can be// tested with just a hot reload.colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});// This widget is the home page of your application. It is stateful, meaning// that it has a State object (defined below) that contains fields that affect// how it looks.// This class is the configuration for the state. It holds the values (in this// case the title) provided by the parent (in this case the App widget) and// used by the build method of the State. Fields in a Widget subclass are// always marked "final".final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {// This call to setState tells the Flutter framework that something has// changed in this State, which causes it to rerun the build method below// so that the display can reflect the updated values. If we changed// _counter without calling setState(), then the build method would not be// called again, and so nothing would appear to happen._counter++;});}@overrideWidget build(BuildContext context) {// This method is rerun every time setState is called, for instance as done// by the _incrementCounter method above.//// The Flutter framework has been optimized to make rerunning build methods// fast, so that you can just rebuild anything that needs updating rather// than having to individually change instances of widgets.return Scaffold(appBar: AppBar(// TRY THIS: Try changing the color here to a specific color (to// Colors.amber, perhaps?) and trigger a hot reload to see the AppBar// change color while the other colors stay the same.backgroundColor: Theme.of(context).colorScheme.inversePrimary,// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text(widget.title),),body: Center(// Center is a layout widget. It takes a single child and positions it// in the middle of the parent.child: Column(// Column is also a layout widget. It takes a list of children and// arranges them vertically. By default, it sizes itself to fit its// children horizontally, and tries to be as tall as its parent.//// Column has various properties to control how it sizes itself and// how it positions its children. Here we use mainAxisAlignment to// center the children vertically; the main axis here is the vertical// axis because Columns are vertical (the cross axis would be// horizontal).//// TRY THIS: Invoke "debug painting" (choose the "Toggle Debug Paint"// action in the IDE, or press "p" in the console), to see the// wireframe for each widget.mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:'),Text('$_counter',style: Theme.of(context).textTheme.headlineMedium,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}