如何在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高度（图像+文本高度）

Answer 2

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

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

2. 添加有neccesary进口代码：

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，它将作为按钮使用。

希望它有帮助！