No Background Color in QML Material Application

egbiomated · wrote on 5 May 2021, 14:46

My QML app's button doesn't show any background color on my button.

I am using the Material theme and have tried to change the settings in a qtquickcontrols2.conf file but still no luck with setting the button background property. It appears that this would normally use the accent color, but this color never actually sets however the Primary Background and Foreground colors do work.

Example File:

[Controls]
Style=Material

[Universal]
Theme=System
Accent=Yellow
Background=Green
Foreground=Orange
Primary=Pink


[Material]
Theme=Light
Background=Grey
Foreground=Black
Accent=Purple
Primary=Blue
Palette\Button=#212121

It get's more interesting when i log the values that are available on a specific button:

ml: objectName: 
qml: parent: Button_QMLTYPE_22(0x2100568)
qml: data: [object Object]
qml: resources: [object Object]
qml: children: [object Object]
qml: x: 0
qml: y: 6
qml: z: -1
qml: width: 360
qml: height: 88
qml: opacity: 1
qml: enabled: true
qml: visible: true
qml: visibleChildren: [object Object]
qml: states: [object Object]
qml: transitions: [object Object]
qml: state: 
qml: childrenRect: QRectF(0, 0, 360, 88)
qml: anchors: QQuickAnchors(0x2261900)
qml: left: QVariant(QQuickAnchorLine, )
qml: right: QVariant(QQuickAnchorLine, )
qml: horizontalCenter: QVariant(QQuickAnchorLine, )
qml: top: QVariant(QQuickAnchorLine, )
qml: bottom: QVariant(QQuickAnchorLine, )
qml: verticalCenter: QVariant(QQuickAnchorLine, )
qml: baseline: QVariant(QQuickAnchorLine, )
qml: baselineOffset: 0
qml: clip: false
qml: focus: false
qml: activeFocus: false
qml: activeFocusOnTab: false
qml: rotation: 0
qml: scale: 1
qml: transformOrigin: 4
qml: transformOriginPoint: QPointF(180, 44)
qml: transform: [object Object]
qml: smooth: true
qml: antialiasing: true
qml: implicitWidth: 64
qml: implicitHeight: 36
qml: containmentMask: null
qml: layer: QQuickItemLayer(0x221c2e0)
qml: color: #d6d7d7
qml: gradient: undefined
qml: border: QQuickPen(0x207b528)
qml: radius: 2

I can see that the color is set and that i should be able to see my button. This data is from prinitng all of the properties attached to the background property.

Another strange issue is that i am able to get the background color to show up when i run the QML app on one raspberry pi model 3b model v1 but not a raspberry pi 3b model v1.2

I've looked through the source code as well:

    background: Rectangle {
        implicitWidth: 64
        implicitHeight: control.Material.buttonHeight

        radius: 2
        color: !control.enabled ? control.Material.buttonDisabledColor :
                control.highlighted ? control.Material.highlightedButtonColor : control.Material.buttonColor

        PaddedRectangle {
            y: parent.height - 4
            width: parent.width
            height: 4
            radius: 2
            topPadding: -2
            clip: true
            visible: control.checkable && (!control.highlighted || control.flat)
            color: control.checked && control.enabled ? control.Material.accentColor : control.Material.secondaryTextColor
        }

        // The layer is disabled when the button color is transparent so you can do
        // Material.background: "transparent" and get a proper flat button without needing
        // to set Material.elevation as well
        layer.enabled: control.enabled && control.Material.buttonColor.a > 0
        layer.effect: ElevationEffect {
            elevation: control.Material.elevation
        }

        Ripple {
            clipRadius: 2
            width: parent.width
            height: parent.height
            pressed: control.pressed
            anchor: control
            active: control.down || control.visualFocus || control.hovered
            color: control.flat && control.highlighted ? control.Material.highlightedRippleColor : control.Material.rippleColor
        }
    }

All of the variables are set that should be showing the background so i am a little stumped.

Running boot2qt 5.15.2