Qt Quick Controls - 扁平化风格

“扁平化风格”演示了如何将自定义控件集成到Qt Quick Designer中。该示例使用纯QML模块在单例中定义常量。对于UI的声明式部分，使用了.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 项的状态来实现控件的不同状态。其优点在于，我们可以在Qt Quick Designer中定义自定义外观，并能轻松验证控件的不同状态。 要在Qt Quick Designer中编辑开关的指示器，我们可以打开Switch.qml文件，然后使用顶部“打开的文档”下拉列表旁边的下拉列表，进入名为switchHandle 的指示器实现。

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

MainForm.ui.qml仅是对表单的纯声明式定义，而flatstyle.qml则负责实例化表单并实现相关逻辑。

运行示例

您可以通过以下方式运行该示例：

• Qt Creator

  打开“Welcome ”模式，然后从Examples 中选择该示例。有关更多信息，请参阅Qt Creator ：教程：构建和运行。

• Qt Extension for Visual Studio Code

  在Command Palette 目录下执行Qt: Open Qt examples 命令，并从列表中选择该示例。有关更多信息，请参阅Qt Extension for Visual Studio Code ：教程：构建和运行。

示例项目 @ code.qt.io