QML TumblerColumn 宽度超过 ColumnLayout 几何

Question

我有以下 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

现在，如您在屏幕截图中所见，Tumbler Columns 宽度大于父项的 ColumnLayout 几何图形，这是错误的。我错过了什么？我已经考虑了ueNumericTumbler的ColumnLayout，但是问题依然存在，我不知道该怎么办！我应该使用锚点吗？还是 ueNumericTumbler 的父容器 rectangle/window 中的问题，命名为 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

您在错误的对象上使用了属性附加的 Layout； Layout.preferredWidth 仅在 Tumbler 上设置，而不是 TumblerColumn。您可以通过在表达式的 return 语句之前添加 print() 行来调试它：

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

这会打印 -1，即 default value。您可以将 width 设置为此：

ueLoginKeypadTumbler.Layout.preferredWidth / 4

不过您需要考虑分隔符的宽度……呃。这不是很好。请打开一个 bug report 提到这个用例应该更简单。

QML TumblerColumn 宽度超过 ColumnLayout 几何

QML TumblerColumn width exceeds ColumnLayout geometry

qt

qml

qtquick2

qtquickcontrols

qtquickextras