QML中SwipeView/Tumbler内容变更重载后索引重置如何解决

问题根源 #

SwipeView/ Tumbler跳转回初始索引的核心原因是：

• 你将动态变化的value直接绑定到了pages数组的元素中，每次value更新时，整个pages数组都会被重新计算生成
• 作为Repeater的model，pages数组整体变更会触发Repeater销毁所有已创建的子页面、再重新生成全部页面，SwipeView检测到子项全部重置后就会自动跳回初始索引0，手动改索引的方案因为有销毁重建的过程，必然会出现闪烁。

解决方案 #

核心思路是拆分静态页面结构和动态数据，不要把动态值塞进Repeater的model数组里，直接将动态值绑定到对应页面的展示属性上，修正后的代码如下：

import QtQuick 2.12
import QtQuick.Controls 2.12

SwipeView {
    id: id_swipeView
    width: 100
    height: 100
    property int value: 0
    // pages只存静态结构，不要绑定动态value
    property var pages: [{"a": "1", "b": "first"}, {"a": "2", "b": "second"}, {"b": "continuous"}]
    Repeater {
        model: id_swipeView.pages
        Item{
            Column{
                Text{
                    // 第三页的a字段动态绑定value，其他页用modelData的a
                    text: index === 2 ? id_swipeView.value : modelData.a
                }

                Text{
                    text: modelData.b
                }
            }
        }
    }
    
    Timer{
        repeat: true; running: true; interval: 1000;
        onTriggered: id_swipeView.value += 1
    }
}

修改说明 #

• 移除了pages数组第三项中对id_swipeView.value的绑定，数组不会再随value更新整体重建
• 第三页的a字段展示直接在Text组件里绑定id_swipeView.value，动态更新只会触发单个Text的重绘，不会影响页面结构
• Repeater的子页面不会被销毁重建，SwipeView的currentIndex会自然保留，不会出现跳转和闪烁问题

该修改思路同样适用于Tumbler组件，只要避免Repeater的model随动态数据频繁整体重建即可。

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