快速控制 2 不好看

Question

Qt 5.10，Windows 10 桌面。

以下 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

这是正常行为。

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：

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

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