Flutter桌面UI组件插件desktop_ui的使用

Flutter桌面UI组件插件desktop_ui的使用

Desktop UI

一个用于构建桌面应用的UI组件库。🎉

组件列表

通用组件

  • ✅ 按钮
  • ✅ 图标
  • ✅ 文本样式

布局组件

  • ✅ 网格
  • ⬜️ 布局
  • ✅ 分割线
  • ✅ 空白间距
  • ✅ 单元格
  • ⬜️ 折叠
  • ⬜️ 分割
  • ✅ 卡片

导航组件

  • ⬜️ 固定
  • ⬜️ 锚点
  • ⬜️ 面包屑导航
  • ⬜️ 菜单
  • ⬜️ 步骤指示器
  • ⬜️ 页面
  • ⬜️ 选项卡
  • ⬜️ 下拉菜单

表单组件

  • ⬜️ 输入框
  • ⬜️ 单选按钮
  • ⬜️ 复选框
  • ⬜️ 开关
  • ⬜️ 表格
  • ⬜️ 选择器
  • ⬜️ 自动完成
  • ⬜️ 滑块
  • ⬜️ 日期选择器
  • ⬜️ 时间选择器
  • ⬜️ 级联选择器
  • ⬜️ 数据传输
  • ⬜️ 数字输入
  • ✅ 评分
  • ⬜️ 文件上传
  • ⬜️ 颜色选择器
  • ⬜️ 表单
  • ⬜️ 提及
  • ⬜️ 树形选择器

动作反馈组件

  • ✅ 警告框
  • ⬜️ 消息提示
  • ⬜️ 通知
  • ⬜️ 模态框
  • ⬜️ 抽屉面板
  • ⬜️ 确认框
  • ⬜️ 加载指示器

视图展示组件

  • ⬜️ 树形视图
  • ⬜️ 提示框
  • ⬜️ 弹出框
  • ⬜️ 进度条
  • ⬜️ 骨架屏
  • ✅ 头像
  • ✅ 徽章
  • ✅ 标签
  • ⬜️ 轮播图
  • ⬜️ 时间轴
  • ⬜️ 时间
  • ⬜️ 图片
  • ⬜️ 列表
  • ✅ 空状态
  • ⬜️ 统计图表
  • ⬜️ 评论
  • ⬜️ 描述列表
  • ⬜️ 日历

其他组件

  • ⬜️ 返回顶部

使用方法

添加项目依赖

在项目的pubspec.yaml文件中添加以下依赖项:

dependencies:
  desktop_ui: ^latest

安装依赖

运行以下命令以安装依赖包:

flutter pub get

导入库文件

在你的Dart文件中导入以下库:

import 'package:desktop_ui/desktop_ui.dart';

完整示例

示例代码

example/lib/main.dart文件中,你可以看到以下代码:

import 'package:example/home.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:window_manager/window_manager.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 必须添加这一行
  await windowManager.ensureInitialized();
  
  // 只有在调用 `hiddenWindowAtLaunch` 后才能使用
  windowManager.waitUntilReadyToShow().then((_) async {
    // 设置为无边框窗口
    await windowManager.setAsFrameless();
    await windowManager.setSize(const Size(400, 600));
    // await windowManager.setPosition(Offset.zero);
    await windowManager.setHasShadow(true);
    await windowManager.setClosable(true);
    await windowManager.setSkipTaskbar(false);
    // await windowManager.setAlwaysOnTop(true);
    windowManager.show();
  });
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

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

1 回复

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


当然,以下是一个关于如何在Flutter桌面应用中使用desktop_ui插件的简单示例。desktop_ui插件提供了一些专门为桌面应用设计的UI组件,比如AboutDialog

首先,你需要在你的pubspec.yaml文件中添加desktop_ui依赖:

dependencies:
  flutter:
    sdk: flutter
  desktop_ui: ^0.4.0  # 请检查最新版本号

然后运行flutter pub get来获取依赖。

接下来,在你的Flutter桌面应用中,你可以使用desktop_ui提供的组件。以下是一个简单的示例,展示如何使用AboutDialog组件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Desktop UI Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Desktop UI Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showAboutDialog(
              context: context,
              applicationName: 'My Desktop App',
              applicationVersion: '1.0.0',
              applicationLegalese: '© 2023 My Company',
              children: <Widget>[
                AboutListTile(
                  icon: Icon(Icons.link),
                  title: 'Website',
                  child: Text('https://www.mycompany.com'),
                ),
                AboutListTile(
                  icon: Icon(Icons.email),
                  title: 'Support',
                  child: Text('support@mycompany.com'),
                ),
              ],
            );
          },
          child: Text('Show About Dialog'),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个按钮。当点击按钮时,会显示一个关于对话框,该对话框使用了desktop_ui插件提供的showAboutDialog函数。此外,我们还添加了两个AboutListTile组件来展示额外的信息,如网站和支持电子邮件。

注意,desktop_ui插件中的showAboutDialog函数是对Flutter SDK中showAboutDialog的扩展,它添加了一些专门为桌面应用设计的特性。

请确保你的开发环境已经配置好以支持Flutter桌面应用,比如安装必要的依赖和设置目标平台(Windows、macOS、Linux)。

这个示例应该能帮助你开始在Flutter桌面应用中使用desktop_ui插件。如果你有更具体的需求或问题,欢迎继续提问!

回到顶部