How to use qml code to change ToolBar background color (Qt Quick Controls 2.0)



  • Hi guys,

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0
    import QtQuick.Controls.Material 2.0
    
    ApplicationWindow {
        id: window
    
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Page{
            id: page
            anchors.fill: parent
            header: ToolBar{
                id: toolBar
                Material.foreground: "white"
                Material.background: "white"
                Material.accent: "white"
                Label{
                    id: label
                    anchors.centerIn: parent
                    font.family: "Source Han Sans Light"
                    font.pixelSize: 24
                    color: "#f0f0f0"
                    text: "Main"
                }
            }
        }
    }
    
    

    ( ⊙ o ⊙ )

    I looked the example code, it seems to create a file called qtquickcontrols2.conf,

    but i find it is not convenient..such as changing theme color...

    Could you guys please teach me how to fix it? (=・ω・=)

    Thanks a lot. :)



  • You seem to be already altering the background and foreground colors, so I suppose your question is actually "how to run the app with the Material style"? You have several options. Besides the configuration file, you can use C++, a command line argument, or an environment variable. More details: http://doc.qt.io/qt-5/qtquickcontrols2-styles.html.



  • @jpnurmi
    Hi,

    Thanks for your answering.

    I can use the Material Style in Qt Quick, but my question is:

    How to change ToolBar background color?

    If you are free, you can run my code.

    😊😊



  • HI @Accelerated,

    You can try to change the background property of the ToolBar (See Customizing ToolBar)

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0
    import QtQuick.Controls.Material 2.0
    
    ApplicationWindow {
        id: window
    
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        Page{
            id: page
            anchors.fill: parent
            header: ToolBar{
                id: toolBar
                Material.foreground: "white"
                Material.background: "white"
                Material.accent: "white"
                Label{
                    id: label
                    anchors.centerIn: parent
                    font.family: "Source Han Sans Light"
                    font.pixelSize: 24
                    color: "#f0f0f0"
                    text: "Main"
    
                }
                background: Rectangle {
                    anchors.fill: parent
                    color : "red"
                }
            }
        }
    }
    
    


  • The Material style uses the primary color for ToolBar:

    ToolBar {
        Material.primary: Material.Red
    }
    


  • @jpnurmi
    Hi jpnurmi!

    Thank you for you reply!

    I have solved my problem.

    (^__^) ~



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.