QML: Binding loop detected when trying to calculate font size automatically

Question

Here is the code:

import QtQuick 2.10
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1

ApplicationWindow {

    id: mainW
    visible: true
    width: 1000
    height: 500
    title: qsTr("Hello World")

    Column{
        anchors.centerIn: parent
        spacing: 0.05*parent.height

        Button {
            id: btn1
            font.family: "Robotto"
            width: 0.8*mainW.width
            height: 0.1*mainW.height
            text: "TEXT1"
            font.pixelSize: 0.8*height
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Button {
            id: btn2
            font.family: "Robotto"
            width: 0.8*mainW.width
            height: 0.1*mainW.height
            text: "A"
            font.pixelSize: 0.8*height
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Button {
            id: btn3
            font.family: "Robotto"
            width: 0.8*mainW.width
            height: 0.2*mainW.height
            //text: "A really really, but very really long text with lots of stuff"
            text: "Another button"
            font.pixelSize: getTextSize(btn3,btn3.text)
            anchors.horizontalCenter: parent.horizontalCenter
        }

    }


    FontMetrics {
        id: metrics
        font.family: "Robotto"
    }

    function getTextSize(element,text){
        metrics.font.pixelSize = 0.8*element.height;
        var brect = metrics.boundingRect(text);
        if (brect.width > element.width*0.8){
            var k = element.width*0.8/brect.width
            return Math.floor(metrics.font.pixelSize*k);
        }
        else return metrics.font.pixelSize;
    }
}

My idea is to try to compute a font size that would:

a. Always fit inside any element with a width and a size

b. Be as big as possible while still leaving at least a 10% Margin to the top of the button.

I've tested it and it works perfectly. However I get this constant warning that worries me:

qrc:/main.qml:37:9: QML Button: Binding loop detected for property "font.pixelSize"

What exactly does it mean and what am I doing wrong?

Answer 1

metrics.font.pixelSize = 0.8*element.height;

This line is the problem, I didn't find out doc mention it, but looks like it's not allowed modify FontMetrics font property during binding.

Even this also gives warning.

FontMetrics {
    id: metrics
    //font.family: "Robotto"
}

function getTextSize(element,text){
    metrics.font.family = "Robotto";
    return 10
}

I got two solutions to remove the warning.

Solution 1:

Button {
    id: btn3
    font.family: "Robotto"
    width: 0.8*mainW.width
    height: 0.2*mainW.height
    //text: "A really really, but very really long text with lots of stuff"
    text: "Another button"
    //font.pixelSize: getTextSize(btn3,btn3.text)
    Component.onCompleted: {
        font.pixelSize = getTextSize(btn3,btn3.text)
    }
}

Solution 2:

MyButton {
    font.family: "Robotto"
    width: 0.8 * mainW.width
    height: 0.2 * mainW.height
    text: "Another button"
    anchors.horizontalCenter: parent.horizontalCenter
}

MyButton.qml

Button {
    id: button
    font.pixelSize: getTextSize()
    readonly property real pWidth: width * 0.8
    readonly property real pHeight: height * 0.8
    FontMetrics {
        id: metrics
        font.family: button.font.family
        font.pixelSize: button.pHeight
    }
    function getTextSize(){
        var brect = metrics.boundingRect(text);
        if (brect.width > pWidth){
            var k = pWidth / brect.width
            return Math.floor(metrics.font.pixelSize * k);
        } else
            return metrics.font.pixelSize;
    }
}