Skip to content

UniDesk 控件库概览

UniDesk 是 Uniquenium 内置的 QML 控件库,灵感来源于 LingmoUI,提供了一套现代 Fluent 风格的 UI 控件。使用 UniDesk 可以快速构建外观精美、风格统一的桌面应用界面。

先读术语表

在开始前,建议先阅读 术语表 了解 控件(Control)组件(Component) 的区别。本页面介绍的是「控件」——构成界面的最基础元件。

系统要求

在使用 UniDesk 开发前,请确保你的环境满足以下要求:

依赖最低版本说明
CMake3.25+构建系统
Qt6.5.0+QML 引擎与 Qt Quick(含 Core, Widgets, Quick, QuickControls2 等模块)
ECM最新版Extra CMake Modules
C++ 编译器C++17MSVC 2022 / GCC 13+ / Clang 16+

学习建议

在开始前,建议先阅读 Qt 官方 QML 文档,了解 QML 的基本语法和概念。


开发环境搭建

步骤 1:获取源代码

bash
git clone https://github.com/Uniquenium/Uniquenium.git
cd Uniquenium
git submodule update --init --recursive

步骤 2:配置与编译

bash
# 配置(替换为你的 Qt6 路径)
cmake -B build -DCMAKE_PREFIX_PATH="<你的Qt6安装路径>"

# 编译
cmake --build build --config Release

步骤 3:启动程序

bash
# Windows:
.\build\Release\Uniquenium0.exe --debug

# Linux:
./build/Uniquenium0 --debug

控件库 UniDesk

模块导入

在 QML 文件开头使用以下语句导入 UniDesk 控件:

qml
// 基础模块(全局单例:UniDeskGlobals, UniDeskTools, UniDeskSettings...)
import UniDesk 1.0

// UI 控件模块(按钮、文本、窗口等所有可视化控件)
import UniDesk.Controls 1.0

控件分类

UniDesk 中的内容分为两大类:

类别说明命名模式示例
单例 (Singleton)全局唯一实例,直接通过名字访问属性和方法,用于全局状态与工具任何全局状态/工具UniDeskGlobals, UniDeskTools, UniDeskSettings
控件 (Control)可实例化、可嵌套的可视化 UI 元件,是构建组件的基础UniDesk + 控件名UniDeskButton, UniDeskWindow, UniDeskText

基类已移除

早期版本中曾存在 UniDeskBaseUniDeskWindowBase 等「基类」概念,当前版本已移除基类抽象层。所有控件现在直接继承自 Qt 原生类型(如 ItemRectangleWindow),不再需要通过基类间接继承。如果你在旧文档或代码中看到 bases 相关引用,请以本页面为准。


单例的使用方法

单例是全局唯一对象,不需要实例化,在任何 QML 文件中直接通过名字访问。

qml
import UniDesk 1.0
import UniDesk.Controls 1.0

Item {
    Component.onCompleted: {
        // 直接访问属性
        console.log("当前主题:", UniDeskGlobals.isLight ? "浅色" : "深色")
        console.log("主题色:", UniDeskSettings.primaryColor)
        
        // 直接调用方法
        UniDeskTools.web_browse("https://github.com/Uniquenium")
        var uuid = UniDeskTools.createUuid()
    }
}

通用格式:

qml
<单例名>.<属性名>
<单例名>.<函数名>(参数)

控件的使用方法

可视化控件通过 QML 声明式语法使用,支持属性、信号、嵌套子项。控件既可以单独使用,也可以互相组合构成更复杂的「组件」。

qml
import UniDesk.Controls 1.0

// 父控件
UniDeskWindow {
    id: myWindow
    visible: true
    width: 600
    height: 400
    title: "我的窗口"
    
    // 属性
    tintOpacity: 0.85
    showStayTop: true
    
    // 事件(信号)处理
    onActiveChanged: {
        console.log("窗口激活状态:", active)
    }
    
    // 子控件(嵌套)
    UniDeskButton {
        id: myBtn
        anchors.centerIn: parent
        contentText: "点我"
        iconSource: "qrc:/icon/heart.svg"
        display: Button.TextUnderIcon
        radius: 8
        
        onClicked: {
            myWindow.showSuccess("按钮被点击了!", 3000)
        }
        
        // 嵌套孙控件
        UniDeskTooltip {
            text: "这是一个按钮提示"
        }
    }
}

通用模式:

qml
<控件名> {
    <属性名>: <属性值>
    <信号名>: { /* 处理逻辑 */ }
    <子控件名> { /* ... */ }
}

内置单例速览

单例用途常用内容
UniDeskGlobals全局状态isLight 主题模式,事件通知
UniDeskTools工具函数颜色切换、壁纸操作、字体管理、UUID 生成
UniDeskSettings设置访问primaryColor 主题色,各类配置读写
UniDeskTextStyle预设字体tiny / little / middle / big 四级字号
UniDeskExpr表达式引擎%变量 替换、%{} 数学表达式
UniDeskPluginMgr插件管理插件加载、卸载、元数据管理
UniDeskTempleteMgr模板管理模板导入导出、预设变量
UniDeskComponentsData组件数据组件与页面 JSON 数据持久化
UniDeskComManager组件管理组件注册、创建、销毁
UniDeskSettingsWindow设置窗口程序设置 UI 入口

主题适配最佳实践

UniDesk 所有控件都内置深浅色双主题,但自定义控件时需手动适配

qml
import UniDesk 1.0

Rectangle {
    id: myCard
    width: 200
    height: 120
    radius: 8
    
    // ❌ 错误:硬编码颜色
    // color: "white"
    // border.color: "black"
    
    // ✅ 正确:使用 UniDeskGlobals 动态判断
    color: UniDeskGlobals.isLight 
        ? Qt.rgba(255/255, 255/255, 255/255, 1)
        : Qt.rgba(32/255, 32/255, 32/255, 1)
    
    border.color: UniDeskGlobals.isLight
        ? Qt.rgba(0, 0, 0, 0.1)
        : Qt.rgba(1, 1, 1, 0.1)
    
    // 强调色永远用主题色
    Rectangle {
        width: 4
        height: parent.height
        color: UniDeskSettings.primaryColor
    }
}

如需更精细的颜色控制,使用 UniDeskTools.switchColor()

qml
import UniDesk 1.0

property color textNormalColor: UniDeskGlobals.isLight ? "black" : "white"
property color textHoverColor:  UniDeskGlobals.isLight ? textNormalColor.darker(1.2) : textNormalColor.lighter(1.2)
property color textPressColor:  UniDeskGlobals.isLight ? textNormalColor.darker(1.5) : textNormalColor.lighter(1.5)
property color textDisableColor: "#888888"

property color finalColor: UniDeskTools.switchColor(
    textNormalColor, textHoverColor, textPressColor, textDisableColor,
    hovered, pressed, disabled
)

控件文档索引

根据功能分类查看每个控件的详细 API 文档:

单例 (Singletons)

窗口与容器

按钮控件

输入控件

选择控件

文本与显示

导航与标签

菜单系统

位置与尺寸选择

组件编辑器专用

基础对象


下一步

遵循 CC BY-SA 4.0 协议开源文档。