QML中如何用多组过滤器筛选DelegateModel实现分页显示？

原代码核心问题 #

• 分组条件逻辑矛盾：element.appId <=35 && element.appId>70永远无法成立，导致第二组没有正确筛选元素
• 硬编码分组数量：仅定义两组，无法适配200个元素的多页需求
• 分页逻辑未动态化：没有根据总元素数自动计算页数和每个页面的元素范围

修复实现思路 #

1. 动态生成分组：根据总元素数和每页35个的规则，自动创建对应页数的DelegateModelGroup
2. 正确分配元素到对应分组：遍历ListModel，按索引范围将元素分配到对应页面分组
3. 动态绑定分页筛选：根据ListView的currentIndex自动切换对应的分组筛选

完整修复代码 #

DelegateModel {
    id: visualModel
    delegate: myButton
    model: appsModel

    // 每页显示的元素数量
    property int pageSize: 35
    // 总页数，自动计算
    property int totalPages: Math.ceil(appsModel.count / pageSize)
    // 存储所有页面分组
    property var pageGroups: []

    // 初始化分组和元素分配
    Component.onCompleted: {
        // 1. 动态创建所有页面分组
        for (let page = 0; page < totalPages; page++) {
            let group = DelegateModelGroup {
                includeByDefault: false
                name: `page_${page}`
            }
            pageGroups.push(group)
            groups.push(group)
        }

        // 2. 将元素分配到对应分组
        for (let i = 0; i < appsModel.count; i++) {
            let targetPage = Math.floor(i / pageSize)
            // 将当前元素添加到对应页面的分组
            items.addGroups(i, 1, pageGroups[targetPage].name)
        }

        // 默认显示第一页
        filterOnGroup = pageGroups[0].name
    }

    // 监听ListView当前页变化，切换分组筛选
    function switchPage(pageIndex) {
        if (pageIndex >= 0 && pageIndex < totalPages) {
            filterOnGroup = pageGroups[pageIndex].name
        }
    }
}

// 你的横向ListView（pageList）绑定currentIndex触发分页切换
ListView {
    id: pageList
    // 原有属性：orientation: Qt.Horizontal, count:6...
    onCurrentIndexChanged: {
        visualModel.switchPage(currentIndex)
    }
}

关键说明 #

• 动态分组：通过totalPages计算需要的页面数，循环创建对应分组，避免硬编码
• 元素分配：根据元素索引i计算所属页面Math.floor(i/pageSize)，精准分配到对应分组
• 分页切换：ListView的currentIndex变化时，调用switchPage方法切换筛选分组，自动适配所有页面
• 边界处理：添加了页面索引的合法性判断，避免越界访问

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