Spacing in our apps

Carl Schwan carl at carlschwan.eu
Sun Dec 17 12:21:32 GMT 2023


Hi,

I'm been trying to unify a bit the usage of spacing in our apps and I'm 
noticing a difference between how we do it in QWidgets apps and QML apps.

In QtWidgets apps, we use

- pixelMetric(QStyle::PM_Layout{Left,Right,Top,Bottom}Margin) for the margins
- pixelMetric(QStyle::PM_Layout{Vertical,Horizontal}Margin) for the spacing 
between items in layout

In practice all these pixel metrics are equal to 6 pixels with Fusion, Oxygen 
and Breeze. These means that in some cases, some apps are even hardcoding 
these values in their .ui files, which is bad and we should try to avoid this.

In Kirigami apps, we use:

- Kirigami.Units.smallSpacing = 4 pixels
- Kirigami.Units.mediumSpacing = 6 pixels
- Kirigami.Units.largeSpacing = 8 pixels

In most cases, smallSpacing and largeSpacing are used as mediumSpacing was 
introduced later on, so it doesn't match the values from QtWidgets apps. Worse 
we don't really have clear guidelines when to use small or large spacing, so 
it's mostly done arbitrarely and not consistantly :(

Also having 3 different Kirigami.Units.*Spacing values that are each only 2 
pixels appart doesn't sounds like a great idea as it's hard to see a 
difference between these values taken side by side.

I see three ways to move forward with this issue:

a) Remove smallSpacing and largeSpacing from Kirigami, and rename 
mediumSpacing to just spacing. This unified spacing value would be defined in 
qqc2-desktop-style to use whatever value is defined in the current QStyle.

a bis) Instead of creating only a generic "spacing" property, we create a 
"Kirigami.Units.margins" or "Kirigami.Units.paddings" property to use for 
paddings of QtQuick Controls and mapped to the Layout*Margin pixel metrics and 
a "Kirigami.Units.spacing" property mapped to the Layout*Spacing pixel 
metrics. For Breeze and Oxygen, both value would map to 6 pixels anyway, but 
it might make it easier to switch to other values in the future as well as 
make the usage of Units value more explit.

b) Use 4 pixels as standard spacing in our QtWidgets apps and add a "margins" 
and "largeMargin" helper methods in KWidgetsAddons or QStyle similar to this

QMargins QStyle::largeMargins() const
{
    return QMargins{
        pixelMetric(QStyle::PM_LayoutLeftMargin),
        pixelMetric(QStyle::PM_LayoutTopMargin),
        pixelMetric(QStyle::PM_LayoutRightMargin),
        pixelMetric(QStyle::PM_LayoutBottomMargin)
    }
}

QMargins QStyle::largeMargins() const
{
    return QMargins{
        pixelMetric(QStyle::PM_LayoutLeftMargin) * 2,
        pixelMetric(QStyle::PM_LayoutTopMargin) * 2,
        pixelMetric(QStyle::PM_LayoutRightMargin) * 2,
        pixelMetric(QStyle::PM_LayoutBottomMargin) * 2
    }
}

then we can remove mediumSpacing from Kirigami and ensure that in both our 
Kirigami and QtWidgets apps, we use small or large only no spacing at all. We 
should still try to define some guidelines when to use large or small spacing.

c) Do nothing and accept that spacing in Kirigami apps and QtWidgets are 
different. We might still want to define in our doc/hig the usecase for 
largeSpacing and smallSpacing

Personally I see advantages and disadvantages for all these solutions. I had a 
preference on b) but while writing this mail I'm slowly liking the a bis) idea 
more and more as we might not need a small spacing and large spacing and could 
get away with just one unified spacing.

Cheers,
Carl




More information about the kde-devel mailing list