Search code examples
qtqtquick2qtquickcontrolsqtquickcontrols2

Two toolbar in header QtQuickCOntrols 2


I start on Qt Quick and I want to develop an application that will be deployed on an embedded system. I'm using Qt Quick Controls 2. I'm trying to create two toolbars in my header: a toolbar consisting of icons (battery level, network connection, ...) and a toolbar allowing to navigate in a StackView (as in the example Gallery provided by Qt). I would like to have two different background colors for each toolbarenter image description here. For now I have a header that have a toolbar and do the levels get organized with a ColumnLayout and two RowLayout. How could I go about it?


Solution

  • You can use the Material.primary attached property to specify the Material style ToolBar color. For example:

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Controls.Material 2.0
    
    ApplicationWindow {
        header: Column {
            ToolBar {
                Material.primary: Material.Red
            }
            ToolBar {
                Material.primary: Material.Blue
            }
        }
    }