如何使 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. 不要忘记添加导入。
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

高度为正确的值（图像+文字高度）

Answer 3

您可以在按钮底部创建文本并将其放置在您想要的位置。

示例：

 Rectangle {
        id: side_panel
        width: parent.width / 10
        height: parent.height - main_toolbar.height
        color: "lightgray"

        anchors {
            top: main_toolbar.bottom
            right: parent.right
        }

        ColumnLayout {
            anchors.fill: parent
            spacing: 1

            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/home.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    text: "Home"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
            }
            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/warning.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    text: "Alarms"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
            }
            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/settings.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    text: "Settings"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
            }
            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/service.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    text: "Service"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
            }
            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/reset.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    text: "Reset"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
            }
            Button {
                Layout.fillWidth: true
                Layout.fillHeight: true
                icon.source: "../assets/icons/play.png"
                icon.width: icon_size
                icon.height: icon_size
                Text {
                    id: start_stop_text
                    text: "Start"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: image_text_dist
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                    font.bold: true
                }
                onClicked: {
                    icon.source = icon.source == "../assets/icons/play.png" ? "../assets/icons/pause.png" : "../assets/icons/play.png";
                    start_stop_text.text = icon.source == "../assets/icons/play.png" ? "Start" : "Stop";
                }
            }
        }
    }