White space above and below text items in a column

I ran into this problem and there was no solution. However in Qt 5.4 FontMetrics and TextMetrics QML.

TextMetrics

FontMetrics has a complete API that mirrors the C ++ QFontMetricsF class , some of which are imperative (functions). TextMetrics takes the functions in FontMetrics and makes them declarative (properties) for convenience, and some additional properties for completeness.

Given some text string, TextMetrics will provide you with a property tightBoundingRect

that, as its name suggests, is a hard bounding box around the string without the extra space you usually see. Take that height from a line-height that has only numbers in it and you end up with an excess height that can be used as negative spacing:

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

      

        
        
        
      

    

Pay attention to the warning from the documentation:

Warning. Calling this method is very slow on Windows.

This shouldn't be a problem if you only set the text / font to the TextMetrics object once, as it will only calculate once.

Line height

An alternative but sketchy approach is to basically guess the value for the property lineHeight

for each item 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 }
        }
    }
}

      

        
        
        
      

    

Negative distance

As Shubhanga said, negative spacing will work as well, but it is also not that great:

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

      

        
        
        
      

    

Text height

Again, mentioned by Shubhanga, setting the text height will obviously work, but there is still speculation. Like the above two solutions, you will have to change the value you subtract from the height every time you change the font size and it won't scale between devices (low DPI desktop for PC and high DPI mobile):

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