系统托盘(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.);}
}