Qt6自定义QML控件的方式

简介: Qt6自定义QML控件的方式

简单修改样式


有时,您希望为UI的特定部分创建“一次性”外观,并在其他地方使用完整的样式。


例如,也许你不满意基本款式的纽扣有正方形的角。要使它们圆角,可以覆盖背景项并设置矩形的半径属性:

import QtQuick
import QtQuick.Controls
ApplicationWindow {
    width: 400
    height: 400
    visible: true
    Button {
        id: button
        text: "A Special Button"
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            color: button.down ? "#d6d6d6" : "#f6f6f6"
            border.color: "#26282a"
            border.width: 1
            radius: 4
        }
    }
}


注意:由于在任何给定样式中组成控件的不同项被设计为一起工作,因此可能有必要重写其他项以获得您想要的外观。


在多个地方使用自定义样式


如果您计划在多个位置使用圆角按钮,那么第二种创建按钮的方法是很好的。它涉及到将代码移动到项目中自己的QML文件中。对于这种方法,我们将从Basic样式的Button.qml中复制背景代码。该文件可以在Qt安装的以下路径中找到:

$QTDIR/qml/QtQuick/Controls/Basic/Button.qml

这样做之后,我们将简单地添加以下行:

radius: 4


为了避免与模块本身中的控件混淆,我们将该文件命名为MyButton.qml。要在应用程序中使用该控件,请通过其文件名引用它:

import QtQuick.Controls
ApplicationWindow {
    MyButton {
        text: qsTr("A Special Button")
    }
}


子文件夹的方式


首先,像上面一样复制一个现有文件,但是这次,将其放入项目中名为controls的子文件夹中。要使用该控件,首先将文件夹导入命名空间:

import QtQuick.Controls
import "controls" as MyControls
ApplicationWindow {
    MyControls.Button {
        text: qsTr("A Special Button")
    }
}


由于现在有了MyControls命名空间,因此可以在Qt Quick controls模块中以控件的实际对应项命名控件。您可以对希望添加的任何控件重复此过程。


这三种方法的另一个好处是不需要从头开始实现模板。


注意:这里提到的三种方法不适用于自定义附加的ToolTip,因为它是内部创建的共享项。若要对工具提示进行一次性自定义,请参阅自定义工具提示。若要自定义附加的工具提示,必须将其作为您自己样式的一部分提供。


创建自定义风格


有几种方法可以创建自己的风格。下面,我们将解释各种方法。在Qt Quick Controls中,样式本质上是单个目录中的一组QML文件。一个可用的样式有四个要求:


  • 必须存在至少一个名称与控件匹配的QML文件(例如Button.qml)。
  • 每个QML文件必须包含来自QtQuick的相关类型。模板作为根项导入。例如Button.qml必须包含一个Button模板作为它的根项。如果我们使用QtQuick。控件导入,就像我们在前一节中所做的那样,它将不起作用:我们正在定义的控件将尝试从自身派生。
  • qmldir文件必须与QML文件一起存在。下面是一个简单的qmldir文件的例子,它提供了一个按钮:
module MyStyle
Button 2.15 Button.qml

如果使用编译时样式选择,qmldir还应该导入回退样式:

# ...
import QtQuick.Controls.Basic auto


这也可以用于运行时样式选择,而不是使用QQuickStyle::setFallbackStyle()。这种样式的目录结构是这样的:

MyStyle
├─── Button.qml
└─── qmldir


  • 这些文件必须位于可通过QML导入路径找到的目录中。


例如,如果上面提到的MyStyle目录的路径是/home/user/MyApp/MyStyle,那么/home/user/MyApp必须添加到QML导入路径中。To useMyStyle in MyApp, refer to it by name:

./MyApp -style MyStyle


样式名称必须与样式目录的大小写匹配;不支持传入mystyle或mystyle。


默认情况下,样式系统使用Basic样式作为未实现控件的备用样式。要自定义或扩展任何其他内置样式,可以使用QQuickStyle指定不同的回退样式。


这意味着您可以为自定义样式实现尽可能多的控件,并将它们放置在几乎任何地方。它还允许用户为您的应用程序创建自己的样式。

相关文章
|
2月前
(8)Qt中的自定义信号
本文介绍了如何在Qt框架中创建和使用自定义信号,并通过一个父子窗口切换的示例来展示自定义信号的实现和应用。
89 3
(8)Qt中的自定义信号
|
2月前
(7)Qt中的自定义槽(函数)
这篇文章介绍了在Qt中如何定义和使用自定义槽函数,包括类成员函数、静态类成员函数、全局函数和lambda表达式作为槽函数的示例,以及使用lambda表达式时的注意事项。
58 2
(7)Qt中的自定义槽(函数)
|
4月前
|
前端开发 程序员 API
【Qt】控件介绍
【Qt】控件介绍
|
4月前
|
搜索推荐 C++
【Qt 学习笔记】Qt窗口 | 对话框 | 创建自定义对话框
【Qt 学习笔记】Qt窗口 | 对话框 | 创建自定义对话框
101 4
|
4月前
|
容器
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Group Box的使用及说明
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Group Box的使用及说明
306 3
|
4月前
|
存储
【Qt 学习笔记】Qt常用控件 | 多元素控件 | Table Widget的说明及介绍
【Qt 学习笔记】Qt常用控件 | 多元素控件 | Table Widget的说明及介绍
257 3
|
4月前
|
索引
【Qt 学习笔记】Qt常用控件 | 多元素控件 | List Widget的说明及介绍
【Qt 学习笔记】Qt常用控件 | 多元素控件 | List Widget的说明及介绍
448 3
|
4月前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 空白项Spacer
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 空白项Spacer
182 2
|
4月前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 表单布局Form Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 表单布局Form Layout
96 2
|
4月前
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout
371 2

相关实验场景

更多