如何在 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

一种简单而强大的方法是创建自己的 QML 组件。

1. 创建自定义 QML 组件/文件：
   File -> New File or Project -> Qt -> QML File (choose latest version).
   现在输入文件名，例如 MyToolButton.
   请注意，它也将用作 组件名称。

2. 添加必要的导入和代码：

MyToolButton.qml（根据您的需要定制）

import QtQuick 2.0
import QtQuick.Controls 1.4

ToolButton
{
    Image {
        source: parent.iconSource
        fillMode: Image.PreserveAspectFit // For not stretching image (optional)
        anchors.fill: parent
        anchors.margins: 2 // Leaving space between image and borders (optional)
        anchors.bottomMargin:10 // Leaving space for text in bottom
    }
    Text {
        text: parent.text

        anchors.bottom: parent.bottom // Placing text in bottom
        anchors.margins: 2 // Leaving space between text and borders  (optional)
        anchors.horizontalCenter: parent.horizontalCenter // Centering text
        renderType: Text.NativeRendering // Rendering type (optional)
    }
}

---

Main.QML（你想在哪里使用它）：

import QtQuick 2.0
import QtQuick.Controls 1.4

// Usual toolbar declaration
ToolBar {
    id: mainToolBar
    RowLayout {

        // Create MyToolButton. Note that component name (MyToolButton) is the same as file name.
        MyToolButton {
            id:tbQuit

            // Way 1: Add here any icon 
            iconSource: "qrc:///images/quit.png" 
            text:qsTr("&Quit")

            // Way 2, my favourite: Convert your Action into Button!
            action: actQuit
        }
    }
}

Action {
    id: actQuit
    text: qsTr("&Quit")
    onTriggered: Qt.quit()
    shortcut: "Alt+Q"
    iconSource: "qrc:///Images/Exit.png"
}

---

注意事项：

1. 它需要 QtQuick.Controls 1.4 并且应该在 Qt 5.2+ 上工作。 （在 Qt 5.5 上运行良好）。
2. 别忘了添加imports。
3. 标记为(optional) 的代码部分可以跳过。
4. 将ToolButton 替换为Button，它将作为按钮工作。

希望对你有帮助！

Answer 2

您是否尝试像这样添加自己的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的高度设置为正确的值（图片+文字高度）