Qt6自定义QML控件的方式

简单修改样式

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

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

js 复制代码

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安装的以下路径中找到:

bash 复制代码

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

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

js 复制代码

radius: 4

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

js 复制代码

import QtQuick.Controls

ApplicationWindow {
    MyButton {
        text: qsTr("A Special Button")
    }
}

子文件夹的方式

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

js 复制代码

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文件的例子，它提供了一个按钮:

bash 复制代码

module MyStyle
Button 2.15 Button.qml

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

bash 复制代码

# ...
import QtQuick.Controls.Basic auto

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

bash 复制代码

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

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

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

bash 复制代码

./MyApp -style MyStyle

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

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

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