How can I space QML elements based upon text size?

[RokeJulianLockhart]

Context

With CSS3, I can apply vertical space with caps (or lhs), and widths with ems. However, with QML, all I see available is spacing, which appears to be equivalent to CSS3's px.

The Question

Is this an X/Y problem? Should I not space based upon text size in QML?

A Demonstrative Example

#!/usr/bin/env -S qml
import QtQuick // 6.9
import QtQuick.Controls // 6.9
import QtQuick.Layouts // 6.9
ApplicationWindow {
	visible: true
	title: qsTr("Application Menu")
	Row {
		ColumnLayout {
			Label {
				text: "Hello from QML!"
			}
			Button {
				text: "Click Me"
				onClicked: console.log("Button clicked")
			}
			Button {
				text: "Click Me"
				onClicked: console.log("Button clicked")
			}
			Button {
				text: "Click Me"
				onClicked: console.log("Button clicked")
			}
			Button {
				text: "Click Me"
				onClicked: console.log("Button clicked")
			}
		}
		ColumnLayout {
			Label {
				text: "Hello from QML!"
			}
			Button {
				text: "Click Me"
				onClicked: console.log("Button clicked")
			}
			Button {
				text: "Click Me"
				onClicked: console.log("Button clicked")
			}
			Button {
				text: "Click Me"
				onClicked: console.log("Button clicked")
			}
			Button {
				text: "Click Me"
				onClicked: console.log("Button clicked")
			}
		}
	}
}

[JKSH]

@RokeJulianLockhart said in How can I space QML elements based upon text size?:

I want to have the spacing be relative to the font size

FontMetrics might be your friend: https://doc.qt.io/qt-6/qml-qtquick-fontmetrics.html

[Axel Spoerl]

I don't fully understand the problem / question.
QML is a declarative language, CSS is a style sheet syntax. They can't really be compared to each other: The style sheet doesn't know what it will eventually be applied to. In contrast, QML declares actual controls, which hold the properties they require.

That said:
The code above declares a label and a button inside a row layout. Spacing is horizontal in this context. Laying out a row doesn't require vertical information. A ColumnLayout - which could hold a row layout inside - considers its spacing property to be vertical.

[RokeJulianLockhart]

The code above declares a label and a button inside a row layout. Spacing is horizontal in this context. Laying out a row doesn't require vertical information. A ColumnLayout - which could hold a row layout inside - considers its spacing property to be vertical.

@Axel-Spoerl, my apologies. Pasted the wrong code. I've remediated it.

QML is a declarative language, CSS is a style sheet syntax. They can't really be compared to each other: The style sheet doesn't know what it will eventually be applied to. In contrast, QML declares actual controls, which hold the properties they require.

QML appears to be both, else it surely wouldn't permit me to declare a spacing value. As an example, HTML provides no such property; spacing is solely the purview of CSS in its context.

Have I misunderstood? I can't imagine that I need to write a QQuickStyle merely to have some layouts have non-0 px margins, so I presume so. Perhaps, a screenshot is of use:

I expect some default padding inside where the window decorations border (in HTML, the body), and between the columns.

Thanks for the assistance.

[Axel Spoerl]

I am sorry, I still don't understand what the problem is. The new code doesn't set any spacing.
Where is the assumption rooted, that QML is some sort of CSS syntax?
What do you want to achieve?

[RokeJulianLockhart]

The new code doesn't set any spacing. What do you want to achieve?

@Axel-Spoerl, I want to have the spacing be relative to the font size. To my knowledge, that is how all sizing is accomplished elsewhere. Otherwise:

1. When I've a high-resolution display, it's going to be mighty small.

2. My QML application's padding might differ to another's. That's poor form, because inter-application consistency matters.

If there's a standard padding size, that could at least be a stopgap, I suppose. In CSS, this is generally defined by the platform vendors (Chromium and Gecko's development teams), so I would assume that Qt or KDE, etcetera, would provide one if this is the standard. However, this'd solely be feasible if the spacing metric scales with the display scale.

Where is the assumption rooted, that QML is some sort of CSS syntax?

No. It appears to be a combination of layout declaration (like HTML), style (like CSS), and code (it literally permits one to embed JS), all in one. It certainly relegates most logic to a backend, like C++ or Python, and most style to a QQuickStyle, but it appears to rely upon hardcoded paddings for most elements.

[JKSH]

@RokeJulianLockhart said in How can I space QML elements based upon text size?:

I want to have the spacing be relative to the font size

FontMetrics might be your friend: https://doc.qt.io/qt-6/qml-qtquick-fontmetrics.html

[RokeJulianLockhart]

@JKSH, thank you! That provides a direct answer, of which spacing: fontMetrics.averageCharacterWidth appears to be the most general-purpose solution. I'm surprised that the default spacing value is 0 for so many elements, though. Perhaps, KDE's QQuickStyle lacks defaults that it should provide?

Regardless, is this generally how spacing is conducted in QML? If so (which I expect), I'll presume that there's some guidance documented about when/where one should utilise such values?