Flutter桌面容器管理插件desktop_docker的使用

Flutter桌面容器管理插件desktop_docker的使用

使用

用户控制器用于控制docker

DockController<FileType> dockController = DockController<FileType>(dockerItems, _onDockerItemClicked);

Docker图标列表

  • 将您的docker图标资产放入 "assets/icons/" 文件夹，并仅使用资产名称；
  • 使用png图像。
var dockerItems = [
  DockItem("视频播放器", FileType.CALCULATOR, true, 'ic_calculator'),
  DockItem("PDF阅读器", FileType.GAME, true, 'ic_game'),
  DockItem("HTML阅读器", FileType.FOLDER, true, 'folder'),
  DockItem("文件树应用", FileType.PAINTER, true, 'ic_paint'),
];

使用枚举定义fileType

enum FileType {
  FOLDER,
  CALCULATOR,
  PAINTER,
  GAME,
}

使用Dock小部件

Dock(controller: dockController);

完整示例代码

import 'package:desktop_docker/desktop_docker.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  // 将您的docker图标资产放入 "assets/icons/" 文件夹，并仅使用资产名称
  var dockerItems = [
    DockItem("视频播放器", FileType.CALCULATOR, true, 'ic_calculator'),
    DockItem("PDF阅读器", FileType.GAME, true, 'ic_game'),
    DockItem("HTML阅读器", FileType.FOLDER, true, 'folder'),
    DockItem("文件树应用", FileType.PAINTER, true, 'ic_paint'),
  ];

  late DockController<FileType> dockController;

  // 当点击docker项目时触发的动作
  _onDockerItemClicked(DockItem item) {
    // TODO: 处理项目点击事件
    print(item.fileType);
  }

  [@override](/user/override)
  void initState() {
    dockController = DockController<FileType>(dockerItems, _onDockerItemClicked);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        children: [
          // 背景壁纸
          SizedBox(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Image.asset(
              "assets/images/bg.png",
              fit: BoxFit.fill,
            ),
          ),

          // 桌面主体内容
          SizedBox(height: size.height, width: size.width),

          // Docker小部件
          Positioned(
              bottom: 20,
              left: 0,
              right: 0,
              child: Center(
                  child: Dock(controller: dockController,)
              )),
        ],
      ),
    );
  }
}

// 枚举定义fileType
enum FileType {
  FOLDER,
  CALCULATOR,
  PAINTER,
  GAME,
}

更多关于Flutter桌面容器管理插件desktop_docker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter桌面容器管理插件desktop_docker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


desktop_dock 是一个用于 Flutter 桌面应用开发的插件，它允许你在 macOS 和 Windows 上创建和操作 Dock 或任务栏图标。这个插件可以帮助你实现一些与桌面环境交互的功能，比如在 Dock 或任务栏中显示应用图标、添加菜单项、显示通知等。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 desktop_dock 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  desktop_dock: ^0.1.0  # 请根据实际情况选择最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

1. 初始化插件

在使用 desktop_dock 之前，你需要先初始化它。通常你可以在 main.dart 中的 main 函数中进行初始化：

import 'package:flutter/material.dart';
import 'package:desktop_dock/desktop_dock.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await DesktopDock.initialize();
  runApp(MyApp());
}

2. 设置 Dock 图标

你可以使用 DesktopDock.setIcon 方法来设置 Dock 图标。例如：

import 'package:flutter/material.dart';
import 'package:desktop_dock/desktop_dock.dart';

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Desktop Dock Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              await DesktopDock.setIcon('assets/icon.png');
            },
            child: Text('Set Dock Icon'),
          ),
        ),
      ),
    );
  }
}

3. 添加 Dock 菜单项

你可以使用 DesktopDock.addMenuItem 方法来添加 Dock 菜单项。例如：

import 'package:flutter/material.dart';
import 'package:desktop_dock/desktop_dock.dart';

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Desktop Dock Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              await DesktopDock.addMenuItem(
                label: 'Open Settings',
                callback: () {
                  print('Settings opened');
                },
              );
            },
            child: Text('Add Menu Item'),
          ),
        ),
      ),
    );
  }
}

4. 显示 Dock 通知

你可以使用 DesktopDock.showNotification 方法来在 Dock 中显示通知。例如：

import 'package:flutter/material.dart';
import 'package:desktop_dock/desktop_dock.dart';

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Desktop Dock Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              await DesktopDock.showNotification(
                title: 'New Message',
                body: 'You have a new message!',
              );
            },
            child: Text('Show Notification'),
          ),
        ),
      ),
    );
  }
}
回到顶部