如何在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，它將作爲按鈕使用。

希望它有幫助！