想象风格

Imagine 风格基于可配置的图像资产。更多

附加属性

• path: string

详细描述

Imagine 风格基于图像资产。该样式自带一组默认图片，但只要提供一个使用预定义命名规则的图片目录，就能轻松更改图片。

带有默认图片的 Imagine 风格

要使用 Imagine 样式运行应用程序，请参阅在Qt Quick 控件中使用样式。

文件名

图像文件使用以下约定命名：

<control>-<element>-<states>

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

元素参考

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

资产示例

下表列出了所有控件的资产示例（取自默认 Imagine 风格资产）。该列表并非详尽无遗，因为并非所有元素都需要资产，但在创建您自己的资产时，该列表可用作指南。

从这些资产导出的模板可作为Sketch 项目使用。

¹包含一种颜色的 1x1 图像，拉伸后填充控件。

9 补丁图像

Imagine 风格使用9 补丁图像，以便让设计人员控制特定元素在调整大小后的反应。下面是一个 9 补丁图像的示例，表示Button'sbackground ，以及一个放大版本（以便更容易看到 9 补丁线）：

图片内容宽 44 像素，高 32 像素。每幅 9 补丁图像的每边都需要一条 1 像素粗的线（统称为 "9 补丁线"），因此图像的实际大小为宽 46 像素、高 34 像素。请注意，无论图像的目标 DPI 是多少，9 补丁线的厚度都必须是一个像素。例如，button-background.9.png 和 button-background@2x.9.png 的 9 补丁线都必须是一个像素粗。

9 条补丁线必须为黑色，其余区域必须为透明或白色：

可拉伸区域

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

以下是 9 补丁线图像在不同尺寸下被调整为原始尺寸的 1.5 倍的示例：

请注意圆角是如何保持其原始大小的，因为它们在线条范围之外。

填充区域

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

下面是更多调整 9 补丁图像大小的示例，但这次演示的是填充 9 补丁线是如何工作的。

contentItem 可以根据需要在阴影区域内占用尽可能多的空间。如果不使用填充线，contentItem 将在不超出可拉伸区域的情况下占用所需的空间。

嵌入区域

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

内嵌区域可以解决这个问题，它告诉控件，9 补丁图像的某个区域应位于控件之外：

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

导出 9 补丁图像

可以使用各种矢量和位图编辑器来创建适合 Imagine 风格使用的 9 补丁图像。下文将简要介绍每种编辑器的导出过程，最后一节将说明如何确保导出的图像符合 9 补丁格式。

Affinity Designer

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

Adobe Illustrator

请参阅 Adobe 的资产导出面板文档。

Adobe Photoshop

请参见 Adobe 的 "从图层生成图像资产 "文档。

Inkscape

Inkscape 9-Patch 导出扩展可用于使用 Inkscape 导出资产。

草图

请参阅 Sketch 的导出文档。

Qt Quick Controls 还为 Sketch 提供了一个插件，可在导出资产后自动修复 9 补丁线的厚度。要安装该文件，请双击该文件。一旦 Sketch 确认已安装 9 补丁导出插件，该插件将在导出图像时自动处理图像。

修复 9 补丁线

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

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 前缀的图像）不会受到影响，因此只需在用于高 DPI 显示器的图像上运行该命令即可。

动画图片

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 Configuration File。

环境变量

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 控件

附加属性文档

此附加属性保存图像资产的路径...

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

相关信息

• 造型Qt Quick 控制
• 汽车示例