Loader will disturb the layout of the header of ApplicationWindow(QtQuick 2)

  • This is easier to explain by the example. Following codes work as expected


    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0
    ApplicationWindow {
        visible: true
        width: 640
        height: 480        
        header: CustomToolBar{


    import QtQuick 2.6
    import QtQuick.Controls 2.0
    ToolBar {
        id : toolBar
            id: loader
            spacing: 20
            anchors.fill: parent
            ToolButton {
                contentItem: Image {
                    fillMode: Image.PreserveAspectFit
                    horizontalAlignment: Image.AlignHCenter
                    verticalAlignment: Image.AlignVCenter
                    source: "qrc:/icons/settings.svg"
                    sourceSize.width: 40
                    width: sourceSize.width

    Without the loader, the result looks good, the icon is within the Toolbar.

    no loader

    If I enable the loader, the icon will offset a little bit, this make the view looks bad

    has loader

    How could I fix this issue?Thanks

  • @tham if i'm not mistaking, the height of the header becomes smaller.
    This is about using the only element to make layout of the header.
    Try to set header height equals to row containing your toolbuttons explicitly.

  • A quote the docs:

    If only a single item is used within the ToolBar, it will resize to fit the implicit size of its contained item.

    If you add multiple children into ToolBar, it can no longer use the implicit size of the content, and falls back to the default height.

Log in to reply