Qt quick ApplicationWindow 'color' for background color doesn't work

zhangwt picture zhangwt · Mar 4, 2015 · Viewed 9.7k times · Source

I created a simple Qt quick application with a single main.qml, which is like the code below. The problem is the background color of window wasn't set to #ffffff, instead it's set to light gray (the default color of window on Windows I thought). The rectangle's color is set correctly.

I'm using Qt Creator 3.3.1 (opensource) based on Qt 5.4.1 on windows.

import QtQuick 2.4
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.3
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("Hello")
    width: 200
    height: 200
    visible: true
    color: "#FFFFFF"

    Rectangle {
        id: rectangle1
        width: 100
        height: 100
        color: "#ffffff"
    }
}

Answer

Meefte picture Meefte · Mar 4, 2015

ApplicationWindowStyle QML Type provide styling for ApplicationWindow. Default ApplicationWindowStyle represent background as:

background: Rectangle {
        visible: !styleData.hasColor
        color: SystemPaletteSingleton.window(true)
}

styleData.hasColor property is defined as:

property QtObject styleData: QtObject {
    readonly property bool hasColor: window.color != "#ffffff"
}

So, if your ApplicationWindow color is #FFFFFF, you see light gray rectangle over window background.

To make white background, you need to set custom ApplicationWindowStyle.

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    style: ApplicationWindowStyle {
        background: Rectangle {
            color: "#FFFFFF"
        }
    }
}