Question

我在资源文件中有用于不同分辨率的图标：

user@host :~/MyApp$ ls  icons/default/
20x20  20x20@2  20x20@3  20x20@4  index.theme
user@host :~/MyApp$

现在，我想自动显示相应分辨率的图标。在Button中使用图标时，只需将icon.name设置为图标的名称即可。

但是我不需要图标成为按钮的一部分。我只想显示一个普通图标，所以我认为必须使用Image来完成。我还希望根据设备的当前分辨率自动选择图标。

尝试过

    Image {
       icon.name: "home_icon"
    }

但我收到错误消息Cannot assign to non-existent property "icon"

如何自动显示针对相应设备分辨率的图标？

我的图标目录结构是这样：

Directories=20x20,20x20@2,20x20@3,20x20@4

[20x20]
Size=20
Type=Fixed

[20x20@2]
Size=20
Scale=2
Type=Fixed

[20x20@3]
Size=20
Scale=3
Type=Fixed

[20x20@4]
Size=20
Scale=4
Type=Fixed

user@desk :~/MyApp$ ls -lR icons/default/
icons/default/:
total 20
drwxrwxr-x 2 user user 4096 nov  3 16:07 20x20
drwxrwxr-x 2 user user 4096 nov  3 16:07 20x20@2
drwxrwxr-x 2 user user 4096 nov  3 16:07 20x20@3
drwxrwxr-x 2 user user 4096 nov  3 16:06 20x20@4
-rw-rw-r-- 1 user user  280 oct 31 14:34 index.theme

icons/default/20x20:
total 52
-rw-r--r-- 1 user user 485 nov  3 08:52 accounticon.png
-rw-r--r-- 1 user user 483 nov  3 08:55 countryicon.png
-rw-rw-r-- 1 user user 123 oct 31 14:35 drawer.png
-rw-r--r-- 1 user user 301 nov  3 16:02 emailicon.png
-rw-r--r-- 1 user user 413 nov  3 08:58 home.png
-rw-r--r-- 1 user user 146 nov  2 15:44 humberger.png
-rw-r--r-- 1 user user 237 nov  3 09:03 ico.png
-rw-r--r-- 1 user user 378 nov  3 16:07 lockicon.png
-rw-r--r-- 1 user user 268 nov  3 16:06 mobileicon.png
-rw-r--r-- 1 user user 339 nov  3 14:37 usericon.png
-rw-r--r-- 1 user user 485 nov  3 09:11 verifybond.png

icons/default/20x20@2:
total 52
-rw-r--r-- 1 user user 1053 nov  3 08:51 accounticon.png
-rw-r--r-- 1 user user 1232 nov  3 08:55 countryicon.png
-rw-rw-r-- 1 user user  126 oct 31 14:35 drawer.png
-rw-r--r-- 1 user user  507 nov  3 16:01 emailicon.png
-rw-r--r-- 1 user user  758 nov  3 08:57 home.png
-rw-r--r-- 1 user user  215 nov  2 15:43 humberger.png
-rw-r--r-- 1 user user  456 nov  3 09:03 ico.png
-rw-r--r-- 1 user user  570 nov  3 16:07 lockicon.png
-rw-r--r-- 1 user user  352 nov  3 16:06 mobileicon.png
-rw-r--r-- 1 user user  549 nov  3 14:37 usericon.png
-rw-r--r-- 1 user user 1136 nov  3 09:11 verifybond.png

icons/default/20x20@3:
total 52
-rw-r--r-- 1 user user 1672 nov  3 08:51 accounticon.png
-rw-r--r-- 1 user user 1787 nov  3 08:55 countryicon.png
-rw-rw-r-- 1 user user  130 oct 31 14:35 drawer.png
-rw-r--r-- 1 user user  785 nov  3 16:01 emailicon.png
-rw-r--r-- 1 user user 1057 nov  3 08:57 home.png
-rw-r--r-- 1 user user  355 nov  2 15:43 humberger.png
-rw-r--r-- 1 user user  718 nov  3 09:03 ico.png
-rw-r--r-- 1 user user  969 nov  3 16:07 lockicon.png
-rw-r--r-- 1 user user  677 nov  3 16:06 mobileicon.png
-rw-r--r-- 1 user user  864 nov  3 14:37 usericon.png
-rw-r--r-- 1 user user 1790 nov  3 09:10 verifybond.png

icons/default/20x20@4:
total 52
-rw-r--r-- 1 user user 2292 nov  3 08:50 accounticon.png
-rw-r--r-- 1 user user 2610 nov  3 08:55 countryicon.png
-rw-rw-r-- 1 user user  131 oct 31 14:35 drawer.png
-rw-r--r-- 1 user user 1080 nov  3 16:01 emailicon.png
-rw-r--r-- 1 user user 1322 nov  3 08:57 home.png
-rw-r--r-- 1 user user  473 nov  2 15:42 humberger.png
-rw-r--r-- 1 user user 1054 nov  3 09:02 ico.png
-rw-r--r-- 1 user user 1217 nov  3 16:06 lockicon.png
-rw-r--r-- 1 user user  744 nov  3 16:06 mobileicon.png
-rw-r--r-- 1 user user 1164 nov  3 14:37 usericon.png
-rw-r--r-- 1 user user 2565 nov  3 09:10 verifybond.png
user@desk :~/MyApp$

Answer 1

在使用普通Image时，该映像的高DPI变体必须位于同一目录中：

default/
    home_icon.png
    home_icon@2x.png
    home_icon@3x.png
    home_icon@4x.png

然后，您只需将来源设置为“常规”变体，Qt就会选择正确的大小：

source: "icons/default/home_icon.png"

但是，如果您想方便使用Button的图标API而不使用Button，则必须等到IconImage is made public。

或者，您可以删除background（并在必要时调整padding），而不必更改图标目录的结构：

Button {
    icon.name: "home_icon"
    background: null
    leftPadding: 0
    topPadding: 0
    rightPadding: 0
    bottomPadding: 0
}

要使其更加整洁，可以创建IconImage.qml并将上面的Button代码移入其中（无需分配icon.name），以便可以像这样重用它：

IconImage {
    icon.name: "home_icon"
}

请注意，使用此方法仍然可以单击按钮，尽管单击该按钮不会产生任何后果，但这确实意味着它将消耗鼠标事件。您可以禁用按钮（enabled: false）来防止这种情况。

如何在图像中显示适当大小的图标？

1 个答案: