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方式对齐。

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
            }
        }
    }
}

Answer 2

最终解决方案如下：

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

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

              contentItem: Item {
                 Row {
                    anchors.fill: parent
                    spacing : parent.width*0.05
                    leftPadding: parent.width*0.25
                    Image {
                       id : menuButtonIcon
                       source: menuButton.icon.source
                       width: menuButton.icon.width
                       height: menuButton.icon.height
                       anchors.verticalCenter: parent.verticalCenter

                       ColorOverlay {
                          anchors.fill: menuButtonIcon
                          source: menuButtonIcon
                          color: "white"
                       }
                    }

                    Label {
                       text: menuButton.text
                       font: menuButton.font
                       anchors.verticalCenter: parent.verticalCenter
                    }
                 }
              }

              onClicked: {
                 switch ( index ) {
                 case 0 :
                    contactItemAddPage.open();
                    break;
                 }
              }
           }
        }
     }

QML ToolButton图标和文本对齐

2 个答案: