QML TumblerColumn width exceeds ColumnLayout geometry

Question

I have following QML Tumbler:

import QtQuick 2.0
import QtMultimedia 5.5
import QtQuick.Controls 1.3
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import QtTest 1.1

import "../items"

Rectangle
{
    id: ueNumericTumbler

    color: "grey"

    ColumnLayout
    {
        id: ueMainLayout

        anchors.rightMargin: parent.radius
        anchors.leftMargin: parent.radius
        anchors.bottomMargin: parent.radius
        anchors.topMargin: parent.radius
        anchors.centerIn: parent

        antialiasing: true
        spacing: 4
        anchors.fill: parent
        layoutDirection: Qt.LeftToRight

        Tumbler
        {
            id: ueLoginKeypadTumbler

            antialiasing: true

            Layout.alignment: Qt.AlignHCenter
            Layout.fillWidth: true
            Layout.fillHeight: false

            Layout.minimumWidth: parent.width
            Layout.minimumHeight: parent.height*70/100

            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height*70/100

            Layout.maximumWidth: parent.width
            Layout.maximumHeight: parent.height*70/100

            activeFocusOnTab: false

            UeNumericTumblerColumn
            {
                id: ueTumblerColumnDigit1000

                ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
            }   // UeNumericTumblerColumn

            UeNumericTumblerColumn
            {
                id: ueTumblerColumnDigit100

                ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
            }   // UeNumericTumblerColumn

            UeNumericTumblerColumn
            {
                id: ueTumblerColumnDigit10

                ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
            }   // UeNumericTumblerColumn

            UeNumericTumblerColumn
            {
                id: ueTumblerColumnDigit1

                ueWidth: ueNumericTumbler.Layout.preferredWidth/ueLoginKeypadTumbler.columnCount
            }   // UeNumericTumblerColumn
        }   // Tumbler
    }   // ColumnLayout

}   // Rectangle

Now, as you can see in screenshot, Tumbler Columns width is greater than parent's, ColumnLayout geometry, which is wrong. What did I miss? I've taken into acount ueNumericTumbler's ColumnLayout but the problem persits, I do not know what to do! Should I use anchors? Or is it maybe problem in ueNumericTumbler's parent contaniner rectangle/window, named ueKeypad:

import QtQuick 2.0
import QtMultimedia 5.5
import QtQuick.Controls 1.3
import QtQuick.Extras 1.4
import QtQuick.Layouts 1.2
import QtQuick.Window 2.2
import QtTest 1.1

import "../delegates"
import "../items"

Rectangle
{
    id: ueKeypad

    width: 512
    height: 384
    color: "grey"
    radius: 8
    border.color: "steelblue"
    border.width: 4

    ColumnLayout
    {
        id: ueMainLayout

        anchors.rightMargin: parent.radius
        anchors.leftMargin: parent.radius
        anchors.bottomMargin: parent.radius
        anchors.topMargin: parent.radius
        anchors.centerIn: parent

        antialiasing: true
        spacing: 4
        anchors.fill: parent
        layoutDirection: Qt.LeftToRight

        UeNumericTumbler
        {
            id: ueLoginKeypadTumbler

            Layout.alignment: Qt.AlignHCenter
            Layout.fillWidth: true
            Layout.fillHeight: false

            Layout.minimumWidth: parent.width
            Layout.minimumHeight: parent.height*70/100

            Layout.preferredWidth: parent.width
            Layout.preferredHeight: parent.height*70/100

            Layout.maximumWidth: parent.width
            Layout.maximumHeight: parent.height*70/100
        }   // UeNumericTumbler
    }   // ColumnLayout

    states:
    [
        State
        {
            name: "ueStateLoginOk"

            PropertyChanges
            {
                target: ueKeypad
                border.color: "#00ff00"
            }
        },

        State
        {
            name: "ueStateLoginOkFailed"
            PropertyChanges
            {
                target: ueKeypad
                border.color: "#ff0000"
            }
        }
    ]
}

Your last edit is a separate question in itself, IMO. Maybe someone else will answer it, but the original question has a solution. — Mitch, Aug 25 '15 at 16:41

Mitch · Accepted Answer · 2015-08-25T14:38:00.160

2

You're using the Layout attached property on the wrong object; Layout.preferredWidth was only set on the Tumbler, not the TumblerColumn. You can debug this by adding a print() line before the return statement of the expression:

TumblerColumn
{
    model: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    width: {
        print(Layout.preferredWidth)
        Layout.preferredWidth/4
    }
}

This prints -1, which is the default value. You can set the width to this instead:

ueLoginKeypadTumbler.Layout.preferredWidth / 4

You'll need to account for the width of the separators though... ugh. This is not very nice. Please open a bug report that mentions that this use case should be easier.

edited Aug 25 '15 at 14:38

answered Aug 25 '15 at 14:27

Mitch

23,716
9
83
122

I've rewritten answer, please take a look! – KernelPanic Aug 27 '15 at 07:08
As I said in my answer, you'll need to take the width of the separators into account. Possibly the frame, too. That's why I suggested creating a bug report, because it's not good. – Mitch Aug 27 '15 at 07:11
ok, but if I hardcode widths into every column, it will work, but this is bad idea, isn't it? – KernelPanic Aug 27 '15 at 07:15
1

It's only a bad idea if you have several different target devices whose resolutions differ. But yeah, it's better to calculate the width than hard-code it. – Mitch Aug 27 '15 at 07:22

QML TumblerColumn width exceeds ColumnLayout geometry

1 Answers1