Tumbler的第一个TumblerColumn是空的

Question

我正在关注QML's Tumbler：

import QtQuick 2.7
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4

Item
{
    id: ueDisplayTimeoutSettingsWindow

    width: 640
    height: 480

    RowLayout
    {
        anchors.fill: parent

        ColumnLayout
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

            spacing: 32

            Tumbler
            {
                id: ueDisplayTimeoutSelector

                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignHCenter|Qt.AlignTop

                antialiasing: true

                TumblerColumn
                {
                    id: ueTumblerDigit100

                    readonly property int ueValue: currentIndex*100

                    width: ueDisplayTimeoutSelector.width/ueDisplayTimeoutSelector.columnCount-12

                    model: 10
                }   // TumblerColumn

                TumblerColumn
                {
                    id: ueTumblerDigit10

                    readonly property int ueValue: currentIndex*10

                    width: ueDisplayTimeoutSelector.width/ueDisplayTimeoutSelector.columnCount-12

                    model: 10
                }   // TumblerColumn

                TumblerColumn
                {
                    id: ueTumblerDigit1

                    readonly property int ueValue: currentIndex

                    width: ueDisplayTimeoutSelector.width/ueDisplayTimeoutSelector.columnCount-12

                    model: 10
                }   // TumblerColumn

                style: TumblerStyle
                {
                    visibleItemCount: 5

                    spacing: 4

                    background: Rectangle
                    {
                        color: "transparent"
                    }   // background

                    frame: Rectangle
                    {
                        color: "transparent"

                        border.color: "steelblue"
                        border.width: 1

                        radius: 8
                    }   // frame

                    columnForeground: Rectangle
                    {
                        border.width: 2
                        border.color: "steelblue"

                        opacity: 0.30

                        radius: 16

                        gradient: Gradient
                        {
                            GradientStop
                            {
                                position: 0.00
                                color: "#191919"
                            }   // GradientStop

                            GradientStop
                            {
                                position: 0.50
                                color: "#2f2f2f"
                            }   // GradientStop
                        }   // gradient
                    }   // columnForeground

                    delegate: Text
                    {
                        text: styleData.value

                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter

                        opacity: 0.4+Math.max(0,
                                              1-Math.abs(styleData.displacement))*0.6

                        color: "steelblue"

                        font.pixelSize: 48
                    }   // delegate
                }   // style
            }   // Tumbler

            TextField
            {
                id: ueDisplayTimeoutTextField

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

                horizontalAlignment: TextInput.AlignHCenter

                //inputMethodHints: Qt.ImhPreferNumbers|Qt.ImhDigitsOnly

                readOnly: true

                text: ueTumblerDigit100.ueValue+ueTumblerDigit10.ueValue+ueTumblerDigit1.ueValue+" "+qsTr("s")

                style: TextFieldStyle
                {
                    background: Rectangle
                    {
                        color: "transparent"

                        RowLayout
                        {
                            anchors.fill: parent

                            BorderImage
                            {
                                Layout.fillWidth: false
                                Layout.fillHeight: true
                                Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                                source: "qrc:///icons/ueTextLine.png"
                            }   // BorderImage
                        }   // RowLayout
                    }   // background

                    placeholderTextColor: "steelblue"

                    renderType: Text.NativeRendering

                    textColor: "lightsteelblue"

                    //font.pixelSize: 48
                }   // style
            }   // TextField
        }   // ColumnLayout
    }   // RowLayout
}   // Item

这是结果： 现在，如果我使用此Tumbler 工作，一切正常，但是，首先启动QML Tumbler Column 是空的，其他两个是完美的（从代码中可以看出它们相同）。为什么呢？！

Answer 1

有趣的是，不倒翁并没有完全消失。一旦开始将其向下拖动，它就会出现。问题似乎出在width语句中。

  width: ueDisplayTimeoutSelector.width/ueDisplayTimeoutSelector.columnCount-12

当您将三个语句替换为-时，请说180。

   width: 180

有效。我不知道为什么。您可能需要先定义变量，然后再填充它，因为计算其中的width语句会导致麻烦...