QML/Qt：使显示的文本尽可能大，具体取决于包含它的父级

Question

我正在尝试制作一个非常简单的 KDE-Plasma 小部件，其中只显示特定的数字。我想让这个显示的数字的字体大小尽可能大，具体取决于包含它的父级。这是现在的样子：

如你所见，里面的文字周围有很多space。我真正想要的是类似于 KDE Plasma 中的“日期和时间”小部件（我的小部件就在它旁边以供比较）：

在这里，显示的时间周围 space 少得多，同时只要面板高度发生变化也会自动调整大小。

当前代码如下所示：

import QtQuick 2.6
import QtQuick.Layouts 1.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.plasmoid 2.0


Item {
    id: main
    anchors.fill: parent
    Layout.minimumWidth: units.iconSizes.large
    Layout.minimumHeight: units.iconSizes.large

    
    Plasmoid.preferredRepresentation: Plasmoid.fullRepresentation


    PlasmaComponents.Label {
        id: display

        anchors {
            fill: parent
            margins: Math.round(parent.width * 0.1)
        }

        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter

        text: foobar

        font.pixelSize: 1000;
        minimumPointSize: theme.smallestFont.pointSize
        fontSizeMode: Text.Fit
        font.bold: true
    }

    Timer {
        some stuff
    }
}

我试着查看上面的日期和时间小部件的代码，并写下了具有相同 positioning/styling 属性的完全相同的 layouts/controls（这就是您在上面的代码中看到的内容）但是我的 text/or 周围有很多 space 字体大小仍然很小。

Answer 1

我试过你的代码，它正确地调整了字体大小。对于文字周围的间距，有两点：

通过调整您使用的 margins 值可以轻松控制左右间距。对于更少 space，请尝试 Math.round(parent.width * 0.05).

顶部和底部的间距较大，因为您的父对象的形状是正方形，而文本的形状是矩形。为了使文本适合正方形的高度而不超过正方形的宽度，文本不仅需要调整大小，还需要垂直拉伸。但是 QML 没有一个简单的方法来做到这一点，我怀疑这真的是你想要的。

编辑：

如果您确实需要字体拉伸，我会为您指明答案。

Answer 2

感谢@JarMan 的输入，由于根 (item) 元素为正方形，因此缺少 space，我能够意识到我的文本以小字体呈现。

我现在想出要更改 KDE-Plasma 面板内根元素的布局大小，需要弄乱 Layout.preferredWidth 和 Layout.preferredHeight。

这是我所做的：

item {
    .
    .
    Layout.preferredWidth: 150 * units.devicePixelRatio
    Layout.preferredHeight: 50 * units.devicePixelRatio
    .
    .
}

注意：150 和 50 值不是最终值。它基本上给出了根元素的宽度和高度的比例（我想要一个矩形）。当 Plasma Panel 调整大小时，它也会自动调整内部内容的大小。

QML/Qt：使显示的文本尽可能大，具体取决于包含它的父级

QML/Qt: Make displayed text as large as possible depending on the parent containing it

qt

widget

qml

kde-plasma