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

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

Answer 2

答案1

设置sourceSize的{{1}}，以便影响其Image和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指定{1}}。

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

QML图像大小被忽略

2 个答案:

答案1

答案2

答案3