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

画布很好地填充了列的顶部，而文本在它下方排列就好了。 anchors.bottomMargin只在最底部设置一个小的边距。但无论我为文本设置什么边距或锚点，它们之间都有很多垂直的空白区域。文本只是数字，因此不需要担心需要占用更多空间的角色。我如何摆脱这个空间？

Answer 1

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

TextMetrics

FontMetrics有一个全面的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桌面PC与高DPI移动设备）：< / p>

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

Answer 2

您是否尝试过使用spacing财产？这用于设置布局内容之间的间距。默认值为5.尝试将其设置为0.

参考ColumnLayout spacing property

ColumnLayout中文本元素上方和下方的空白区域

2 个答案:

TextMetrics

行高

负间距

文字高度