Quick Controls 2 bad looking

问题

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?

回答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.

来源：https://stackoverflow.com/questions/49590221/quick-controls-2-bad-looking

标签

qml

qt5

qtquickcontrols2