无法更改QML ListView默认移动过渡

Question

我有一个非常简单的ListView，它由几个正方形组成。所有正方形始终显示在视口中。箭头键和鼠标单击可以在正方形之间导航。

Item {
    id: container
    Layout.fillHeight: true // (Is a Layout child)
    Layout.fillWidth: true

    Component {
        id: listComponent
        Item {
            height: 100
            width: 100
            Rectangle {
                id: square
                anchors.fill: parent
                color: "pink"
                opacity: 0.5

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        list.currentIndex = index
                    }
                }

                states: [
                    State {
                        name: "active"
                        when: list.currentIndex == index
                        PropertyChanges { target: square; opacity: 1 }
                    }
                ]
                transitions: Transition {
                    NumberAnimation { properties: "opacity"; duration: 300}
                }
            }
        }
    }

    ListView {
        id: list
        delegate: listComponent
        model: 5
        currentIndex: 0

        anchors.centerIn: parent
        displayMarginEnd: 100 * 5
        displayMarginBeginning: 100 * 5
        spacing: 100 * 0.2
        transform: Translate { x: - 100 / 2 }
        focus: true
        keyNavigationEnabled: true
    }
}

很容易在活动/非活动项目之间转换不透明度，但似乎无法更改移动转换。文档说我应该为此使用move和moveDisplaced，但是我尝试了这些，也尝试了displaced（对于任何触发器），但没有任何变化。它们似乎完全没有效果。

默认的过渡行为很奇怪。如果您注意到在“正”方向上的导航（如在增加项目索引中的导航）非常顺畅，但是在反转移动过渡时，缓动则有所不同并且有些突然。我希望两个方向的位置过渡都一样平滑。

Answer 1

原来，即使我在注释中提到了宽度，我也没有在原始代码中设置宽度。一切都不同。参见以下简化示例：

    // EXAMPLE LISTVIEW
    Component {
        id: listComp
        Rectangle {
            id: listRect
            height: 100                     // The actual dimension of our list items:
            width: 100                      // Squares
            color: "grey"
            opacity: 0.5                    // Opacity is not required for demonstration purposes but makes it easier to visualize
            states: [
                State {
                    name: "active"
                    when: listview.currentIndex == index
                    PropertyChanges { target: listRect; opacity: 1 }
                }
            ]
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    listview.currentIndex = index
                }
            }
            transitions: Transition {
                NumberAnimation { property: "opacity"; duration: 300 }
            }                
        }
    }

    ListView {
        id: listview
        model: 10                           // Make ten squares, each 100 wide, equals 1000
        delegate: listComp
        width: 100                          // The fix...!
        keyNavigationEnabled: true
        focus: true
        orientation: ListView.Horizontal    // to fit the screen better
    }

[使用键或鼠标在此列表中导航时，位移将自动转换以显示下一个索引。

如果在此示例中为ListView本身提供no显式维，或者小于一个委托的维，它将精确显示一个委托（currentIndex）和前一个委托（当它是第一个委托时第一个）列表）。

[增加索引时（移至下一个项目），动画看起来非常流畅，因为人们也可以看到前一个委托也被移动了。减小索引时（移到上一个项目），动画看起来像是切掉的，因为下一个项目没有显示，其位移也没有显示。这会产生视觉上的截止效果。

一旦您为ListView提供了至少适合一个代表的尺寸的尺寸，就会显示上一项和下一项，并且过渡在两个方向上看起来都是平滑的。取决于方向，它可能只是水平宽度或垂直高度。

即使添加“溢出”也足够有趣，以displayMarginEnd的形式表示（如果将其增加到一个委托人维度以上，它将显示下一个即将到来的项目），动画仍然被截断。 （这是我在原始帖子中所经历的）

（显然，只要使ListView大于所有代表的总和，就没有其他可动之处了。）

请参阅此视觉比较，以了解其内容，并尝试使用本示例中的ListView宽度进行重现：