Qml Qt Quick Control 2：在没有绑定循环的情况下缩放字体大小

Question

我想像这样缩放Label 的字体大小：

Label {
    font.size: font.size*0.8
}

当然，这会创建一个绑定循环。有没有办法在不创建隐藏的Label 元素的情况下做到这一点？

Label {
    id: hiddenLabel
}

Label {
    font.size: hiddenLabel.font.size*0.8
}

缩放整个标签并不是最优的，因为文本质量下降：

Label {
    scale: 0.8
}

问候，

Answer 1

除了已经提到的其他选项，还有Qt.application.font：

Label {
    font.pixelSize: Qt.application.font.pixelSize * 0.8
}

此只读属性保存QGuiApplication::font() 返回的默认应用程序字体。

commit message for the change 提到了当时考虑的其他选项：

• "<h3>Large text</h3>" - 在文本下方添加额外的空间，因为它是一个 HTML 元素，所以如果你想要一个体面的布局，它并不是很有用。
• 硬编码像素大小。与 Qt::AA_EnableHighDpiScaling 结合使用时可以正常工作，只要您猜到正确的大小 适用于您定位的每个设备/显示器。不工作 无需设置 Qt::AA_EnableHighDpiScaling。
• 使用 FontMetrics/TextMetrics。工作正常，但有点冗长。
• 使用空的文本元素。创建一个不必要的项目。已被 FontMetrics/TextMetrics 取代。
• defaultPixelSize/implicitPixelSize 和 defaultPointSize/implicitPointSize。已经有字体相关的 字体分组属性之外的属性，所以这不会是 不合适，但 API 已经相当大了。

如果您确实需要根据您正在使用的特定控件确定字体大小，唯一有保证的方法是创建该控件的“空”/“默认构造”实例：

Button {
    id: dummyButton
}

Button {
    font.pixelSize: dummyButton.font.pixelSize * 0.8
}

这是因为每种样式对于不同类型的控件都有不同的字体大小。例如，请参阅Material style's theme code。

Answer 2

您可以通过在Component.onCompleted 中设置字体大小来使用赋值而不是绑定

Label {
    text: 'Þetta reddast'
    Component.onCompleted: font.pixelSize *= 0.8
}

这会产生负面影响，即文本会被布局两次：一次用于较大尺寸，然后再次用于较小尺寸。

我会在style.qml singleton 中适当地定义一组fonts 和proposed here。在那里，您可以使用应用程序的默认字体指标来计算相对大小，这样您以后就不必费心了。

Answer 3

FontMetrics {
    id: fontMetrics
}

Label {
    font.size: fontMetrics.font.size * 0.8
}

Answer 4

我建议在main.qml 中定义一个全局属性，而不是分别在每个元素中定义文本大小。
为此，在main.qml 中定义一个属性，如下所示：

readonly property Item fontCenter: Item {
    property real heading1PointSize: 21
    property real heading2PointSize: 18
    property real bodyPointSize: 12
}

并像这样在任何地方使用它：

Text {
    text: "sample body text"
    font { pointSize: fontCenter.bodyPointSize }
}

如果您有问题，您可以根据另一个设置属性值：

readonly property Item fontCenter: Item {
    property real bodyPointSize: 12
    property real heading1PointSize: bodyPointSize * 2.0
    property real heading2PointSize: bodyPointSize * 1.8
}

或者对于特殊情况使用如下：

Button {
    text: "Special Offer!"
    font { pointSize: fontCenter.bodyPointSize * 1.3 }
}