QML: two checkboxes in the same toolbar are overlapped - cannot set position

Question

I have a toolbar with two checkboxes, which are correctly generated, but I cannot set their position, and so they are placed one on top of the other.

header : ToolBar {
    CheckBox {
       id: autoLoadButtonTB
       checked: true
       text: qsTr("Auto &Load")    //TODO 'L' should be underlined
       action: autoLoadAction
    }
    CheckBox {
       id: autoSaveButtonTB
       checked: true
       text: qsTr("&Auto Save")    //TODO 'A' should be underlined
       action: autoSaveAction
    }
}

Is it possible to have them one next to the other?

Answer 1

If you check the documentation https://doc.qt.io/qt-6/qml-qtquick-controls-toolbar.html, it demonstrates the ToolBar with a RowLayout. If we apply that to your example, we get:

    header : ToolBar {
        RowLayout {
            CheckBox {
                id: autoLoadButtonTB
                checked: true
                text: qsTr("Auto &Load")    //TODO 'L' should be underlined
                action: autoLoadAction
            }
            CheckBox {
                id: autoSaveButtonTB
                checked: true
                text: qsTr("&Auto Save")    //TODO 'A' should be underlined
                action: autoSaveAction
            }
        }
    }

Also, you may like to consider replacing CheckBox with ToolButton or MenuItem with checkable: true. They function similarly to a CheckBox but, they're look may be more consistent with what's needed for ToolBar.