Fatal编程技术网
  • qt/
  • Qt 如何在图像中显示适当大小的图标？

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

qt qml

Qt 如何在图像中显示适当大小的图标？,qt,qml,qtquickcontrols2,Qt,Qml,Qtquickcontrols2,我在资源文件中有不同分辨率的图标： user@host :~/MyApp$ ls icons/default/ 20x20 20x20@2 20x20@3 20x20@4 index.theme user@host :~/MyApp$ 现在，我想自动显示相应分辨率的图标。在按钮中使用图标时，我只需将图标.name设置为图标的名称即可 但我不需要图标成为按钮的一部分。我只想显示一个普通图标，所以我认为这必须使用Image来完成。我还希望根据设备的当前分辨率自动选择图标 试过这个

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

user@host :~/MyApp$ ls  icons/default/
20x20  20x20@2  20x20@3  20x20@4  index.theme
user@host :~/MyApp$
现在，我想自动显示相应分辨率的图标。在
按钮中使用图标时，我只需将
图标.name
设置为图标的名称即可

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

试过这个


    Image {
       icon.name: "home_icon"
    }


但是我得到一个错误
无法分配给不存在的属性“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$ 



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


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



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


然后将源设置为“常规”变量，Qt将选择正确的大小：


source: "icons/default/home_icon.png"


但是，如果您想在不使用
按钮的情况下方便地使用
按钮的图标API，则必须等到

或者，您可以只删除
背景
（并在必要时调整
填充
），而无需更改图标目录的结构：


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



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


为了使它更整洁，您可以创建
IconImage.qml
并将上面的
按钮
代码移到其中（不带
icon.name
赋值），以便可以像这样重用它：


IconImage {
    icon.name: "home_icon"
}



请注意，使用这种方法按钮仍然可以单击，尽管单击按钮不会发生任何事情，但这确实意味着它将使用鼠标事件。您可以禁用按钮（
enabled:false
）以防止出现这种情况。
当您使用普通图像时，该图像的高DPI变体必须位于同一目录中：


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



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


然后将源设置为“常规”变量，Qt将选择正确的大小：


source: "icons/default/home_icon.png"


但是，如果您想在不使用
按钮的情况下方便地使用
按钮的图标API，则必须等到

或者，您可以只删除
背景
（并在必要时调整
填充
），而无需更改图标目录的结构：


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



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


为了使它更整洁，您可以创建
IconImage.qml
并将上面的
按钮
代码移到其中（不带
icon.name
赋值），以便可以像这样重用它：


IconImage {
    icon.name: "home_icon"
}



请注意，使用这种方法按钮仍然可以单击，尽管单击按钮不会发生任何事情，但这确实意味着它将使用鼠标事件。您可以禁用按钮（
enabled:false
）以防止出现这种情况。
问题是，我的目录结构不同。我已经更新了问题以显示图标目录。因此，我担心如果我在
图像上使用
源代码
，它将找不到正确的文件名，因为文件名没有
@
符号。我认为唯一的解决方法是使用包含
@
符号的名称设置指向原始图标的符号链接。您尝试过我提到的按钮方法吗？这样您就不需要更改目录结构。有关如何改进“按钮图标”以使其不可单击的示例，请参见。问题是，我的目录结构不同。我已经更新了问题以显示图标目录。因此，我担心如果我在
图像上使用
源代码
，它将找不到正确的文件名，因为文件名没有
@
符号。我认为唯一的解决方法是使用包含
@
符号的名称设置指向原始图标的符号链接。您尝试过我提到的按钮方法吗？这样你就不需要改变你的目录结构了。请参阅如何改进“按钮图标”以使其不可点击，而不会因禁用而变灰的示例。