qt qml 创建分页组件

cgoo_0102

已于 2024-01-23 22:39:30 修改

阅读量583

点赞数 7

分类专栏： QT学习文章标签：开发语言 qt

于 2024-01-23 22:36:31 首次发布

本文链接：https://blog.csdn.net/cgoo_0102/article/details/135794055

版权

QT学习专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在QtQML中创建一个名为MyPagination的分页组件，包括设置当前页、前后翻页、跳转到指定页以及显示省略号等功能，展示了如何在`main.qml`中调用该组件并展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

qt qml 创建分页组件

创建组件MyPagination

import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
    id: pagination

    property int currentPage: 1
    property int pageSize: 10
    property int totalItems: 100
    property int visiblePages: 3 // 可见的页码数量

    function nextPage() {
        if (currentPage < maxPage + 1) {
            currentPage++;
            updateModel();
        }
    }

    function previousPage() {
        if (currentPage > 1) {
            currentPage--;
            updateModel();
        }
    }

    function goToPage(page) {
        if (page >= 0 && page <= maxPage) {
            currentPage = page;
            lbl.text = currentPage.toString();
            updateModel();
        }
    }

    function updateModel() {
        // 更新model数据的逻辑，这里仅仅输出当前页的内容作为示例
        var startIndex = currentPage * pageSize;
        var endIndex = Math.min(startIndex + pageSize, totalItems) - 1;

        lbl.text = currentPage.toString();
        console.log("Current Page:", currentPage);
        console.log("Start Index:", startIndex);
        console.log("End Index:", endIndex);
    }

    function reset() {
        currentPage = 0;
        updateModel();
    }

    function getMaxPage() {
        return Math.ceil(totalItems / pageSize) - 1;
    }

    property int maxPage: getMaxPage()


    Row {
        spacing: 10

        Text {
            id: lbl
            text: qsTr("text")
            color: "white"
        }

        //前进一页
        Button {
            text: "<"
            onClicked: pagination.previousPage()
        }

        // 首页按钮
        Button {
            text: "1"
            onClicked: {
                currentPage = 1;
                lbl.text = currentPage.toString();
            }
        }

        // 左边省略号折叠按钮
        Button {
            text: "..."
            visible: currentPage > 3
            onClicked: {
                currentPage = currentPage - visiblePages < 0 ? 1 : currentPage - visiblePages
            }
        }

        // 页码按钮
        Repeater {
            model: maxPage > 1 ? maxPage - 1 : 0
            delegate: Button {
                text: (index + 2).toString()
                visible:(index + 2) === currentPage || Math.abs(index + 2 - currentPage) <= 1
                onClicked: {
                    pagination.goToPage(index + 2)
                }
            }
        }

        // 右边省略号折叠按钮
        Button {
            text: "..."
            visible: currentPage < maxPage - 1
            onClicked: {
                currentPage = currentPage + visiblePages > maxPage ? maxPage : currentPage + visiblePages
            }
        }

        // 末页按钮
        Button {
            text: (maxPage + 1).toString()
            visible: maxPage + 1 > 1
            onClicked: {
                currentPage = maxPage + 1;
                lbl.text = currentPage.toString();
            }
        }

        Button {
            text: ">"
            onClicked: pagination.nextPage()
        }
    }

    Component.onCompleted: {
        updateModel()
    }
}

main.qml中调用

                        Rectangle {
                            color: "#13131A"
                            MyPagination{
                                id : pagination
                                pageSize: 10
                                totalItems: 31
                            }
                        }

组件效果：
点击页面自动切换页码，分三段隐藏