Loading...

XML

Word

Printable

Details

Type: Bug
Resolution: Fixed
Priority: P1: Critical
Fix Version/s: QDS 4.1
Affects Version/s: QDS 3.9
Component/s: Emulation Layer (Nodeinstances and Puppet)
Labels:
None

Commits:
7ad7eb606 (dev), 849a8829d (6.5), c609baf73 (qds/dev)

Description

Buttons in default/windows style do not have the correct implicit size in the form editor.

This is on Windows using Qt 6.4.1, but there are similar issues on macOS (https://bugreports.qt.io/browse/QDS-8331).
Other controls are affected as well.

This is how it looks in the form editor:

This is how the application preview looks:

The button with an explicit size is shown correctly.

Other styles work as expected:

basic:

fusion:

material:

imagine

universal

Other controls have similar issues:

basic

default/windows

application preview

I suspect this is related to the integration with the native theming and the fact that we render the controls offscreen for the form editor.

The issue seems to be related to QML itself.

This is the source of DefaultButton.qml.

// Copyright (C) 2020 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.impl
import QtQuick.Templates as T
import QtQuick.NativeStyle as NativeStyle

T.Button {
    id: control

    readonly property bool __nativeBackground: background instanceof NativeStyle.StyleItem

    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)

    leftPadding: __nativeBackground ? background.contentPadding.left : 5
    rightPadding: __nativeBackground ? background.contentPadding.right : 5
    topPadding: __nativeBackground ? background.contentPadding.top : 5
    bottomPadding: __nativeBackground ? background.contentPadding.bottom : 5

    background: NativeStyle.Button {
        control: control
        contentWidth: contentItem.implicitWidth
        contentHeight: contentItem.implicitHeight
    }

    icon.width: 24
    icon.height: 24
    icon.color: control.palette.buttonText

    contentItem: IconLabel {
        spacing: control.spacing
        mirrored: control.mirrored
        display: control.display

        icon: control.icon
        text: control.text
        font: control.font
        color: control.palette.buttonText
    }
}

I get the following warning when creating the control (as a component).

"Warning: qrc:/qt-project.org/imports/QtQuick/NativeStyle/controls/DefaultButton.qml:1: ReferenceError: implicitBackgroundWidth is not defined (qrc:/qt-project.org/imports/QtQuick/NativeStyle/controls/DefaultButton.qml:1, (null))\r"

Fully qualifying the properties does fix the issue:

implicitWidth: Math.max(control.implicitBackgroundWidth + control.leftInset + control.rightInset,
                                control.implicitContentWidth + control.leftPadding + control.rightPadding)
        implicitHeight: Math.max(control.implicitBackgroundHeight + control.topInset + control.bottomInset,
                                 control.implicitContentHeight + control.topPadding + control.bottomPadding)

Assigning this to the background breaks the default scoping and adds the requirement of the full qualification:

  background: NativeStyle.Button {
            control: control
            contentWidth: contentItem.implicitWidth
            contentHeight: contentItem.implicitHeight
        }

Without the assignment to background this has no "negative" effect.

Workaround add full qualification for all NativeStyle default controls.