Quick Controls 2 难看

Question

Qt 5.10，Windows10 桌面。

以下QML代码：

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
        }
    }
}

给出以下结果：

我觉得很糟糕：

1) "Setting1" 标签和复选框没有明显对齐。

2) 与文本大小相比，复选框和组合框的大小太大。

我是否遗漏了什么或者这是正常现象？

Answer 1

这是正常现象。

A Control 具有以下布局：

例如 Label 的填充为 0，另一方面，如果 CheckBox 有填充，则它们对齐有 2 种可能的解决方案：

设置CheckBox的leftPadding为0:

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

或者将Label设置为与CheckBox相同的leftPadding:

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

...

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

Qt 提供以下指南来自定义 Controls：

对于 ComboBox 大小的情况，您可以使用 FontMetrics 来计算合适的大小，在我的情况下，我处于 Linux 并且没有必要。

Quick Controls 2 难看

Quick Controls 2 bad looking

qt

qml

qt5

qtquickcontrols2