QML/Qt：根据包含它的父级使显示的文本尽可能大

编程问答 2022-06-01

问题描述

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

enter image description here

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

enter image description here

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

这是当前代码的样子：

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

我尝试查看上述日期和时间小部件的代码，并用相同的定位/样式属性写下了完全相同的布局/控件（这就是您在上述代码中看到的内容），但我得到了很多文本周围的空间/或字体大小仍然很小。

解决方法

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

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

enter image description here

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

enter image description here

编辑：

如果您确实想要字体拉伸，我会为您指出 this 答案。

,

多亏@JarMan 的输入，我才意识到我的文本正在以小字体呈现，因为根 (item) 元素的形状为方形，因此空间不足。

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

这是我所做的：

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

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

kde-plasmaqmlqmlqmlqtqtqtwidget