Qt Quick 控件 - 扁平风格

FlatStyle 展示了如何将定制控件集成到Qt Quick Designer 中。该示例使用纯 QML 模块在单例中定义常量。对于用户界面的声明部分，使用了.ui.qml 文件。这些文件可在Qt Quick Designer 中进行可视化编辑。

用于编排的 QML 模块

该示例包含一个名为Theme 的 QML 模块，它由一个同名的 QML 单例组成。为确保 QML 能找到该模块，我们将导入目录添加到main.cpp 引擎的导入路径中。

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

为确保代码模型和Qt Quick Designer 能找到该模块，我们在flatstyle.pro 中添加了以下一行。

QML_IMPORT_PATH = $$PWD/imports

本例中使用的所有颜色、字体参数和大小常量都在名为Theme.qml 的单例中定义为属性。通常情况下，这些属性值被定义为常量，因为它们不会在运行时发生变化。在本例中，我们允许用户在应用程序运行时更改一些属性，如主颜色、大小参数和一些字体参数。

在单例中定义这些属性值可以方便维护和更改。这种模式可轻松实现主题化。

自定义控件的 QML 模块

Flat 模块包含几个控件的样式，这些控件实现了自定义的外观和感觉。该样式在qtquickcontrols2.conf 中被设置为应用程序的样式。

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

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

MainForm.ui.qml只是表单的纯声明式定义，而flatstyle.qml则是表单的实例化和逻辑实现。

运行示例

要从 Qt Creator打开Welcome 模式，然后从Examples 中选择示例。更多信息，请参阅Qt Creator: 教程：构建并运行。

示例项目 @ code.qt.io