Button text alignment in ToolBar

Captain Haddock

Just getting to grips with QML. Simple example constructed from samples I found. When you run it please see that he text in the button is not centralized. Guessing my example is fubar .. how should it be modified to centralize the text in the buttons please?

main.qml:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    width: 1920
    height: 1200
    visible: true
    flags: Qt.FramelessWindowHint | Qt.Window
    title: qsTr("IGS")
    color: "#4C535D"

    ToolBar {
        ColumnLayout {
            Item {
                Layout.preferredHeight: 10
            }
            MyButton {
                text: qsTr("Auto\nID")
            }
            MyButton {
                text: qsTr("?")
                onClicked: Qt.exit(0)
            }
        }
    }

    StackView {
        id: stack
        anchors.fill: parent
    }
}

MyButton.qml:

import QtQuick

import QtQuick.Controls.Basic

ItemDelegate {
    id: root

    property string state: "Selectable"

    contentItem: Text {
        text: root.text
        font.family: "Arial"
        font.pixelSize: 12
        color: "black"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
    background: Rectangle {
        width: 60
        implicitHeight: 60
        border {
            width: 4
            color: "black"
        }
        radius: 16
        color: root.state == "Selectable" ? "#979EA8" : root.state == "NotSelectable" ? "#4C535D" : "#84BECC"
    }
}

mzimmers

@Captain-Haddock your MyButton component is being used inside a layout, so it's best to use the Layout attached properties to size it, rather than sizing the background:

ItemDelegate {
    id: root
    Layout.preferredHeight: 60
    Layout.preferredWidth: 60

and you can remove the sizing from your background.

BTW: is there a reason you're using ItemDelegate for this? A simple Pane should work just fine...

JoeCFD

@Captain-Haddock Do not you set width and height to ItemDelegate?
then make contentItem and background fill the parent?

Why do you set
width: 60
implicitHeight: 60
to background?