qt - ColumnLayout 中文本元素上方和下方的空白空间

Question

我在 ColumnLayout 中有 QML Text 元素，如下所示:

import QtQuick 2.0
import QtQuick.Layouts 1.1
Item {
    Rectangle {
        ColumnLayout {
            anchors.fill: parent
            anchors.bottomMargin: 5
            Canvas {
                Layout.fillHeight: true
                Layout.fillWidth: true
            }
            Text {}
            Text {}
            Text {}
        }
    }
}

Canvas 很好地填充了列的顶部，文本在其下方排列得很好。该anchors.bottomMargin仅在最底部设置一个小边距。但无论我为文本设置什么边距或 anchor ，它们之间都会有很多垂直的空白空间。文本只是数字，因此不必担心字符需要占用更多空间。我如何摆脱这个空间？

Answer 1

我也遇到了这个问题，没有解决。然而，在 Qt 5.4 中，FontMetrics和 TextMetrics添加了 QML 类型。

文本指标

FontMetrics 有一个全面的 API，它反射(reflect)了 C++ QFontMetricsF类，其中一些是命令式的(函数)。 TextMetrics 采用 FontMetrics 中的函数，并为方便起见将它们设为声明性(属性)，并添加一些额外的属性以确保完整性。

给定一些文本字符串，TextMetrics 将为您提供 tightBoundingRect 属性，顾名思义，它是字符串周围的紧密边界矩形，没有您通常看到的额外空间。从仅包含数字的字符串的高度中获取该高度，您将得到可用作负间距的多余高度:

import QtQuick 2.4

Item {
    Rectangle {
        anchors.fill: parent

        TextMetrics {
            id: metrics
            text: "1"
        }

        Column {
            anchors.fill: parent
            anchors.bottomMargin: 5
            spacing: -(metrics.height - metrics.tightBoundingRect.height)

            Text { text: "123" }
            Text { text: "123" }
            Text { text: "123" }
        }
    }
}

注意 warning来自文档:

Warning: Calling this method is very slow on Windows.

如果您只在 TextMetrics 对象上设置一次文本/字体，那应该不是问题，因为它只会计算一次。

行高

另一种粗略的方法是基本上猜测每个 Text 项的 lineHeight 属性的值。

import QtQuick 2.0

Item {
    Rectangle {
        anchors.fill: parent

        Column {
            anchors.fill: parent
            anchors.bottomMargin: 5
            Text { text: "123"; lineHeight: 0.8 }
            Text { text: "123"; lineHeight: 0.8 }
            Text { text: "123"; lineHeight: 0.8 }
        }
    }
}

负间距

正如 Shubhanga 所说，负间距也可以，但效果也不是很好:

import QtQuick 2.0

Item {
    Rectangle {
        anchors.fill: parent

        Column {
            anchors.fill: parent
            anchors.bottomMargin: 5
            spacing: -4
            Text { text: "123" }
            Text { text: "123" }
            Text { text: "123" }
        }
    }
}

文字高度

再次，Shubhanga 提到，明确设置文本的高度是可行的，但仍然涉及猜测。与上面的两个解决方案一样，每次更改字体大小时，您都必须更改从高度中减去的值，并且它不会在设备之间缩放(低 DPI 桌面 PC 与高 DPI 移动设备):

import QtQuick 2.0

Item {
    readonly property int heightAdjustment: 5
    Rectangle {
        anchors.fill: parent

        Column {
            anchors.fill: parent
            anchors.bottomMargin: 5
            Text {
                text: "123";
                height: implicitHeight - heightAdjustment
            }
            Text {
                text: "123";
                height: implicitHeight - heightAdjustment
            }
            Text {
                text: "123";
                height: implicitHeight - heightAdjustment
            }
        }
    }
}