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

Accelerated

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. :)

jpnurmi

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.

Accelerated

@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.

😊😊

Julien B

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"
            }
        }
    }
}

jpnurmi

The Material style uses the primary color for ToolBar:

ToolBar {
    Material.primary: Material.Red
}

Accelerated

@jpnurmi
Hi jpnurmi!

Thank you for you reply!

I have solved my problem.

(^__^) ~