QML ToolButton 未调整大小

Question

我不明白为什么我的 ToolButton 这么小。工具栏是顶部的橙色矩形。下面的代码：

Item{

    ToolBar{
        id: toolbar
        width: parent.width
        height: scaleDP(0.29)
        anchors.top: parent.top

        background: Rectangle{
            color: "orange"
        }

        RowLayout{
            anchors.fill: parent


            ToolButton {
                id: buttonBack
                height: parent.height
                width: parent.height
                Image {
                    id: imageBack
                    source: "qrc:/assets/images/left-filled-black-50.png"
                    anchors.fill: parent
                    anchors.margins: 4
                }


            }

显示我的工具按钮太小：

我可以更改图像的高度并使其变大，但它位于工具按钮之外。当我尝试调整 ToolButton 的高度时，没有任何反应

发现

看来问题出在 RowLayout 上。如果我将其更改为“行”或“矩形”，则图标会按预期调整大小。

Answer 1

RowLayout 使用其子级的implicitHeight 和implicitWidth，并忽略高度和宽度。对于一些简单的项目（例如矩形），设置其高度也会更改其隐式高度，但对于像工具按钮这样的快速控件来说，情况并非如此。

RowLayout{
    height: 20
    width: parent.width
    // WON'T WORK
    ToolButton {
        id: buttonBack1
        height: parent.height
        width: parent.height
    }
    // OK
    ToolButton {
        id: buttonBack2
        Layout.preferredHeight: parent.height
        Layout.preferredWidth: parent.height
    }
    // OK TOO
    ToolButton {
        id: buttonBack3
        implicitHeight: parent.height
        implicitWidth: parent.height
    }
}

如果您仍然需要RowLayout，您有两种选择：

• 设置implicitHeigt和implicitWidth或
• 使用布局的附加属性： Layout.preferredHeight&Layout.preferredWidth