Hi all,

I'm attempting to make a custom Button item where the size of the
button is determined by the metrics of the text it holds. The reason
is I want to put a thin rectangle below the text, sort of a stylistic
underlining (text underlining is not sufficient, for aesthetic
reasons).

But I'm seeing strange metrics reported for some strings.

BEGIN TEST CASE

Button.qml:

import QtQuick 2.5

// Attempt at a button with a size determined by the metrics
// of its text.

Rectangle {
    property alias text: text.text
    property alias pointSize: text.font.pointSize

    width: textMetrics.width
    height: textMetrics.height

    TextMetrics {
        id: textMetrics
        font: text.font
        text: text.text
    }

    Text {
        id: text
        text: "Button"
    }
}


Test.qml:

import QtQuick 2.5

Rectangle {
    width: 800
    height: 600

    // Something wrong with the metrics on this one :/

    Button {
        text: "Hej"
        pointSize: 42
        border.color: "red"

        anchors.top: parent.top
    }

    // These two seem OK.

    Button {
        text: "Something longer"
        pointSize: 42
        border.color: "red"

        anchors.verticalCenter: parent.verticalCenter
    }

    Button {
        text: "Test"
        pointSize: 42
        border.color: "red"

        anchors.bottom: parent.bottom
    }
}

END TEST CASE

See the attached screenshot (metrics_are_off.png) which shows the
result. Notice how the size of the buttons (Rectangle) are correct for
the last two buttons, but for the first, the text is sticking out a
little :/

Any idea why this is, and how I can solve it?

I'm also attaching a sketch (sketch.png) of the look I'm after for my
buttons. If you know of a simpler way to achieve this, I'm idle ears.

Cheers,
Elvis
_______________________________________________
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest

Reply via email to