QML 实现一个简易的分页组件

一时失言乱红尘 2022-12-31 01:25 163阅读 0赞

当列表数据项较多的时候，会有分页展示的需求，可能需要展示数据总数、每页显示数、总页数、当前页数等。

因为数据可能是通过网络分页请求得到，或者本地数据会刷新，那么这些信息就得通过外部设置，组件只负责请求和展示页码信息就行了。点击某一页之后先预设置为该页按钮高亮，待数据返回后根据参数重新设置。

主要难点就在页码按钮数值的计算、显示隐藏上了，剩下的样式就根据需求调整。

效果展示：

![20201227163814168.png][]

主要实现代码：

（github链接：[https://github.com/gongjianbo/MyTestCode/tree/master/Qml/QmlPagination][https_github.com_gongjianbo_MyTestCode_tree_master_Qml_QmlPagination] ）

（分页组件、分页按钮、main三个文件）

import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    //自定义分页组件 Pagination
    //龚建波 2020-12-19
    //1.负责页码展示和发送翻页请求，实际页码计算由后端or业务逻辑进行
    //每次请求返回后根据计算好的页码设置值，pageCurrent、itemCount
    //2.可以在返回之前ui先根据之前的参数计算用于展示，但要注意绑定关系
    //实现中我对pageCurrent直接赋值，要绑定需要加Connections
    Rectangle {
        id: control
    
        //请求某一页
        //page: 页码
        //count: 一页总数
        signal requestPage(int page,int count)
    
        //需求中要展示的信息：数据总条数，每页条数，当前页，页跳转
        //当前页
        property int pageCurrent: 0
        //数据总数
        property int itemCount: 0
        //总页数
        property int pageCount: itemCount>0?Math.ceil(itemCount/__itemPerPage):0
        //每页条数，这个和box关联的，暂时默认初始化
        property int __itemPerPage: 20
        //页码按钮显示个数
        property int pageButtonCount: 5
        property int __pageButtonHalf: Math.floor(pageButtonCount/2)+1
        property font font
        font{
            pixelSize: 14
            family: "Microsoft YaHei"
        }
        property color textColor: "#666666"
        property color highlightedColor: "#1989FA"
        property color elementBorderColor: "#DCDFE6"
        property int elementHeight: 30
        property alias padding: content_row.padding
    
        //color: "transparent"
        //border.color: "gray"
        //radius: 4
        implicitHeight: 40
        implicitWidth: content_row.width
    
        Row{
            id: content_row
            height: control.height
            spacing: 25
            padding: 10
    
            //总条数
            Text{
                anchors.verticalCenter: parent.verticalCenter
                font: control.font
                color: control.textColor
                text: "共 "+control.itemCount+" 条"
            }
    
            //每页多少条
            Row{
                spacing: 5
                anchors.verticalCenter: parent.verticalCenter
                Text{
                    anchors.verticalCenter: parent.verticalCenter
                    font: control.font
                    color: control.textColor
                    text: "每页"
                }
                ComboBox{
                    id: item_page_box
                    width: 90
                    height: control.elementHeight
                    model: [10,20,50,100]
                    currentIndex: 1
                    font: control.font
                    onCurrentIndexChanged: {
                        //选择每页数后重新请求数据
                        //currentText此时还未修改
                        //设置页码后从1开始
                        control.__itemPerPage=model[currentIndex];
                        control.pageCurrent=1;
                        control.requestPage(control.pageCurrent,control.__itemPerPage);
                    }
                }
                Text{
                    anchors.verticalCenter: parent.verticalCenter
                    font: control.font
                    color: control.textColor
                    text: "条"
                }
            }
            //页码按钮
            Row{
                spacing: 5
                anchors.verticalCenter: parent.verticalCenter
                //左侧前一页，应该使用图片，这里仅作演示
                PageButton{
                    visible: control.pageCount>1
                    enabled: control.pageCurrent>1
                    anchors.verticalCenter: parent.verticalCenter
                    width: 30
                    height: 30
                    font: control.font
                    textColor: control.textColor
                    highlightedColor: control.highlightedColor
                    text: "<"
                    onClicked: {
                        control.calcNewPage(control.pageCurrent-1);
                    }
                }
                //中间显示页码
                Row{
                    spacing: 5
                    anchors.verticalCenter: parent.verticalCenter
                    //第一页
                    PageButton{
                        visible: control.pageCount>0
                        width: 30
                        height: control.elementHeight
                        font: control.font
                        textColor: control.textColor
                        highlightedColor: control.highlightedColor
                        pageNumber: 1
                        pageCurrent: control.pageCurrent
                        onClicked: {
                            control.calcNewPage(1);
                        }
                    }
                    Text {
                        //pageCount<btnCount不用显示
                        //当前页在前countHalf页不用显示
                        visible: (control.pageCount>control.pageButtonCount&&
                                  control.pageCurrent>control.__pageButtonHalf)
                        text: "..."
                        font: control.font
                        color: control.textColor
                        height: control.elementHeight
                    }
                    //中间的页码由Repeater根据设置的pageButtonCount创建
                    Repeater{
                        id: button_repeator
                        model: (control.pageCount<2)
                               ?0
                               :(control.pageCount>=control.pageButtonCount)
                                 ?(control.pageButtonCount-2)
                                 :(control.pageCount-2)
                        delegate: PageButton{
                            width: 30
                            height: control.elementHeight
                            font: control.font
                            textColor: control.textColor
                            highlightedColor: control.highlightedColor
                            //在首或者尾相连时，值要连续，避免和首尾重复
                            pageNumber: (control.pageCurrent<=control.__pageButtonHalf)
                                        ?(2+index)
                                        :(control.pageCount-control.pageCurrent<=control.pageButtonCount-control.__pageButtonHalf)
                                          ?(control.pageCount-button_repeator.count+index)
                                          :(control.pageCurrent+2+index-control.__pageButtonHalf)
                            pageCurrent: control.pageCurrent
                            onClicked: {
                                control.calcNewPage(pageNumber);
                            }
                        }
                    }
                    Text {
                        id: page_moreright
                        //pageCount<btnCount不用显示
                        //当前页在倒数countHalf页不用显示
                        visible: (control.pageCount>control.pageButtonCount&&
                                  control.pageCount-control.pageCurrent>control.pageButtonCount-control.__pageButtonHalf)
                        text: "..."
                        font: control.font
                        color: control.textColor
                        height: control.elementHeight
                    }
                    //最后一页
                    PageButton{
                        visible: control.pageCount>1
                        width: 30
                        height: control.elementHeight
                        font: control.font
                        textColor: control.textColor
                        highlightedColor: control.highlightedColor
                        pageNumber: control.pageCount
                        pageCurrent: control.pageCurrent
                        onClicked: {
                            control.calcNewPage(pageNumber);
                        }
                    }
                }
                //右侧下一页，应该使用图片，这里仅作演示
                PageButton{
                    visible: control.pageCount>1
                    enabled: control.pageCurrent<control.pageCount
                    anchors.verticalCenter: parent.verticalCenter
                    width: 30
                    height: 30
                    font: control.font
                    textColor: control.textColor
                    highlightedColor: control.highlightedColor
                    text: ">"
                    onClicked: {
                        control.calcNewPage(control.pageCurrent+1);
                    }
                }
            }
            //页码跳转
            Row{
                spacing: 5
                anchors.verticalCenter: parent.verticalCenter
                Text{
                    anchors.verticalCenter: parent.verticalCenter
                    font: control.font
                    color: control.textColor
                    text: "前往"
                }
                TextField{
                    id: edit_goto_page
                    width: 60
                    height: control.elementHeight
                    text: "1"
                    font: control.font
                    color: control.textColor
                    validator: IntValidator{
                        bottom: 0
                        top: 999999
                    }
                    selectByMouse: true
                    selectedTextColor: "white"
                    selectionColor: "blue"
                    background: Rectangle{
                        border.color: control.elementBorderColor
                    }
    
                    Keys.onPressed: {
                        //enter小键盘enter
                        //return主键盘enter
                        if(event.key===Qt.Key_Enter||event.key===Qt.Key_Return){
                            focus=false;
                            if(edit_goto_page.text){
                                //编辑结束就去请求该页数据
                                control.requestPage(Number(edit_goto_page.text),control.__itemPerPage);
                            }
                        }
                    }
                }
                Text{
                    anchors.verticalCenter: parent.verticalCenter
                    font: control.font
                    color: control.textColor
                    text: "页"
                }
            }
        }
    
        //翻页计算
        function calcNewPage(page)
        {
            if(!page)
                return;
            let page_num=Number(page);
            //超出范围或者为当前页就返回
            if(page_num<1||page_num>control.pageCount||page_num===control.pageCurrent)
                return;
            control.pageCurrent=page_num;
            control.requestPage(page_num,control.__itemPerPage)
        }
    }

import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    //分页组件上的页码按钮 PageButton
    //龚建波 2020-12-20
    Button {
        id: control
    
        //该按钮代表的页码
        property int pageNumber: -2
        //当前选中的页码
        property int pageCurrent: -3
        property color textColor: "#666666"
        property color highlightedColor: "#1989FA"
    
        implicitWidth: implicitContentWidth+leftPadding+rightPadding
        implicitHeight: implicitContentHeight+topPadding+bottomPadding
        padding: 0
        text: pageNumber
    
        contentItem: Text {
            text: control.text
            font: control.font
            color: pageNumber===pageCurrent?highlightedColor:textColor
            opacity: enabled ? 1.0 : 0.3
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    
        //暂时没有背景，可以加一个小圆圈背景
        background: Item {
        }
    }

import QtQuick 2.12
    import QtQuick.Window 2.12
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("龚建波 1992")
    
        Pagination{
            x: 10
            y: 10
            height: 40
            //width: parent.width-20
            border.color: "gray"
            radius: 4
    
            pageCurrent: 1
            itemCount: 99
            //触发信号后去请求该页数据，并更新当前页码和总数等
            onRequestPage: {
                console.log("Pagination1 request page:",page,"count:",count)
                pageCurrent=page;
            }
        }
    
        Pagination{
            x: 10
            y: 60
            height: 40
            //width: parent.width-20
            border.color: "gray"
            radius: 4
    
            pageCurrent: 1
            itemCount: 31
            //触发信号后去请求该页数据，并更新当前页码和总数等
            onRequestPage: {
                console.log("Pagination1 request page:",page,"count:",count)
                pageCurrent=page;
            }
        }
    }

[20201227163814168.png]: /images/20221120/48895e09c61a4290bd0cf60b54fc4448.png
[https_github.com_gongjianbo_MyTestCode_tree_master_Qml_QmlPagination]: https://github.com/gongjianbo/MyTestCode/tree/master/Qml/QmlPagination