QML 图像大小被忽略

Posted 2023-02-16

【中文标题】QML 图像大小被忽略

【英文标题】：QML Image size is ignored

【发布时间】：2017-10-06 20:47:04

【问题描述】：

我在 QML 中有一个 ToolButton，其图像大小为 48x48 像素：

ToolButton 
    contentItem: Image 
        source: "Icons/idea48.png"
    

如果我设置宽度和高度没有任何变化：

ToolButton 
    contentItem: Image 
        source: "Icons/idea48.png"
        width: 5
        height: 5
    

在屏幕上仍然是 48x48。

甚至添加填充模式也无济于事：

ToolButton 
    visible: scene.serviceMode
    contentItem: Image 
        source: "Icons/idea48.png"
        width: 10
        height: 10
        fillMode: Image.Stretch
        sourceSize: 
            width: 48
            height: 48
        
    

sourceSize 应为 48 以呈现高像素密度的图像。

我也尝试将 Image 放入 Item 中，但没有成功：

ToolButton 
    contentItem: Item 
        width: 24
        height: 24
        Image 
            source: "Icons/idea48.png"
            fillMode: Image.Stretch
            sourceSize: 
                width: 48
                height: 48
            
        
    

【问题讨论】：

图片尺寸溢出项目。将Image 的宽度和高度设置为您想要的大小，而不是Item 的大小

【参考方案1】：

Qt Quick Controls 2.3 (Qt 5.10) 添加了对button icons 的内置支持。默认情况下，不同的样式可能会根据其设计指南要求不同的图标大小，但您可以轻松地覆盖图标大小。

ToolButton 
    icon.width: 24
    icon.height: 24
    icon.source: "Icons/idea48.png"

关于高 DPI 支持，请考虑提供 @Nx 版本，例如图库示例所做的：http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/examples/quickcontrols2/gallery/icons/gallery?h=5.10

【讨论】：

不错的答案，但在 QT 论坛上我被告知 @Nx 在 UWP 和 android 上不起作用，请参阅 forum.qt.io/topic/83936/…

自 Qt 5.6 以来，Qt 已完全支持跨平台的高 DPI。 Qt Quick Controls 2 最初在 Qt 5.7 中引入，其可扩展性基于自动高 DPI 缩放。 blog.qt.io/blog/2016/01/26/high-dpi-support-in-qt-5-6

【参考方案2】：

回答 1

设置Image的sourceSize以影响其implicitWidth和implicitHeight，ToolButton使用它们来确定contentItem的大小。

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow 
    visible: true
    width: 640
    height: 480

    header: ToolBar 
        RowLayout 
            anchors.fill: parent
            ToolButton 
                contentItem: Image 
                    source: "Icons/idea48.png"
                    sourceSize.width: 10
                    sourceSize.height: 10
                    fillMode: Image.Pad
                
            
        
    

回答 2

将Image 放在Item 中，这样Image 就不会被ToolButton 调整大小，并且其尺寸与width 和height 指定的尺寸完全相同。

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow 
    visible: true
    width: 640
    height: 480

    header: ToolBar 
        RowLayout 
            anchors.fill: parent
            ToolButton 
                contentItem: Item 
                    Image 
                        source: "Icons/idea48.png"
                        width: 10
                        height: 10
                    
                
            
        
    

答案 3

强制contentItem 的大小。

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow 
    visible: true
    width: 640
    height: 480

    header: ToolBar 
        RowLayout 
            anchors.fill: parent
            ToolButton 
                contentItem: Image 
                    source: "Icons/idea48.png"
                

                Component.onCompleted: 
                    contentItem.width = 10
                    contentItem.height = 10
                
            
        
    

【讨论】：

发布与我的问题无关的内容是在浪费我的时间

sourceSize 应为 48 以呈现高像素密度的图像。

如果您不喜欢 sourceSize，那么另一种选择是将您的 Image 放入 Item 中

把图片放到Item里面不生效，看我在帖子里的编辑