Qt QML TumblerColumn宽度超过ColumnLayout几何图形

我有以下QML不倒翁：

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

现在，正如您在屏幕截图中看到的，Tumbler列的宽度大于父级的ColumnLayout几何体，这是错误的。我错过了什么？我已经考虑了一个帐户

ueNumericTumbler

的

列布局

，但问题仍然存在，我不知道该怎么办！我应该使用锚吗？ 或者这可能是

ueNumericTumbler

的父控件矩形/窗口中的问题，名为

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

---

您在错误的对象上使用了

布局
附加属性<代码>布局。首选宽度
仅在
滚筒
上设置，而不是
滚筒列
上设置。您可以通过在表达式的return语句之前添加一行
print（）
来进行调试：

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

这将打印
-1
，这是最新的。您可以将
宽度设置为：

ueLoginKeypadTumbler.Layout.preferredWidth / 4

不过你需要考虑一下分隔带的宽度。。。啊。这不太好。请打开一个说明此用例应该更简单的页面。
我认为，您上次编辑的内容本身就是一个单独的问题。也许其他人会回答，但原始问题有一个解决方案。我已经重写了答案，请看一看！正如我在回答中所说，你需要考虑隔板的宽度。也可能是框架。这就是为什么我建议创建一个bug报告，因为它不好。好吧，但如果我在每一列中硬编码宽度，它会工作，但这不是个好主意，不是吗？如果你有几个不同的目标设备，它们的分辨率不同，这只是个坏主意。但是，计算宽度比硬编码要好。