0

我有以下 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的父容器矩形/窗口中是否有问题，命名为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"
            }
        }
    ]
}
4

1 回答 1

2

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

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

这将打印-1，这是默认值。您可以将其设置width为：

ueLoginKeypadTumbler.Layout.preferredWidth / 4

不过，您需要考虑分隔符的宽度……呃。这不是很好。请打开一个错误报告，指出这个用例应该更容易。

于 2015-08-25T14:27:17.217 回答