QML TumblerColumn width exceeds ColumnLayout geometry - qt

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

Answer 1

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.