Qt Quick Controls - 平滑风格

一个使用 Qt Quick Controls 和自定义控件 QML 插件的 QML 应用。

平滑风格 展示了如何将自定义控件集成到 Qt Quick Designer。该示例使用一个纯 QML 插件在单例中定义常量。对于 UI 的声明部分,使用 .ui.qml 文件。这些文件可在 Qt Quick Designer 中进行可视化编辑。

QML 插件

示例包含一个名为 Theme 的插件。该插件由一个 QML 文件 Theme.qml 和一个 qmldir 文件组成。该插件位于 imports 子目录中,并作为资源添加。为确保 QML 能够找到插件,我们在 main.cpp 中将导入目录添加到引擎的导入路径中。

...
engine.addImportPath(":/imports");
...

为确保代码模型和 Qt Quick Designer 可以找到插件,我们在 flatstyle.pro 中添加以下行。

QML_IMPORT_PATH = $$PWD/imports

在此示例中使用的所有颜色、字体参数和尺寸常量均定义在名为 Theme.qml 的单例中。通常此类属性值定义为常量,因为它们在运行时不应改变。在此示例中,我们允许用户在应用程序运行期间更改一些属性,例如主颜色、大小参数和一些字体参数。

在单例中定义这些属性值便于维护和更改。这种模式便于实现主题。

实现自定义控件

该插件还包含几个控件的样式,它们实现了一个自定义的外观和感觉。这个样式位于 Flat 目录,并在 qtquickcontrols2.conf 中将该样式设置为一款应用的主题。

示例使用 Qt Quick Item 的状态实现控件的不同状态。这样做的好处是,我们可以在 Qt Quick Designer 中定义自定义外观,并轻松验证控件的不同状态。要编辑 Qt Quick Designer 中开关的指示器,我们可以打开 Switch.qml,然后在顶部打开文档组合框旁边的组合框中实现名为 switchHandle 的指示器。

该应用程序本身只是一个简单的表单,允许用户调整自定义控件的几个参数。用户可以选择另一主颜色,将字体设置为加粗或下划线,并通过切换开关增加控件的大小。

MainForm.ui.qml 仅是表单的纯声明定义,而 flatstyle.qml 则实现了该表单并实施逻辑。

运行示例

要从 Qt Creator 运行示例,请打开 欢迎模式,然后从 示例 中选择示例。有关更多信息,请参阅 构建和运行示例

示例项目 @ code.qt.io