main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3

import "."

Window {
    visible: true
    width: 320
    height: 240
    title: qsTr("Hello World")


    ColumnLayout {
        anchors.centerIn: parent

        spacing: 10

        TextNumberRect {
            number: 0
            label: "Zero"
        }

        TextNumberRect {
            number: 10
            label: "Ten"
        }

        TextNumberRect {
            number: 100
            label: "Hundred"
        }

        TextNumberRect {
            number: 1000
            label: "Thousand"
        }

        TextNumberRect {
            number: 10000
            label: "Ten Thousand"
        }

        TextNumberRect {
            number: 10
            label: "Ten Ten Ten Ten Ten Ten Ten Ten Ten Ten"
        }

        TextNumberRect {
            number: 10
            label: "Ten clip clip clip clip clip clip clip clip clip"
            clipWidth: 100
        }
    }
}


TextNumberRect.qml
import QtQuick 2.6

Rectangle {
    id: root

    color: "lightgreen"

    property int spacing: 10
    property real clipWidth: 0

    property int number: 0
    property string label: "Zero"

    height: Math.max(textMetricsLabel.height, textMetricsNumber.width) + spacing
    width: height + textLabel.width + 2 * spacing

    radius: height / 2

    TextMetrics {
        id: textMetricsLabel
        text: label
        font: textLabel.font
        elideWidth: clipWidth
        elide: clipWidth > 0 ? Qt.ElideRight : Qt.ElideNone
    }

    TextMetrics {
        id: textMetricsNumber
        text: number
        font: textNumber.font
    }

    Rectangle {
        id: rectCircle
        anchors {
            left: parent.left
            verticalCenter: parent.verticalCenter
        }
        height: parent.height
        width: height
        radius: parent.radius
        color: "green"

        Text {
            id: textNumber
            anchors.centerIn: parent
            color: "black"
            text: number
        }
    }

    Text {
        id: textLabel
        anchors {
            left: rectCircle.right
            leftMargin: spacing / 2
            verticalCenter:parent.verticalCenter
        }
        text: textMetricsLabel.elidedText
    }
}