自定义控件

有时您可能想为 UI 的特定部分创建一个“一次性”的外观，并在其他地方使用完整样式。也许你对正在使用的样式很满意，但有一个按钮有一些特殊的意义。

创建此按钮的第一种方法是直接在其需要的地方定义它。例如，如果你对默认样式的按钮有方形角落不满意。要将其变圆滑，可以覆盖 背景 项，并设置矩形的半径属性

import QtQuick 2.15
import QtQuick.Controls 2.15
Rectangle {
    id: root
    color: "#d7d1df"
    readonly property int leftMargin: 10
    readonly property int rowSpacing: 14
    Button {
        id: button
        text: qsTr("A Special Button")
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            color: button.down ? "#d6d6d6" : "#f6f6f6"
            radius: 4
        }
    }
}

如果计划在多个地方使用上述按钮，第二种创建按钮的方法很好。

为此方法，您必须创建一个包含以下内容的 MyButton.qml 文件

import QtQuick 2.15
import QtQuick.Controls 2.15
Button {
    id: btn
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        color: btn.down ? "#d6d6d6" : "#f6f6f6"
        radius: 4
    }
}

要在您的应用程序中使用控件，请通过其文件名引用它

Item{
    Rectangle {
        id: root
        color: "#d7d1df"
        readonly property int leftMargin: 10
        readonly property int rowSpacing: 14
        MyButton {
            id: button
            text: qsTr("A Special Button")
        }
    }
}

创建按钮的第三种方法在文件系统中的位置和 QML 中的使用方面都有点更结构化。根据上述方法创建文件，但这次将其命名为 Button.qml 并将其放入项目中名为（例如）controls 的子文件夹中。要使用控件，首先将文件夹导入到名称空间中

import QtQuick 2.15
import QtQuick.Controls 2.15
import "controls" as MyControls
Rectangle {
    id: root
    color: "#d7d1df"
    readonly property int leftMargin: 10
    readonly property int rowSpacing: 14
    MyControls.Button {
        id: button
        text: qsTr("A Special Button")
    }
}

现在您有了 MyControls 命名空间，您可以根据 Qt Quick Controls 模块中的实际对应控件给控件命名。您可以为此过程添加任何控件。

创建自定义样式

Qt Quick Ultralite 一般遵循 Qt Quick 定义自定义样式的做法。

Qt6 和 Qt Quick Ultralite 之间的样式差异

• Qt Quick Ultralite 当前仅提供默认样式。
• Qt Quick Ultralite 仅支持编译时样式。
• 用于定义已使用样式的默认控件位于 QtQuick.Templates。
• QUL_CONTROLS_STYLE CMake 目标属性必须设置为您的自定义样式模块的 uri
• 样式模块必须与应用程序的 CMake 目标链接

控件默认样式

要使用控件的默认样式，请按以下步骤操作

• 将 `Qul::Controls` 库链接到您的 CMake 项目（请参阅：target_link_libraries）。
• 在 .qml 文件中导入 QtQuick.Controls。

控件的自定义样式

要创建控件的自定义样式，请按照以下步骤操作

• 根据QtQuick.Templates实现样式组件。

  Templates模块中的组件具有有用的基线功能，并使创建与默认样式控件可互换的组件更容易。

• 为自定义样式创建一个QML模块。

  该模块由.qml/.h源文件和生成的文件，一个qmldir文件和一个库组成。示例

  MyControlsStyle.a
  MyControlsStyle/
  MyControlsStyle/qmldir
  MyControlsStyle/Button.qml (source file)
  MyControlsStyle/Button.h (generated file from qmltocpp)
  MyControlsStyle/Helper.h (source file)
  MyControlsStyle/Helper.qml (generated file from qmlinterfacegenerator)
  ...

要使用控件的自定义样式

• 将您的自定义样式库链接到CMake项目（见：target_link_libraries）。
• 确保自定义样式QML模块包含在包含路径中（见：target_include_directories）。

  请注意，它应设置为包含模块目录的路径，而不是包含qmldir文件的路径。如果您有<path>/My/Style/qmldir并希望模块uri为My.Style，则设置包含路径为<path>。

• 将MCU.Config.controlsStyle QmlProject属性设置为您的自定义样式模块的uri，使其提供QtQuick.Controls。

  在上面的示例中，将使用QUL_CONTROLS_STYLE=My.Style。

• 在 .qml 文件中导入 QtQuick.Controls。

请参阅“样式”示例以获取参考。