Question

让我们看看这个非常简单的示例应用程序，在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块的字体大小之间产生非常奇怪的关系。它看起来像这样：

文字太小，ComboBoxes（和它们的字体）都很大。

如果我更改主要功能，使用此代码明确地将默认字体大小设置为系统字体大小（当我将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")));

看起来像这样：

现在＆＃34;相对维度＆＃34;更平衡，但总的来说只是“太大了”＃34;另外，如果我打开ComboBox，我会再次收到非常小的文字：

我是否错过了在这里设置默认值？如何才能实现更加平衡的外观，更好地融入操作系统＆＃39;原生字体大小？

Answer 1

将字体大小保留为默认值，而是设置项目的宽度。您可以显式设置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"
        }
    }
}

Answer 2

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

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

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

Answer 3

您只需在组合框和文本字段中尝试设置：font.pointSize: 12即可。这在Windows 10的Qt 5.9上适用于我。我仍然试图想出如何更改组合框下拉内的字体大小;我知道的时候会扩大这个答案。

Qml Qt Quick Control 2：Text和ComboBox之间的字体大小差异

3 个答案: