QML 图像大小被忽略

Question

我在 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
            }
        }
    }
}

Answer 1

答案 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
                }
            }
        }
    }
}

Answer 2

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

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

关于高 DPI 支持，请考虑像 Gallery 示例那样提供 @Nx 版本：http://code.qt.io/cgit/qt/qtquickcontrols2.git/tree/examples/quickcontrols2/gallery/icons/gallery?h=5.10

QML 图像大小被忽略

QML Image size is ignored

qml

qtquick2

qtquickcontrols2

答案 1

答案 2

答案 3