Imagine风格#

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

附加属性#

  • path :ref:` <Imagine-Style>` : 字符串

详细描述#

Imagine风格基于图像资源。风格包含一组默认图像，但可以通过提供具有预定义命名约定的图像目录轻松更改图像。

../_images/qtquickcontrols-imagine.png

带有默认图像的Imagine风格

要运行具有Imagine风格的程序，请参阅 在Qt Quick Controls中使用风格 .

文件名#

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

<控件>-<元素>-<状态>

<控件>和<元素>部分是强制性的，但<状态>部分是可选的。例如，如果为按钮提供了一个名为“button-background.9.png”的单个文件，它将用于按钮支持的每个状态。开发人员需要决定他们将为哪些状态提供图像。不过，建议尽可能提供图像以供最常用的控件状态使用，例如禁用状态、按下状态等。这将确保交互式控件在视觉上表现为最终用户所期望的方式。

元素参考#

下表列出了每个控件支持哪些元素，以及该元素的可能状态，以及它期望的文件扩展名。元素是代表控件某特定视觉部分的图像。例如，按钮的“background”元素表示其背景。

控件

元素

状态

扩展名

ApplicationWindow

background

active

.9.png（或.png）

BusyIndicator

animation

disabled, running, mirrored, hovered

.webp

background

与上面相同

.webp

Button

background

disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered

.9.png

CheckBox

background

disabled, pressed, checked, partially-checked, focused, mirrored, hovered

.9.png（或.png）

indicator

与上面相同

.png

CheckDelegate

background

disabled, pressed, checked, partially-checked, focused, highlighted, mirrored, hovered

.9.png（或.png）

indicator

与上面相同

.png

ComboBox

background

disabled, pressed, editable, open, focused, mirrored, hovered, flat

.9.png（或.png）

indicator

与上面相同

.png

popup

与上面相同

.9.png（或.png）

DelayButton

background

disabled, pressed, checked, checkable, focused, mirrored, hovered

.9.png（或.png）

progress

与上面相同

.9.png（或.png）

mask

与上面相同

.9.png（或.png）

Dial

background 1

disabled, pressed, focused, mirrored, hovered

.9.png（或.png）

handle

与上面相同

.9.png（或.png）

Dialog

background

modal, dim

.9.png（或.png）

title

与上面相同

.9.png（或.png）

overlay

modal

.9.png（或.png）

DialogButtonBox

background

禁用，镜像

.9.png（或.png）

抽屉

background

模态，暗色，顶部，左侧，右侧，底部

.9.png（或.png）

overlay

modal

.9.png（或.png）

框架

background

禁用，镜像

.9.png（或.png）

分组框

background

禁用，镜像

.9.png（或.png）

title

与上面相同

.9.png（或.png）

项目代理

background

禁用，按下，聚焦，突出显示，镜像，悬停

.9.png（或.png）

标签

background

禁用，镜像，悬停

.9.png（或.png）

菜单

background

modal, dim

.9.png（或.png）

overlay

modal

.9.png（或.png）

菜单项

箭头

禁用，按下，选中，聚焦，突出显示，镜像，悬停

.png

background

与上面相同

.9.png（或.png）

indicator

与上面相同

.png

菜单分隔符

background

禁用，镜像

.9.png（或.png）

分隔符

与上面相同

.9.png（或.png）

页面

background

禁用，镜像

.9.png（或.png）

页面指示器

background

禁用，镜像，悬停

.9.png（或.png）

代理

禁用，按下，当前，镜像，悬停

.png

面板

background

禁用，镜像

.9.png（或.png）

弹出

background

modal, dim

.9.png（或.png）

overlay

modal

.9.png（或.png）

进度条

animation

禁用，镜像，悬停

.png

background

禁用，不确定，镜像，悬停

.9.png（或.png）

mask

与上面相同

.9.png（或.png）

progress

与上面相同

.9.png（或.png）

单选按钮

background

禁用，按下，选中，聚焦，镜像，悬停

.9.png（或.png）

indicator

与上面相同

.png

单选代理

background

禁用，按下，选中，聚焦，突出显示，镜像，悬停

.9.png（或.png）

indicator

与上面相同

.png

范围滑块

background

垂直，水平，禁用，聚焦，镜像，悬停

.9.png（或.png）

范围滑块

progress

与上面相同

.9.png（或.png）

handle

第一个，第二个，垂直，水平，禁用，按下，聚焦，镜像，悬停

.png

圆角按钮

background

disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered

.9.png（或.png）

滚动条

background

垂直，水平，禁用，交互式，按下，镜像，悬停

.9.png（或.png）

handle

与上面相同

.9.png（或.png）

滚动指示器

background

垂直，水平，禁用，镜像，悬停

.9.png（或.png）

handle

与上面相同

.9.png（或.png）

滚动视图

background

禁用，镜像

.9.png（或.png）

滑动条

background

垂直，水平，禁用，按下，聚焦，镜像，悬停

.9.png（或.png）

handle

与上面相同

.9.png（或.png）

progress

与上面相同

.9.png（或.png）

数字输入框

background

禁用，可编辑，聚焦，镜像，悬停

.9.png（或.png）

编辑器

禁用，聚焦，镜像，悬停

.9.png（或.png）

indicator

上，下，禁用，可编辑，按下，聚焦，镜像，悬停

.9.png（或.png）

堆叠视图

background

禁用，镜像

.9.png（或.png）

滑动代理

background

禁用，按下，聚焦，突出显示，镜像，悬停

.9.png（或.png）

滑动视图

background

垂直，水平，禁用，交互式，聚焦，镜像

.9.png（或.png）

开关

background

禁用，按下，选中，聚焦，镜像，悬停

.9.png（或.png）

handle

与上面相同

.9.png（或.png）

indicator

与上面相同

.9.png（或.png）

开关代理

background

禁用，按下，选中，聚焦，突出显示，镜像，悬停

.9.png（或.png）

handle

与上面相同

.9.png（或.png）

indicator

与上面相同

.9.png（或.png）

标签栏

background

禁用，头部，尾部，镜像

.9.png（或.png）

标签按钮

background

禁用，按下，选中，聚焦，镜像，悬停

.9.png（或.png）

多行文本区域

background

禁用，聚焦，镜像，悬停

.9.png（或.png）

文本框

background

禁用，聚焦，镜像，悬停

.9.png（或.png）

工具栏

background

禁用，头部，尾部，镜像

.9.png（或.png）

工具按钮

background

disabled, pressed, checked, checkable, focused, highlighted, flat, mirrored, hovered

.9.png（或.png）

工具分隔符

background

垂直，水平，禁用，镜像

.9.png（或.png）

分隔符

与上面相同

.9.png（或.png）

工具提示

background

.9.png（或.png）

旋转按钮

background

禁用，聚焦，镜像，悬停

.9.png（或.png）

注释

1）Imagine样式旋转按钮尚不支持在Qt 6.6中引入的起始角度和结束角度属性，而是使用固定的背景图像。

资产示例#

以下表格列出了所有控件的资产示例（从默认Imagine样式资产中获取）。此列表并非详尽无遗，因为并非所有元素都需要资产，但它可以作为创建您自己的资产的指南。

这些资产是从以下Sketch项目导出的模板。

控件

元素

状态

资产

说明

ApplicationWindow

background

 ../_images/applicationwindow-background.png

查看脚注 1

overlay

 ../_images/applicationwindow-overlay.png

查看脚注 1

overlay

modal

 ../_images/applicationwindow-overlay-modal.png

查看脚注 1

Button

background

 ../_images/button-background.9.png

background

禁用

 ../_images/button-background-disabled.9.png

background

聚焦

 ../_images/button-background-focused.9.png

background

按下

 ../_images/button-background-pressed.9.png

background

选中

 ../_images/button-background-checked.9.png

background

选中，禁用

 ../_images/button-background-checked-disabled.9.png

background

选中，聚焦

 ../_images/button-background-checked-focused.9.png

background

选中，悬停

 ../_images/button-background-checked-hovered.9.png

background

突出显示

 ../_images/button-background-highlighted.9.png

background

突出显示，禁用

 ../_images/button-background-highlighted-disabled.9.png

background

突出显示，聚焦

 ../_images/button-background-highlighted-focused.9.png

background

突出显示，悬停

 ../_images/button-background-highlighted-hovered.9.png

background

突出显示，按下

 ../_images/button-background-highlighted-pressed.9.png

background

突出显示，选中

 ../_images/button-background-highlighted-checked.9.png

background

悬停

 ../_images/button-background-hovered.9.png

background

平铺

 ../_images/button-background-flat.9.png

background

平铺，禁用

 ../_images/button-background-flat-disabled.9.png

background

平铺，悬停

 ../_images/button-background-flat-hovered.9.png

background

平铺，按下

 ../_images/button-background-flat-pressed.9.png

background

平铺，选中

 ../_images/button-background-flat-checked.9.png

CheckBox

indicator

 ../_images/checkbox-indicator.png

indicator

禁用

 ../_images/checkbox-indicator-disabled.png

indicator

按下

 ../_images/checkbox-indicator-pressed.png

indicator

选中

 ../_images/checkbox-indicator-checked.png

indicator

选中，按下

 ../_images/checkbox-indicator-checked-pressed.png

indicator

选中，悬停

 ../_images/checkbox-indicator-checked-hovered.png

indicator

选中，聚焦

 ../_images/checkbox-indicator-checked-focused.png

indicator

部分选中

 ../_images/checkbox-indicator-partially-checked.png

indicator

部分选中，按下

 ../_images/checkbox-indicator-partially-checked-pressed.png

indicator

部分选中，聚焦

 ../_images/checkbox-indicator-partially-checked-focused.png

indicator

部分选中，悬停

 ../_images/checkbox-indicator-partially-checked-hovered.png

indicator

聚焦

 ../_images/checkbox-indicator-focused.png

indicator

悬停

 ../_images/checkbox-indicator-hovered.png

CheckDelegate

background

 ../_images/checkdelegate-background.9.png

background

禁用

 ../_images/checkdelegate-background-disabled.9.png

background

按下

 ../_images/checkdelegate-background-pressed.9.png

background

聚焦

 ../_images/checkdelegate-background-focused.9.png

background

悬停

 ../_images/checkdelegate-background-hovered.9.png

indicator

 ../_images/checkdelegate-indicator.png

indicator

禁用

 ../_images/checkdelegate-indicator-disabled.png

indicator

按下

 ../_images/checkdelegate-indicator-pressed.png

indicator

选中

 ../_images/checkdelegate-indicator-checked.png

indicator

选中，按下

 ../_images/checkdelegate-indicator-checked-pressed.png

indicator

选中，聚焦

 ../_images/checkdelegate-indicator-checked-focused.png

indicator

选中，悬停

 ../_images/checkdelegate-indicator-checked-hovered.png

indicator

聚焦

 ../_images/checkdelegate-indicator-focused.png

indicator

悬停

 ../_images/checkdelegate-indicator-hovered.png

indicator

部分选中

 ../_images/checkdelegate-indicator-partially-checked.png

indicator

部分选中，按下

 ../_images/checkdelegate-indicator-partially-checked-pressed.png

indicator

部分选中，聚焦

 ../_images/checkdelegate-indicator-partially-checked-focused.png

indicator

部分选中，悬停

 ../_images/checkdelegate-indicator-partially-checked-hovered.png

indicator

悬停

 ../_images/checkdelegate-indicator-hovered.png

ComboBox

background

 ../_images/combobox-background.9.png

background

禁用

 ../_images/combobox-background-disabled.9.png

background

聚焦

 ../_images/combobox-background-focused.9.png

background

悬停

 ../_images/combobox-background-hovered.9.png

background

按下

 ../_images/combobox-background-pressed.9.png

background

打开

 ../_images/combobox-background-open.9.png

background

可编辑

 ../_images/combobox-background-editable.9.png

background

可编辑，聚焦

 ../_images/combobox-background-editable-focused.9.png

background

可编辑，禁用

 ../_images/combobox-background-editable-disabled.9.png

indicator

 ../_images/combobox-indicator.png

indicator

禁用

 ../_images/combobox-indicator-disabled.png

indicator

可编辑

 ../_images/combobox-indicator-editable.png

indicator

可编辑，禁用

 ../_images/combobox-indicator-editable-disabled.png

indicator

可编辑，镜像

 ../_images/combobox-indicator-editable-mirrored.png

indicator

可编辑，镜像，禁用

 ../_images/combobox-indicator-editable-mirrored-disabled.png

popup

 ../_images/combobox-popup.9.png

DelayButton

background

 ../_images/delaybutton-background.9.png

background

禁用

 ../_images/delaybutton-background-disabled.9.png

background

禁用，选中

 ../_images/delaybutton-background-disabled-checked.9.png

background

聚焦

 ../_images/delaybutton-background-focused.9.png

background

按下

 ../_images/delaybutton-background-pressed.9.png

background

选中

 ../_images/delaybutton-background-checked.9.png

background

选中，聚焦

 ../_images/delaybutton-background-checked-focused.9.png

background

选中，悬停

 ../_images/delaybutton-background-checked-hovered.9.png

background

悬停

 ../_images/delaybutton-background-hovered.9.png

progress

 ../_images/delaybutton-progress.9.png

progress

禁用

 ../_images/delaybutton-progress-disabled.9.png

mask

 ../_images/delaybutton-mask.9.png

Dial

background

 ../_images/dial-background.png

background

禁用

 ../_images/dial-background-disabled.png

background

聚焦

 ../_images/dial-background-focused.png

handle

 ../_images/dial-handle.png

handle

禁用

 ../_images/dial-handle-disabled.png

handle

聚焦

 ../_images/dial-handle-focused.png

handle

聚焦，按下

 ../_images/dial-handle-focused-pressed.png

handle

聚焦，悬停

 ../_images/dial-handle-focused-hovered.png

handle

按下

 ../_images/dial-handle-pressed.png

handle

悬停

 ../_images/dial-handle-hovered.png

Dialog

background

 ../_images/dialog-background.9.png

overlay

 ../_images/dialog-overlay.png

查看脚注 1

overlay

modal

 ../_images/dialog-overlay-modal.png

查看脚注 1

DialogButtonBox

background

 ../_images/dialogbuttonbox-background.9.png

抽屉

background

左侧

 ../_images/drawer-background-left.9.png

background

右侧

 ../_images/drawer-background-right.9.png

background

顶部

 ../_images/drawer-background-top.9.png

background

底部

 ../_images/drawer-background-bottom.9.png

overlay

 ../_images/drawer-overlay.png

查看脚注 1

overlay

modal

 ../_images/drawer-overlay-modal.png

查看脚注 1

框架

background

 ../_images/frame-background.9.png

分组框

background

 ../_images/groupbox-background.9.png

title

 ../_images/groupbox-title.9.png

项目代理

background

 ../_images/itemdelegate-background.9.png

background

禁用

 ../_images/itemdelegate-background-disabled.9.png

background

按下

 ../_images/itemdelegate-background-pressed.9.png

background

聚焦

 ../_images/itemdelegate-background-focused.9.png

background

悬停

 ../_images/itemdelegate-background-hovered.9.png

background

突出显示

 ../_images/itemdelegate-background-highlighted.9.png

菜单

background

 ../_images/menu-background.9.png

菜单项

background

 ../_images/menuitem-background.9.png

background

突出显示

 ../_images/menuitem-background-highlighted.9.png

箭头

 ../_images/menuitem-arrow.png

箭头

镜像

 ../_images/menuitem-arrow-mirrored.png

箭头

禁用

 ../_images/menuitem-arrow-disabled.png

箭头

镜像，禁用

 ../_images/menuitem-arrow-mirrored-disabled.png

indicator

 ../_images/menuitem-indicator.png

indicator

禁用

 ../_images/menuitem-indicator-disabled.png

indicator

按下

 ../_images/menuitem-indicator-pressed.png

indicator

选中

 ../_images/menuitem-indicator-checked.png

indicator

选中，按下

 ../_images/menuitem-indicator-checked-pressed.png

indicator

选中，聚焦

 ../_images/menuitem-indicator-checked-focused.png

indicator

选中，悬停

 ../_images/menuitem-indicator-checked-hovered.png

indicator

聚焦

 ../_images/menuitem-indicator-focused.png

indicator

悬停

 ../_images/menuitem-indicator-hovered.png

菜单分隔符

分隔符

 ../_images/menuseparator-separator.9.png

页面

background

 ../_images/page-background.png

查看脚注 1

页面指示器

代理

 ../_images/pageindicator-delegate.png

代理

禁用

 ../_images/pageindicator-delegate-disabled.png

代理

禁用，当前

 ../_images/pageindicator-delegate-disabled-current.png

代理

按下

 ../_images/pageindicator-delegate-pressed.png

代理

当前

 ../_images/pageindicator-delegate-current.png

面板

background

 ../_images/pane-background.9.png

弹出

background

 ../_images/popup-background.9.png

查看脚注 1

overlay

 ../_images/popup-overlay.png

查看脚注 1

overlay

modal

 ../_images/popup-overlay-modal.png

进度条

background

 ../_images/progressbar-background.9.png

progress

 ../_images/progressbar-progress.png

mask

 ../_images/progressbar-mask.9.png

单选按钮

indicator

 ../_images/radiobutton-indicator.png

indicator

禁用

 ../_images/radiobutton-indicator-disabled.png

indicator

按下

 ../_images/radiobutton-indicator-pressed.png

indicator

选中

 ../_images/radiobutton-indicator-checked.png

indicator

选中，聚焦

 ../_images/radiobutton-indicator-checked-focused.png

indicator

选中，悬停

 ../_images/radiobutton-indicator-checked-hovered.png

indicator

选中，按下

 ../_images/radiobutton-indicator-checked-pressed.png

indicator

聚焦

 ../_images/radiobutton-indicator-focused.png

indicator

悬停

 ../_images/radiobutton-indicator-hovered.png

单选代理

background

 ../_images/radiodelegate-background.9.png

background

禁用

 ../_images/radiodelegate-background-disabled.9.png

background

按下

 ../_images/radiodelegate-background-pressed.9.png

background

聚焦

 ../_images/radiodelegate-background-focused.9.png

background

悬停

 ../_images/radiodelegate-background-hovered.9.png

indicator

 ../_images/radiodelegate-indicator.png

indicator

禁用

 ../_images/radiodelegate-indicator-disabled.png

indicator

按下

 ../_images/radiodelegate-indicator-pressed.png

indicator

选中

 ../_images/radiodelegate-indicator-checked.png

indicator

选中，聚焦

 ../_images/radiodelegate-indicator-checked-focused.png

indicator

选中，悬停

 ../_images/radiodelegate-indicator-checked-hovered.png

indicator

选中，按下

 ../_images/radiodelegate-indicator-checked-pressed.png

indicator

聚焦

 ../_images/radiodelegate-indicator-focused.png

indicator

悬停

 ../_images/radiodelegate-indicator-hovered.png

范围滑块

background

垂直

 ../_images/rangeslider-background-vertical.9.png

background

水平

 ../_images/rangeslider-background-horizontal.9.png

progress

垂直

 ../_images/rangeslider-progress-vertical.9.png

progress

垂直，禁用

 ../_images/rangeslider-progress-vertical-disabled.9.png

progress

水平

 ../_images/rangeslider-progress-horizontal.9.png

progress

水平，禁用

 ../_images/rangeslider-progress-horizontal-disabled.9.png

handle

 ../_images/rangeslider-handle.png

handle

禁用

 ../_images/rangeslider-handle-disabled.png

handle

聚焦

 ../_images/rangeslider-handle-focused.png

handle

聚焦，悬停

 ../_images/rangeslider-handle-focused-hovered.png

handle

聚焦，按下

 ../_images/rangeslider-handle-focused-pressed.png

handle

悬停

 ../_images/rangeslider-handle-hovered.png

handle

按下

 ../_images/rangeslider-handle-pressed.png

圆角按钮

background

 ../_images/roundbutton-background.png

background

禁用

 ../_images/roundbutton-background-disabled.png

background

禁用，选中

 ../_images/roundbutton-background-disabled-checked.png

background

聚焦

 ../_images/roundbutton-background-focused.png

background

按下

 ../_images/roundbutton-background-pressed.png

background

选中

 ../_images/roundbutton-background-checked.png

background

选中，聚焦

 ../_images/roundbutton-background-checked-focused.png

background

选中，悬停

 ../_images/roundbutton-background-checked-hovered.png

background

突出显示

 ../_images/roundbutton-background-highlighted.png

background

突出显示，按下

 ../_images/roundbutton-background-highlighted-pressed.png

background

突出显示，聚焦

 ../_images/roundbutton-background-highlighted-focused.png

background

突出显示，悬停

 ../_images/roundbutton-background-highlighted-hovered.png

background

悬停

 ../_images/roundbutton-background-hovered.png

滚动条

handle

 ../_images/scrollbar-handle.png

handle

禁用

 ../_images/scrollbar-handle-disabled.png

handle

交互式

 ../_images/scrollbar-handle-interactive.png

handle

交互式，禁用

 ../_images/scrollbar-handle-interactive-disabled.png

handle

交互式，按下

 ../_images/scrollbar-handle-interactive-pressed.png

handle

交互式，悬停

 ../_images/scrollbar-handle-interactive-hovered.png

滚动指示器

handle

 ../_images/scrollindicator-handle.png

滑动条

background

垂直

 ../_images/slider-background-vertical.9.png

background

水平

 ../_images/slider-background-horizontal.9.png

progress

垂直

 ../_images/slider-progress-vertical.9.png

progress

垂直，禁用

 ../_images/slider-progress-vertical-disabled.9.png

progress

水平

 ../_images/slider-progress-horizontal.9.png

progress

水平，禁用

 ../_images/slider-progress-horizontal-disabled.9.png

handle

 ../_images/slider-handle.png

handle

禁用

 ../_images/slider-handle-disabled.png

handle

聚焦

 ../_images/slider-handle-focused.png

handle

聚焦，悬停

 ../_images/slider-handle-focused-hovered.png

handle

聚焦，按下

 ../_images/slider-handle-focused-pressed.png

handle

悬停

 ../_images/slider-handle-hovered.png

handle

按下

 ../_images/slider-handle-pressed.png

数字输入框

background

 ../_images/spinbox-background.9.png

background

禁用

 ../_images/spinbox-background-disabled.9.png

background

聚焦

 ../_images/spinbox-background-focused.9.png

background

可编辑

 ../_images/spinbox-background-editable.9.png

indicator

向上

 ../_images/spinbox-indicator-up.9.png

indicator

向上，禁用

 ../_images/spinbox-indicator-up-disabled.9.png

indicator

向上，按下

 ../_images/spinbox-indicator-up-pressed.9.png

indicator

向上，聚焦

 ../_images/spinbox-indicator-up-focused.9.png

indicator

向上，镜像

 ../_images/spinbox-indicator-up-mirrored.9.png

indicator

向上，悬停

 ../_images/spinbox-indicator-up-hovered.9.png

indicator

向上，可编辑

 ../_images/spinbox-indicator-up-editable.9.png

indicator

向上，可编辑，按下

 ../_images/spinbox-indicator-up-editable-pressed.9.png

indicator

向上，可编辑，聚焦

 ../_images/spinbox-indicator-up-editable-focused.9.png

indicator

向上，可编辑，镜像

 ../_images/spinbox-indicator-up-editable-mirrored.9.png

indicator

向上，可编辑，悬停

 ../_images/spinbox-indicator-up-editable-hovered.9.png

indicator

向下

 ../_images/spinbox-indicator-down.9.png

indicator

向下，禁用

 ../_images/spinbox-indicator-down-disabled.9.png

indicator

向下，按下

 ../_images/spinbox-indicator-down-pressed.9.png

indicator

向下，聚焦

 ../_images/spinbox-indicator-down-focused.9.png

indicator

向下，镜像

 ../_images/spinbox-indicator-down-mirrored.9.png

indicator

向下，悬停

 ../_images/spinbox-indicator-down-hovered.9.png

indicator

向下，可编辑

 ../_images/spinbox-indicator-down-editable.9.png

indicator

向下，可编辑，按下

 ../_images/spinbox-indicator-down-editable-pressed.9.png

indicator

向下，可编辑，聚焦

 ../_images/spinbox-indicator-down-editable-focused.9.png

indicator

向下，可编辑，镜像

 ../_images/spinbox-indicator-down-editable-mirrored.9.png

indicator

向下，可编辑，悬停

 ../_images/spinbox-indicator-down-editable-hovered.9.png

滑动代理

background

 ../_images/swipedelegate-background.9.png

background

禁用

 ../_images/swipedelegate-background-disabled.9.png

background

按下

 ../_images/swipedelegate-background-pressed.9.png

background

聚焦

 ../_images/swipedelegate-background-focused.9.png

background

悬停

 ../_images/swipedelegate-background-hovered.9.png

开关

indicator

 ../_images/switch-indicator.png

indicator

禁用

 ../_images/switch-indicator-disabled.png

indicator

按下

 ../_images/switch-indicator-pressed.png

indicator

选中

 ../_images/switch-indicator-checked.png

indicator

选中，聚焦

 ../_images/switch-indicator-checked-focused.png

indicator

选中，悬停

 ../_images/switch-indicator-checked-hovered.png

indicator

选中，按下

 ../_images/switch-indicator-checked-pressed.png

indicator

聚焦

 ../_images/switch-indicator-focused.png

indicator

悬停

 ../_images/switch-indicator-hovered.png

handle

 ../_images/switch-handle.png

handle

禁用

 ../_images/switch-handle-disabled.png

handle

按下

 ../_images/switch-handle-pressed.png

开关代理

background

 ../_images/switchdelegate-background.9.png

background

禁用

 ../_images/switchdelegate-background-disabled.9.png

background

按下

 ../_images/switchdelegate-background-pressed.9.png

background

聚焦

 ../_images/switchdelegate-background-focused.9.png

background

悬停

 ../_images/switchdelegate-background-hovered.9.png

indicator

 ../_images/switchdelegate-indicator.png

indicator

禁用

 ../_images/switchdelegate-indicator-disabled.png

indicator

按下

 ../_images/switchdelegate-indicator-pressed.png

indicator

选中

 ../_images/switchdelegate-indicator-checked.png

indicator

选中，聚焦

 ../_images/switchdelegate-indicator-checked-focused.png

indicator

选中，悬停

 ../_images/switchdelegate-indicator-checked-hovered.png

indicator

选中，按下

 ../_images/switchdelegate-indicator-checked-pressed.png

indicator

聚焦

 ../_images/switchdelegate-indicator-focused.png

indicator

悬停

 ../_images/switchdelegate-indicator-hovered.png

handle

 ../_images/switchdelegate-handle.png

handle

禁用

 ../_images/switchdelegate-handle-disabled.png

标签栏

background

 ../_images/tabbar-background.png

标签按钮

background

 ../_images/tabbutton-background.9.png

background

禁用

 ../_images/tabbutton-background-disabled.9.png

background

按下

 ../_images/tabbutton-background-pressed.9.png

background

选中

 ../_images/tabbutton-background-checked.9.png

background

悬停

 ../_images/tabbutton-background-hovered.9.png

background

禁用，选中

 ../_images/tabbutton-background-disabled-checked.9.png

多行文本区域

background

 ../_images/textarea-background.9.png

background

禁用

 ../_images/textarea-background-disabled.9.png

background

聚焦

 ../_images/textarea-background-focused.9.png

文本框

background

 ../_images/textfield-background.9.png

background

禁用

 ../_images/textfield-background-disabled.9.png

background

聚焦

 ../_images/textfield-background-focused.9.png

工具栏

background

 ../_images/toolbar-background.png

工具按钮

background

 ../_images/toolbutton-background.9.png

background

禁用，选中

 ../_images/toolbutton-background-disabled-checked.9.png

background

聚焦

 ../_images/toolbutton-background-focused.9.png

background

按下

 ../_images/toolbutton-background-pressed.9.png

background

选中

 ../_images/toolbutton-background-checked.9.png

background

选中，聚焦

 ../_images/toolbutton-background-checked-focused.9.png

background

选中，悬停

 ../_images/toolbutton-background-checked-hovered.9.png

background

悬停

 ../_images/toolbutton-background-hovered.9.png

工具分隔符

分隔符

水平

 ../_images/toolseparator-separator-horizontal.9.png

分隔符

垂直

 ../_images/toolseparator-separator-vertical.9.png

工具提示

background

 ../_images/tooltip-background.9.png

1 一个包含一个颜色的1x1图像，拉伸以填充控件。

9-Patch图像#

Imagine样式使用9-patch图像，以便设计者控制特定元素如何响应尺寸调整。下面是一个示例9-patch图像，代表了按钮的背景，以及一个放大版本（以便更容易看到9-patch线）。

../_images/qtquickcontrols-imagine-9-patch-4x.png

图像内容宽度为44像素，高度为32像素。每个9-patch图像都需要每边都有宽度为一像素的线（总共称为“9-patch线”），因此图像的实际大小变为46像素宽，34像素高。请注意，9-patch线必须为宽度一像素，无论图像的目标DPI是多少。例如，button-background.9.png和button-background@2x.9.png的9-patch线都必须是一像素宽。

9-patch线必须是黑色，其余区域必须是透明或白色

../_images/qtquickcontrols-imagine-9-patch-size.png

可拉伸区域#

顶部和左侧的9-patch线确定在图像缩放时哪些部分会被拉伸。

下面是9-patch图像在不同尺寸被缩放至原始尺寸一倍半的示例。

../_images/qtquickcontrols-imagine-9-patch-resized-stretchable.png

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

填充区域#

右侧和底部的9-patch线确定控件的内容区域（contentItem）可用的空间量，这也可以理解为控制填充。有关填充的示意图，请参阅控件布局。

下面是更多9-patch图像被缩放的示例，但这次展示的是填充9-patch线的工作方式。

../_images/qtquickcontrols-imagine-9-patch-resized-padding.png

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

内缩区域#

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

内缩区域通过告诉控件9-patch图像的某个区域应超出控件，来解决这个问题。

../_images/qtquickcontrols-imagine-9-patch-inset.png

下面的图像中，虚线表示按钮的可点击区域，以及在布局中所占的空间。阴影用其后方的条纹区域表示。

../_images/qtquickcontrols-imagine-9-patch-inset-boundaries.png

导出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变体的9-patch图像（例如@2x，@3x等）时，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前缀的图像）不受影响，因此只需要对打算用于高DPI显示的图像运行此命令。

动画图像#

Imagine风格支持WebP和GIF动画图像格式。

自定义#

路径#

Imagine风格允许自定义用于图像资源选择的路径。可以为任何窗口或项目指定路径，它会自动以类似字体的方式传播给同一级别的子项。在以下示例中，窗口和所有三个单选按钮都以深色图像资源（位于“qrc:/themes/dark”中的文件）显示。

++——————————————————————–+ || .. image:: images/qtquickcontrols-imagine-customization-dark.png| ++——————————————————————–+

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

配置文件#

变量

描述

路径

指定包含Imagine风格资产的目录的路径。如果未指定，则使用内置资产。

例如，指定资源系统中某个目录的路径

[Imagine]
Path=:/imagine-assets

指定到本地目录的相对路径

[Imagine]
Path=imagine-assets

注释

由于技术限制，如果相对于qtquickcontrols2.conf文件，则路径不应命名为“imagine”。

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

环境变量##

变量

描述

QT_QUICK_CONTROLS_IMAGINE_PATH

指定包含Imagine风格资产的目录路径。如果未指定，则使用内置资产。

例如，指定资源系统中某个目录的路径

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

指定到本地目录的相对路径

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

注释

由于技术限制，如果相对于qtquickcontrols2.conf文件，则路径不应命名为“imagine”。

QT_QUICK_CONTROLS_IMAGINE_SMOOTH

设置为1以启用9-patch图像的平滑缩放。此环境变量是在Qt 6.5中添加的。

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

调色板##

Imagine风格支持通过调色板属性和qtquickcontrols2.conf文件进行调色板自定义。与其他风格一样，Imagine风格使用的确切调色板角色取决于特定的风格。然而，由于大多数控件的可视外观（例如：背景）都是通过图像资产管理的，因此只有通常用于文本的角色才会产生影响。

字体##

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

依赖项##

必须单独导入Imagine样式以访问特定于Imagine样式的属性。需要注意的是，无论对Imagine样式的引用如何，相同的应用程序代码都可以在任何其他样式中运行。Imagine特定的属性仅在应用程序以Imagine样式运行时才有效。

如果在总是加载的QML文件中导入Imagine样式，则必须在应用中部署Imagine样式才能运行，而不管使用哪种样式。通过使用文件选择器，可以在不创建对样式硬依赖的情况下应用特定于样式的调整。

另请参阅Styling Qt Quick Controls

附加属性文档##

此附加属性包含图像资产的路径...

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