Qt Quick Controls - 扁平风格

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

QML 插件

示例中包含一个名为 "主题 "的插件。该插件由一个 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 项目的状态来实现控件的不同状态。这样做的好处是，我们可以在Qt Quick Designer 中定义自定义外观，而且可以轻松验证控件的不同状态。要在Qt Quick Designer 中编辑开关的指示器，我们可以打开 Switch.qml，然后使用顶部打开文档组合框旁边的组合框输入名为switchHandle 的指示器的实现。

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

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

运行示例

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

示例项目 @ code.qt.io