想象风格

“Imagine”风格基于可配置的图像资源。更多...

关联属性

• path: 字符串

详细说明

“Imagine”样式基于图像资源。该样式自带一组默认图像，但您可以通过提供一个遵循预定义命名规范的图像目录来轻松更换这些图像。

采用默认图片的“Imagine”样式

若要运行采用 Imagine 样式的应用程序，请参阅《Qt Quick Controls 》中的“使用样式”部分。

文件名

图像文件的命名遵循以下规则：

<control>-<element>-<states>

<control> 和<element> 部分是必填的，但<states> 部分是可选的。例如，如果为Button 提供了一个名为"button-background.9.png" 的文件，该文件将用于Button 支持的所有状态。开发者可以自行决定为哪些状态提供图片。 不过，建议尽可能为最常见的控件状态提供图片，例如disabled 、pressed 等。这样可以确保交互式控件在视觉上的表现符合最终用户的预期。

元素参考

下表列出了每个控件支持的元素，以及该元素的可能状态和所需的文件扩展名。元素是指代表控件特定视觉部分的图像。例如，Button 的"background" 元素代表其background 。

资源示例

下表列出了所有控件的资源示例（摘自默认的“Imagine”样式资源）。由于并非所有元素都需要资源，因此该列表并非详尽无遗，但可作为您创建自有资源时的参考指南。

这些资产所导出的模板可作为Sketch 项目获取。

¹一张1x1的单色图像，被拉伸以填满控件。

9-Patch 图像

“Imagine”样式使用9-Patch图像，以便让设计师能够控制特定元素在调整大小时的响应方式。以下是一个9-Patch图像的示例，它表示Button 的background ，旁边是其放大版本（以便更清楚地看到9-Patch分隔线）：

该图像的内容宽 44 像素，高 32 像素。每个 9-patch 图像都需要在每边周围添加一条 1 像素宽的线（统称为“9-patch 线”），因此图像的实际尺寸变为宽 46 像素、高 34 像素。 请注意，无论图像的目标 DPI 是多少，9-patch 线条的宽度都必须为 1 像素。例如，button-background.9.png 和 button-background@2x.9.png 的 9-patch 线条都必须为 1 像素宽。

9-patch 边框必须为黑色，其余区域必须为透明或白色：

可拉伸区域

顶部和左侧边缘的 9-patch 线条决定了图像在调整大小时哪些部分会被拉伸。

以下是9-patch图像按不同比例调整为原尺寸1.5倍时的示例：

请注意，圆角部分保持了原始大小，因为它们位于这些线条的范围之外。

填充区域

右侧和底部边缘的9-patch线条决定了控件的contentItem 可用的空间大小，这意味着它也可以被视为控制着padding 。有关填充的示意图，请参见Control Layout 。

下面是更多关于9-patch图像调整大小的示例，但这次将演示填充9-patch线是如何起作用的。

contentItem 可以在阴影区域内占据所需的空间。如果省略填充线，contentItem 将占据所需空间，但不会超出可拉伸区域。

内嵌区域

在某些情况下，控件需要添加阴影效果，例如。但是，如果我们向上面的按钮添加阴影，这会影响其大小，从而给布局以及鼠标/触摸输入边界带来问题。

内边距区域通过告知控件，9-patch 图像的特定区域应位于控件外部，从而解决了这一问题：

在下图中，虚线代表按钮的可点击区域，以及它在布局中占用的空间。阴影则由其后面的条纹区域标出：

导出 9-Patch 图像

可以使用各种矢量和位图编辑器来创建适用于 Imagine 样式的 9-Patch 图像。以下各节简要介绍了每种编辑器的导出过程，最后一节则说明了如何确保导出的图像符合 9-Patch 规范。

Affinity Designer

请参阅 Affinity的“导出设置”文档。

Adobe Illustrator

请参阅 Adobe 的“资源导出”面板文档。

Adobe Photoshop

请参阅 Adobe 的“从图层生成图像资源”文档。

Inkscape

可使用Inkscape 9-Patch 导出扩展来通过 Inkscape 导出资源。

Sketch

请参阅 Sketch的“导出”文档。

Qt Quick Controls 还提供了一个 Sketch插件，可在资源导出后自动修正 9-patch 线的粗细。要安装此文件，请双击它。一旦 Sketch 确认 9-patch 导出插件已安装，该插件将在导出图像时自动进行处理。

修复 9-Patch 线条

在导出多种 DPI 变体（@2x 、@3x 等）的 9-patch 图像时，9-patch 线条通常会随图像一起被放大。 有多种方法可以解决此问题，但最简单的方法可能是使用ImageMagick 的 mogrify工具。该工具具有-shave 功能，可用于裁剪图像以减小 9-patch 线的粗细：

mogrify -shave 1x1 -path path/to/images *@2x.9.png
mogrify -shave 2x2 -path path/to/images *@3x.9.png
mogrify -shave 3x3 -path path/to/images *@4x.9.png

常规DPI的图像（即没有@Nx 前缀的图像）不受此影响，因此只需对 intended for high DPI displays 的图像运行该命令即可。

动画图像

“Imagine”样式支持WebP和GIF动画图像格式。

自定义

路径

“Imagine”样式允许自定义用于选择图像资源的路径。 该路径可针对任何窗口或控件进行指定，并会像fonts 一样自动传递给子元素。在下面的示例中，窗口和所有三个单选按钮均显示深色图像资源（位于“qrc:/themes/dark”中的文件）。

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Imagine

ApplicationWindow {
    visible: true

    Imagine.path: "qrc:/themes/dark"

    Column {
        anchors.centerIn: parent

        RadioButton { text: qsTr("Small") }
        RadioButton { text: qsTr("Medium"); checked: true }
        RadioButton { text: qsTr("Large") }
    }
}

除了在 QML 中指定路径外，还可以通过环境变量或在配置文件中指定路径。在 QML 中指定的属性优先于所有其他方法。

配置文件

[Imagine]
Path=:/imagine-assets

[Imagine]
Path=imagine-assets

有关配置文件的更多详细信息，请参阅《Qt Quick Controls 配置文件》。

环境变量

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

有关支持的环境变量的完整列表，请参阅 Qt Quick Controls 中的“支持的环境变量”。

调色板

Imagine 样式支持通过palette 属性以及qtquickcontrols2.conf文件自定义配色方案。 与其他样式一样，Imagine样式使用的具体palette roles 取决于样式本身。不过，由于控件的大部分视觉外观（例如背景）是通过图像资源管理的，因此只有通常用于文本的 才会产生影响。

字体

可以通过font 属性及配置文件设置自定义字体。

依赖关系

必须单独导入 Imagine 样式，才能使用 Imagine 样式特有的属性。需要注意的是，无论是否引用了 Imagine 样式，相同的应用程序代码在任何其他样式下均可运行。Imagine 特有的属性仅在应用程序以 Imagine 样式运行时才生效。

如果将 Imagine 样式导入到一个始终加载的 QML 文件中，则必须将 Imagine 样式与应用程序一同部署，这样无论应用程序使用哪种样式运行，都能正常运行。通过使用文件选择器，可以在不与样式建立硬依赖关系的情况下应用特定于样式的调整。

另请参阅 样式设置Qt Quick Controls

附加属性文档

此附加属性保存了图像资源的路径……

Button {
    Imagine.path: "qrc:/themes/dark"
}

相关信息

• 样式Qt Quick Controls
• 汽车示例