Quick Controls 2 bad looking

Question

Qt 5.10, Windows 10 desktop.

The following QML code:

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 250
    height: 100
    title: qsTr("My app")

    GridLayout
    {
        columns: 2

        Label {
            text: "Setting1:"
        }

        ComboBox {
            model: ["100%", "90%", "80%", "70%", "60%", "50%", "40%", "30%"]
        }

        CheckBox {
            id: tidle
            text: "Setting2:"
        }

        ComboBox {
            model: ["90%", "80%", "70%", "60%", "50%", "40%", "30%"]
            enabled: tidle.checked
        }
    }
}

gives the following result:

It looks quite badly for me:

1) "Setting1" label and checkbox are not visibly aligned.

2) Checkbox and ComboBox sizes are too big comparing to text size.

Do I miss something or it's the normal behavior?

In addition to the answer, the default style is focused more on being performant than pretty - try some of the other styles: doc.qt.io/qt-5.10/qtquickcontrols2-styles.html — Mitch

eyllanesc eyllanesc · Accepted Answer · 2018-03-31T17:31:43

It is a normal behavior.

A Control has the following layout:

For example Label has a padding of 0, on the other hand the CheckBox if it has it so that they are aligned there are 2 possible solutions:

Set the leftPadding of CheckBox to 0:

CheckBox {
    id: tidle
    text: "Setting2:"
    leftPadding: 0
}

Or set the Label to the same leftPadding of CheckBox:

Label {
    text: "Setting1:"
    leftPadding : tidle.leftPadding
}

...

CheckBox {
    id: tidle
    text: "Setting2:"
}

Qt offers the following guidelines to customize Controls:

For the case of the size of the ComboBox you could use FontMetrics to calculate an appropriate size, in my case I'm in Linux and it was not necessary.

Quick Controls 2 bad looking

1 Answers