flutter desktop tray 桌面端实现可爱的小太阳系统托盘

 系统托盘功能对于桌面程序是很重要的，我们可以在系统托盘对程序进行简单控制，也可以在托盘向用户展示一些信息。我们这次基于system_tray插件实现windows系统下的可爱小太阳系统托盘功能，并使它像QQ来新消息时那样进行图标闪烁。效果图如下所示：

system_tray插件简介

 system_tray支持在Windows、macOS 和 Linux 上实现系统托盘功能，与之相似的还有一个tray_manager插件，但是这个最近更新时间比较久远，所以我们选择system_tray插件进行实现。下边是官方展示的例子：

开始使用system_tray

 首先实例化一个SystemTray对象：final SystemTray systemTray = SystemTray();，为了方便后边使用，我们直接定义全局变量，后边都只针对这个对象进行操作。

 接着我们定义initSystemTray函数，在这个函数中进行托盘功能的设置。 由于windwos与linux支持的图标格式不同，我们要根据操作系统类型选择对应的图标String path = Platform.isWindows ? 'assets/sun.ico' : 'assets/app_icon.png';，如果操作系统是windwos的话，就选icon格式图标，其他操作系统的情况就使用png格式就可以了。

system_tray初始化

 上边实例化的SystemTray对象，接着我们就要使用它的initSystemTray方法来进行初始化。传入的参数分别是图标路径，macos下显示的title，以及鼠标悬浮时的提示文字。

required String iconPath：托盘显示的图标路径
String? title：名称（仅macos）
String? toolTip：鼠标悬停到托盘图标时的提示信息（仅win、macos）

  // We first init the systray menu
  await systemTray.initSystemTray(
    title: "system tray",
    toolTip: "system tray toolTip",
    iconPath: path,
  );

 这样就可以实现一个简单的系统托盘图标啦：

右键菜单栏

 只显示图标肯定是不够的，我们还可以实现右键点击图标展示菜单栏，实现一些简单的功能交互。实现也是实例化菜单对象final Menu _menu = Menu();，接着使用菜单对象的buildFrom方法进行设置。

await _menu.buildFrom([
  ...
]);

 buildFrom中放置的是以下几种菜单项：

MenuItemLabel：文本菜单

required String label：文本标签
String? image：选项前的图片
String? name：名称
bool enabled：是否启用，默认为true
void Function(MenuItem)? onClicked：菜单被点击事件，返回一个MenuItem对象，可以获取设置image、name等属性


MenuItemCheckbox：复选框菜单

required String label：显示文本标签
String? image：选项前的图片
String? name：名称
bool enabled：是否启用，默认为true
bool checked：是否选中，默认为false
void Function(MenuItem)? onClicked：菜单被点击事件，返回一个MenuItem对象，可以获取设置image、name等属性


SubMenu：二级菜单

required String label：文本标签
required List<MenuItem> children：子菜单列表
String? image：选项前的图片


MenuSeparator：菜单分隔符

 我们实现两级的菜单，功能包括设置标题、设置提示文字，闪烁图标、复选框菜单、显示/隐藏窗口等功能：

  // create context menu
  final Menu menu = Menu();
  await menu.buildFrom([
    SubMenu(
      label: "submenu",
      children: [
        MenuItemLabel(
          label: 'setTitle',
          onClicked: (menuItem) {
            systemTray.setTitle("setTitle");
          },
        ),
        。。。
        MenuItemLabel(
          label: 'Start flash tray icon',
          image: "assets/icons8-sun-30.BMP",
          onClicked: (menuItem) {
            debugPrint("Start flash tray icon");
            _timer ??= Timer.periodic(
              const Duration(milliseconds: 500),
              (timer) {
                _toogleTrayIcon = !_toogleTrayIcon;
                systemTray.setImage(_toogleTrayIcon ? "" : "assets/sun.ico");
              },
            );
          },
        ),
      ],
    ),
    MenuItemCheckbox(
      label: "MenuItemCheckbox",
      name: "MenuItemCheckbox name",
      checked: true,
      onClicked: (menuItem) async {
        await menuItem.setCheck(!menuItem.checked);
      },
    ),
    MenuSeparator(),
    。。。
    MenuItemLabel(
      label: 'Exit',
      onClicked: (menuItem) => appWindow.close(),
    ),
  ]);

 别忘了使用await systemTray.setContextMenu(menu);函数使之生效。效果图如下：

右键菜单栏实现图标闪烁功能

 我们在右键菜单中实现一个点击开始/停止图标闪烁的功能，开始菜单中的onClicked函数中添加一个计时器，每隔一段时间触发systemTray.setImage函数重新设置托盘图标路径，路径在空白和正确的icons路径之间切换，实现图标闪烁的效果。

     MenuItemLabel(
          label: 'Stop flash tray icon',
          image: "assets/sun.ico",
          onClicked: (menuItem) {
            debugPrint("Stop flash tray icon");
            _timer?.cancel();
            _timer = null;
            systemTray.setImage("assets/sun.ico");
          },
        ),
        MenuItemLabel(
          label: 'Start flash tray icon',
          image: "assets/icons8-sun-30.BMP",
          onClicked: (menuItem) {
            debugPrint("Start flash tray icon");
            _timer ??= Timer.periodic(
              const Duration(milliseconds: 500),
              (timer) {
                _toogleTrayIcon = !_toogleTrayIcon;
                systemTray.setImage(_toogleTrayIcon ? "" : "assets/sun.ico");
              },
            );
          },
        ),

 效果图：

窗口操作和鼠标事件监控

 实例化final AppWindow appWindow = AppWindow();对象，windows窗口的一些操作依赖这个对象，我们可以利用它实现窗口显示和隐藏。结合鼠标事件使用。appWindow.show()可以显示窗口，appWindow.hide()隐藏窗口，appWindow.close()关闭窗口。

 鼠标注册事件需要用到registerSystemTrayEventHandler方法，有以下几种鼠标情况可以检测（Linux不适用），默认设置点击图标显示窗口。此事件是针对托盘图标而言，右键菜单鼠标事件与这个鼠标事件无关、菜单有自己的事件监控。

kSystemTrayEventClick：左击
kSystemTrayEventRightClick：右击
kSystemTrayEventDoubleClick：双击（仅win）

 // handle system tray event
  systemTray.registerSystemTrayEventHandler((eventName) {
    debugPrint("eventName: $eventName");
    if (eventName == kSystemTrayEventClick) {
      Platform.isWindows ? appWindow.show() : systemTray.popUpContextMenu();
    } else if (eventName == kSystemTrayEventRightClick) {
      Platform.isWindows ? systemTray.popUpContextMenu() : appWindow.show();
    }
  });

添加动画，控制按钮

 为了美观，我们选择一个lottie动画放到程序中，让我们的编程不那么枯燥，增添几分乐趣。同时我们添加两个文字按钮，在主界面控制图标是否闪烁。

     TextButton(
      onPressed: () {
        iconFlash();
      },
      child: const Text("Start Desktop Tray Icon Spalsh"),
    ),
    TextButton(
      onPressed: () {
        closeIconFlash();
      },
      child: const Text("Close Desktop Tray Icon Spalsh"),
    ),

 iconFlash()函数与closeIconFlash()函数分别控制了图标闪烁的开始和停止，与右键菜单控制图标闪烁的函数内容和原理基本相同，具体实现可以在完整代码中查看。  效果图：

完整代码

 最终效果图：

import 'package:system_tray/system_tray.dart';

final SystemTray systemTray = SystemTray();

Future<void> initSystemTray() async {
  Timer? _timer;
  bool _toogleTrayIcon = true;

  String path = Platform.isWindows ? 'assets/sun.ico' : 'assets/app_icon.png';
  final AppWindow appWindow = AppWindow();

  await systemTray.initSystemTray(
    title: "system tray",
    toolTip: "system tray toolTip",
    iconPath: path,
  );

  // create context menu
  final Menu menu = Menu();
  await menu.buildFrom([
    SubMenu(
      label: "submenu",
      children: [
        MenuItemLabel(
          label: 'setTitle',
          onClicked: (menuItem) {
            systemTray.setTitle("setTitle");
          },
        ),
        MenuItemLabel(
          label: 'setImage null',
          onClicked: (menuItem) {
            systemTray.setImage("");
          },
        ),
        MenuItemLabel(
          label: 'setToolTip',
          onClicked: (menuItem) {
            systemTray.setToolTip("setToolTip");
          },
        ),
        MenuItemLabel(
          label: 'Stop flash tray icon',
          image: "assets/sun.ico",
          onClicked: (menuItem) {
            debugPrint("Stop flash tray icon");
            _timer?.cancel();
            _timer = null;
            systemTray.setImage("assets/sun.ico");
          },
        ),
        MenuItemLabel(
          label: 'Start flash tray icon',
          image: "assets/icons8-sun-30.BMP",
          onClicked: (menuItem) {
            debugPrint("Start flash tray icon");
            _timer ??= Timer.periodic(
              const Duration(milliseconds: 500),
              (timer) {
                _toogleTrayIcon = !_toogleTrayIcon;
                systemTray.setImage(_toogleTrayIcon ? "" : "assets/sun.ico");
              },
            );
          },
        ),
      ],
    ),
    MenuItemCheckbox(
      label: "MenuItemCheckbox",
      name: "MenuItemCheckbox name",
      checked: true,
      onClicked: (menuItem) async {
        await menuItem.setCheck(!menuItem.checked);
      },
    ),
    MenuSeparator(),
    MenuItemLabel(
      label: 'Show',
      image: "assets/icons8-sun-30.BMP",
      onClicked: (menuItem) => appWindow.show(),
    ),
    MenuItemLabel(
      label: 'Hide',
      onClicked: (menuItem) => appWindow.hide(),
    ),
    MenuItemLabel(
      label: 'Exit',
      onClicked: (menuItem) => appWindow.close(),
    ),
  ]);

  // set context menu
  await systemTray.setContextMenu(menu);

  // handle system tray event
  systemTray.registerSystemTrayEventHandler((eventName) {
    debugPrint("eventName: $eventName");
    if (eventName == kSystemTrayEventClick) {
      Platform.isWindows ? appWindow.show() : systemTray.popUpContextMenu();
    } else if (eventName == kSystemTrayEventRightClick) {
      Platform.isWindows ? systemTray.popUpContextMenu() : appWindow.show();
    }
  });
}

void main() {
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Timer? timer;
  bool _hasIcon = true;
  void closeIconFlash() {
    timer?.cancel();
    systemTray
        .setImage(Platform.isWindows ? "assets/sun.ico" : "assets/sun.JPG");
    _hasIcon = true;
  }

  void iconFlash() {
    timer = Timer.periodic(
      const Duration(milliseconds: 300),
      (timer) async {
        if (_hasIcon) {
          await systemTray.setImage(
            Platform.isWindows ? "assets/ .ico" : "assets/sun.JPG",
          );
        } else {
          await systemTray.setImage(
            Platform.isWindows ? "assets/sun.ico" : "assets/sun.JPG",
          );
        }
        _hasIcon = !_hasIcon;
        setState(() {});
      },
    );
  }

  @override
  void initState() {
    super.initState();
    initSystemTray();
  }

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          child: Stack(
            children: [
                  Lottie.asset(
                    'assets/147963-high-five.json',
                    width: 100,
                    height: 100,
                  ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Padding(
                    padding: EdgeInsets.all(10),
                  ),
                  const Text("Desktop tray"),
                  const Padding(
                    padding: EdgeInsets.all(10),
                  ),
                  TextButton(
                    onPressed: () {
                      iconFlash();
                    },
                    child: const Text("Start Desktop Tray Icon Spalsh"),
                  ),
                  TextButton(
                    onPressed: () {
                      closeIconFlash();
                    },
                    child: const Text("Close Desktop Tray Icon Spalsh"),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}