如何在QML ToolButton上显示图标和文本

Question

我正在使用QML和QtQuick.Components创建桌面应用程序。我想放置工具栏按钮，如标准的MacOS设置对话框：

我使用ToolBar和ToolButton，但我找不到办法。例如，使用以下代码，它仅显示图标：

ApplicationWindow {
    // ...

    toolBar: ToolBar {
        RowLayout {
            ToolButton {
                text: qsTr("Main")
                iconSource: "main.png"
            }
            ToolButton {
                text: qsTr("System")
                iconSource: "system.png"
            }
            ToolButton {
                text: qsTr("Items Book")
                iconSource: "itemsbook.png"
            }
        }
    }
}

似乎ToolButton可以显示文字或图标：

Text {
    id: textitem
    text: button.text
    anchors.centerIn: parent
    visible: button.iconSource == "" // <=========
}

Answer 1

您是否尝试添加自己的Text控件，如下所示：

ApplicationWindow {
    // ...

    toolBar: ToolBar {
        RowLayout {
            ToolButton {
                text: qsTr("Main")
                iconSource: "main.png"
                Text {
                    text: parent.text
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
            ToolButton {
                text: qsTr("System")
                iconSource: "system.png"
                Text {
                    text: parent.text
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
            ToolButton {
                text: qsTr("Items Book")
                iconSource: "itemsbook.png"
                Text {
                    text: parent.text
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }
        }
    }
}

并将ToolButton高度设置为正确的值（图像+文本高度）