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?

Answer 1

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:

• https://doc.qt.io/qt-5.10/qtquickcontrols2-customize.html
• https://doc.qt.io/qt-5.10/qml-qtquick-controls2-control.html

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.