qt - ColumnLayout中Text元素上方和下方的空白

我在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 {}
        }
    }
}

画布很好地填充了该列的顶部，并且文本在其下面对齐。那anchors.bottomMargin仅在最底部设置了一个小的边距。但是，无论我为文本设置了什么边距或锚点，它们之间都有很多垂直的空白空间。文本只是数字，因此无需担心需要占用更多空间的字符。我如何摆脱这个空间？

最佳答案

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

TextMetrics

FontMetrics具有一个全面的API，该API反映了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：

警告：在Windows上调用此方法非常慢。

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

线高

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

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台式机与高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
            }
        }
    }
}

textMetrics

qt - ColumnLayout中Text元素上方和下方的空白