自定义 Qt Quick Controls

自定义 Qt Quick Controls

使用 Qt Quick 编写界面时，使用 Qt Quick Controls（指Qt Quick Controls 2）模块中提供的大量控件，可以快速开发出可用、风格统一的应用界面。

Qt Quick Controls 提供了选择不同控件样式以及自定义控件样式的能力。

选择不同的控件样式

Qt Quick Controls 中已经实现了几种不同的控件样式，如 Material Style, Fusion Style, Imagine Style, Universal Style 以及 Default Style。

软件默认情况下使用 Default Style。

设置软件控件样式的方式包括：

• 调用 QQuickStyle 方法

QQuickStyle::addStylePath(":/styles");
QQuickStyle::setStyle("MyStyle");
QQuickStyle::setFallbackStyle("Material");

以上通过代码 QQuickStyle 设置控件样式的方式，需要在加载 QML 文档之前设置，否则无法生效。

• 向软件传入命令行参数 -style

./myapp -style MyStyle

• 设置环境变量 QT_QUICK_CONTROLS_STYLE=

创建 qtquickcontrols2.conf，并放在 qrc 根目录中。Qt能够识别该文件并读取其中的配置。

以上几种设置方式的优先级由高到低。其中最为推荐的方式是使用 qtquickcontrols2.conf 配置文件来配置控件样式。

需要注意一点，由于软件在查找设置样式的控件源码时，会在资源(qrc)中寻找，所以不是存放定义控件样式的代码文件的目录不要和该样式重名。如设置样式为 Material，在 qrc 中又有一个 :/Material 目录，用来存放一些图片等资源文件，将无法正确加载和设置 Material 样式。

创建自定义控件样式

Qt Quick Controls 的控件由元素以属性结构组成，其中每个元素都可以自定义外观，默认的 QML 元素实现，可以使用自定义元素来替换。

自定义控件

自定义一个控件的方式有多种：

• 直接在使用的地方定义这个控件。

如：需要一个不同于指定样式的 Button。可以在使用 Button 的地方直接重写其 background 属性。

// ...

ApplicationWindow {
  Button {
    id: control
    anchors.centerIn: parent
    text: "click"
    background: Rectangle { // 在 Button 使用的地方，重写了其 background 属性。
      implicitWidth: 80
      implicitHeight: 30
      color: control.down ? "grey" : "white"
    }
  }
}

// ...

• 将自定义控件放到独立的QML文档中，然后引入使用。

例如创建一个 MyButton.qml 文件，其放在资源系统中 :/MyButton.qml，则可以直接使用它。

// ...
ApplicationWindow {
  MyButton {
    anchors.centerIn: parent
  }
}
// ...

或者创建一个 Button.qml，然后放入资源系统中的独立目录，如： :/controls 中。则可通过 import 的方式使用。

import "./controls" as MyControls

ApplicationWindow {
  MyControls.Button {
    anchors.centerIn: parent
  }
}

自定义样式

在 Qt Quick Controls 中，样式是一组存在于同一个目录下的QML文件。可用的样式满足以下三个条件：

• 目录中至少存在一个和 Qt Quick Controls 中控件同名的QML文件。

如在Qt资源系统中，自定义样式存放于 :/styles/MyStyle 中，自定义了 Button.qml，其路径为：:/styles/MyStyle/Button.qml。

• 各个QML文件中必须使用与其文件名对应的 QtQuick.Templates 中的模板控件元素作为QML文档的根元素。

如 Button.qml 的内容如下：

import QtQuick.Templates 2.15 as T

T.Button {
  // ...
}

• 这些文件必须能存在于应用的导入路径中。

这些合法路径包括：

• <样式所在文件系统目录中的绝对路径>
• 资源系统中的路径，如：:/styles/MyStyle
• 相对路径，如：./qml/styles/MyStyle
• QQmlEngine::importPathList()中的路径