在 Qt6 QML 中的 ListView 中将项目向右对齐

Question

我想要一个适合其最大物品宽度的

ListView

。
我还希望这些项目在

ListView

中右对齐。

所以，作为一种幼稚的方法，我这样做了：

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    id: window

    ListView {
        id: view
        anchors.left: window.left
        height: contentHeight
        spacing: 5

        // making the list the width of its content
        width: contentItem.childrenRect.width

        model: ["A", "bb", "CCcc", "DDddDD"]

        delegate: Text {
            text: modelData
            font.pointSize: 24

            // aligning the item to the right
            anchors.right: parent.right
        }
    }
}

从视觉上看，它正在发挥作用。但是我收到这个警告：

QML ListView: Binding loop detected for property "width"

所以，这种方法似乎不是实现我想要的目标的正确方法。
我也尝试过其他方法，例如设置

implicitWidth

（具有相同的结果），或者设置

contentWidth

或在

horizontalAlignment: Text.AlignRight

中设置

Text

，但视觉结果错误。

所以，我想知道，是否有一种正确的方法可以将

ListView

中的项目向右对齐，或者我是否必须忍受该警告？

Answer 1

绑定循环非常真实，因为：

• ListView.width 取决于 ListView.contentItem.childrenRect
• ListView.contentItem.childrenRect 取决于 ListView.width

假设，考虑我们已经介绍了

wordWrap: Text.Wrap

。

ListView {
    width: contentItem.childrenRect.width
    delegate: Text {
        text: modelData
        wordWrap: Text.Wrap
    }
}

Text.width

直接影响

Text.height

。因此，

ListView.width

可以影响

ListView.contentItem.childrenRect.height

。然而，与此同时，

ListView.contentItem.childrenRect.width

正在对

ListView.width

产生影响。

编译器会检测到这一点并警告您。如果您意识到危险并愿意继续，您可以通过将其移至命令式代码来消除绑定循环警告，例如：

    ListView {
        id: view
        anchors.left: window.left
        height: contentHeight
        spacing: 5

        // making the list the width of its content
        //width: contentItem.childrenRect.width

        model: ["A", "bb", "CCcc", "DDddDD"]

        delegate: Text {
            text: modelData
            font.pointSize: 24

            // aligning the item to the right
            anchors.right: parent.right
        }
        contentItem.onChildrenRectChanged: Qt.callLater(setWidth)
        function setWidth() {
            width = 0;
            width = contentItem.childrenRect.width
        }
        Component.onCompleted: setWidth()
        footer: Button {
            width: ListView.view.width
            text: "Change Me"
            onClicked: view.model = ["X", "yy", "ZZZ", "WWWWWWWWWWW".slice(0,Math.floor(Math.random()*10)) ]
        }
    }

您可以在线尝试上面的代码片段