如何为QML Repeater实现类似ListView.populate的级联入场动画

核心实现思路 #

• 给每个Repeater的子条目设置初始偏移状态：创建时先把y值偏移到顶部初始位置，实际目标y值单独存储
• 给每个条目添加与索引关联的延迟参数，实现从上到下的级联效果
• 等Repeater所有条目创建完成后，统一触发每个条目向目标y值的位移动画

完整可运行代码示例 #

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    width: 400
    height: 600
    color: "#f0f0f0"

    // 示例数据模型
    ListModel {
        id: listModel
        Component.onCompleted: {
            // 模拟批量添加20条数据
            for(let i=0;i<20;i++) {
                append({text: "条目 "+(i+1)})
            }
            // 数据加载完成后触发入场动画
            repeater.startPopulateAnimation()
        }
    }

    Flickable {
        anchors.fill: parent
        contentHeight: column.height
        clip: true

        Column {
            id: column
            width: parent.width
            spacing: 10
            padding: 15

            Repeater {
                id: repeater
                model: listModel

                // 对外暴露触发动画的方法
                function startPopulateAnimation() {
                    for(let i=0;i<count;i++) {
                        itemAt(i).populateAnimation.start()
                    }
                }

                delegate: Rectangle {
                    width: parent.width
                    height: 60
                    color: "white"
                    radius: 8
                    // 初始状态：偏移到顶部可视区域外
                    y: -height - column.spacing
                    // 存储条目实际应该所在的目标y值
                    property real targetY: y

                    // 位移动画，延迟和索引绑定实现级联效果
                    NumberAnimation on y {
                        id: populateAnimation
                        to: targetY
                        duration: 300
                        easing.type: Easing.OutCubic
                        // 每个条目延迟30ms，可自行调整级联速度
                        delay: index * 30
                    }

                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        text: model.text
                        font.pixelSize: 16
                    }
                }
            }
        }
    }
}

关键细节说明 #

• 不要用Component.onCompleted触发单条动画：Repeater创建条目是异步的，单条触发会导致动画时序混乱，统一在所有数据加载完成后批量触发才能保证级联顺序正确
• 初始位移无需配合透明度修改：如果只需要位移动画，直接修改初始y值即可，和ListView的populate效果完全对齐
• 可调整参数：delay: index * 30控制级联的间隔速度，duration: 300控制单条动画的时长，可根据需求自行修改
• 若后续需要动态新增条目也带动画：给Repeater添加onItemAdded信号处理，新增的条目单独触发动画即可，不需要全局重新执行

内容的提问来源于stack exchange，提问作者Ldweller