Qml Qt Quick Control 2：Text和ComboBox的字体大小区别

Posted 2023-02-14

【中文标题】Qml Qt Quick Control 2：Text和ComboBox的字体大小区别

【英文标题】：Qml Qt Quick Control 2: Font size difference between Text and ComboBox

【发布时间】：2017-06-12 12:45:50

【问题描述】：

让我们看看这个非常简单的示例应用程序，它在 Windows 10 上使用 QT 5.9 构建：

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0

ApplicationWindow 
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout 



        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.right: parent.right
        anchors.rightMargin: 20

        Text 
            id: text
            text: "This is a sample Text"
        
        ComboBox 
            model: [
                "A",
                "B",
                "C"
            ]
        

        Text 
            text: "Another Text"
        
        TextField 
            anchors.left: parent.left
            anchors.right: parent.right
            text: "User Input"
        
    

如果我在没有从 QT Creator 进一步修改的情况下运行它，我会在 Text 和 ComboBox 和 TextField 块的字体大小之间得到一个非常奇怪的关系。它看起来像这样：

文本太小，组合框（及其字体）很大。

如果我更改主函数以使用此代码将默认字体大小显式设置为系统字体大小（当我将setPointSizeF 硬编码为 12 时相同，这是 Windows 上假定的标准大小）：

QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);

auto font = app.font();
QFontInfo fi(font.defaultFamily());
font.setPointSizeF(fi.pointSizeF());
app.setFont(font);

QQmlApplicationEngine engine;
engine.load(QUrl(QLatin1String("qrc:/main.qml")));

看起来像这样：

现在“相对维度”更加平衡，但总体而言，一切都“太大”了。此外，如果我打开 ComboBox，我会再次得到非常小的文本：

我错过了在这里设置一些默认值吗？如何获得更平衡的外观，更好地适应操作系统的原生字体大小？

【参考方案1】：

组合框委托使用与应用程序默认字体不同的字体。

可以更改代表字体以匹配应用程序的其余部分，如下所示：

ComboBox 
    id: control

    delegate: ItemDelegate 
        width: control.width
        text: control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
        font.family: control.font.family
        font.pointSize: control.font.pointSize
        highlighted: control.highlightedIndex === index
        hoverEnabled: control.hoverEnabled
    

【参考方案2】：

将字体大小保留为默认值，而是设置项目的宽度。您可以显式设置 ComboBox 和 TextField 的 width，或者如果您想使用 ColumnLayout 使所有项目的大小保持一致，请参见下面的示例，

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.0

ApplicationWindow 
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ColumnLayout 

        anchors.left: parent.left
        anchors.leftMargin: 20
        width: text.width

        Text 
            id: text
            text: "This is a sample Text"
        
        ComboBox 
            Layout.fillWidth: true
            model: [
                "A",
                "B",
                "C"
            ]
        

        Text 
            text: "Another Text"
        
        TextField 
            Layout.fillWidth: true
            text: "User Input"
        
    

【讨论】：

我想你误解了我的问题。在我的代码中，Text（非常小）和ComboBox（大）的字体大小不匹配——您的代码不会改变这一点。也许我的截图有点不清楚。我用更新的屏幕截图更新了问题（实际上，您的代码正在运行）并稍微改写一下。我真的不明白为什么 ComboBox 使用 12pt 作为 Font-Size 而 Text 使用 8.

是的，我误会了。我已经在 Win 7 和 Ubuntu 上使用 Qt 5.9 运行了您问题中的代码，并且 3 种项目类型的字体大小都是相同的，这意味着我将无法提供帮助。

【参考方案3】：

您可以简单地尝试在组合框和文本字段中设置：font.pointSize: 12。这适用于 Windows 10 中的 Qt 5.9。我仍在试图弄清楚如何更改组合框下拉列表中的字体大小；当我知道时会扩展这个答案。

【讨论】：

你可以这样做：popup.font.pointSize: 12