qml - QML ToolButton 图标和文本对齐

Question

这是我使用 ToolButton 作为委托的一种方式：

import QtQuick 2.11
import QtQuick.Controls 2.4

  ListView {
     id : menuButtonslayout
     anchors.top : menuHeader.bottom
     anchors.left: menuHeader.left
     height : (menuContainerComponentItem.height - menuHeader.height)*0.6
     width : menuHeader.width

     model: menuButtonsIdsModel

     delegate : Component {
        Item {
           height : menuButtonslayout.height*0.15
           width : menuButtonslayout.width

           ToolButton {
              anchors.fill: parent
              icon.source: menuItemIcon
              text : qsTr(menuItemName)
              font.family: "Helvetica"
              font.bold: true
              antialiasing: true
           }
        }
     }
  }

如何指定按钮文本和图标对齐方式？我没有看到任何属性。默认情况下，图标和标签在按钮内居中。我希望它们以 RowLayout 方式对齐。

标签： qml

Answer 1

由于该contentItem属性，可以修改内容的呈现（来源：https ://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-toolbutton ）。

ToolButton {
    id: control
    anchors.fill: parent
    icon.source: menuItemIcon
    text: qsTr(menuItemName)
    font.family: "Helvetica"
    font.bold: true
    antialiasing: true

    contentItem: Item {
        Row {
            //anchors.horizontalCenter: parent.horizontalCenter
            spacing: 5
            Image {
                source: control.icon.source
                width: control.icon.width
                height: control.icon.height
                anchors.verticalCenter: parent.verticalCenter
            }
            Text {
                text: control.text
                font: control.font
                anchors.verticalCenter: parent.verticalCenter
            }
        }
    }
}