28.qt quick-ListView高仿微信好友列表和聊天列表

在上章我们学习了listview,然后实现了: 28.qt quick-listview高仿微信好友列表和聊天列表，本章我们来学习swipeview滑动视图,并出高仿微信v2版本:

---

 

1.container介绍

由于swipeview继承于container,而container是一个抽象的容器类.所以我们先来学习下container
container类的子类有:dialogbuttonbox(对话框按钮框), menubar(菜单栏), swipeview(滑动视图),tabbar、如下图所示:

properties

• contentchildren : list<item>,保存容器中的item所有项,与contentdata不同，contentchildren只包括可视化的qml对象。当插入或移动项目时，它将重新排序。
• contentdata : list<object>,保存容器中的所有数据列表,包含使用additem()或者insertitem()方法动态添加或插入的项。与contentchildren不同,contentdata包含了所有对象,并且插入或移动项目时，不会重新排序。
• contentheight : real,此属性保存内容高度。用于计算容器的总隐式高度。除非显式赋值它，否则内容高度将根据容器中项目的隐式高度自动计算。
• contentwidth : real,和contentheight一样,此属性保存内容高度
• contentmodel : model,只读属性,此属性保存item的内容模型。
• count : int,只读属性,获取item数量
• currentindex : int,当前item索引号
• currentitem : item ,只读属性,当前item

methods

• void additem(item),添加一个item
• void decrementcurrentindex(),递减容器的当前索引
• void incrementcurrentindex(),递增容器的当前索引
• void insertitem(index, item item),在index处插入一个item
• item itemat(index),获取指定index处的item
• void moveitem(from, int to),移动item从from索引到to索引位置
• void removeitem(item),删除容器中指定的item
• void setcurrentindex(index),删除容器中指定索引的item
• item takeitem(index),删除并返回指定索引的item

 

2.swipeview介绍

swipeview(滑动视图)通过一组页面填充,每次只显示一个页面。用户可以通过横向滑动在页面之间导航,一般会将它与pageindicator结合使用.

它的属性如下所示：

• horizontal : bool,只读属性,此属性保存滑动视图是否水平方向的
• interactive : bool,默认为true,表示用户可以滑动视图
• orientation : enumeration,滑动视图方向,默认为qt.horizontal
• vertical : bool ,只读属性,此属性保存滑动视图是否垂直方向的

它的attached properties附加属性如下所示:

• index : int,此附加属性保存swipeview中每个子项的索引。它附加到swipeview的每个item项中。
• iscurrentitem : bool,如果此子项是当前项，则此附加属性为true。它附加到swipeview的每个item项中。
• isnextitem : bool,如果此子项是下一项，则此附加属性为true。它附加到swipeview的每个item项中。
• ispreviousitem : bool如果此子项是上一个项目，则此附加属性为true。它附加到swipeview的每个item项中。
• view : swipeview 此附加属性保存管理此子项的视图。它附加到swipeview的每个item项。

使用swipeview时,一般会将它与pageindicator结合使用.pageindicator用于标志在多个页面的容器时,当前活动的页面是哪个小圆圈.
示例代码如下所示:

window {
    id: window
    width: 400
    height: 400
    visible: true
    
    swipeview {
        id: view
        currentindex: 1
        anchors.fill: parent
        
        rectangle {
            id: firstpage
            color: "red"
        }
        rectangle {
            id: secondpage
            color: "yellow"
        }
        rectangle {
            id: thirdpage
            color: "blue"
        }
    }
    
    pageindicator {
        id: indicator
        
        count: view.count
        currentindex: view.currentindex
        
        anchors.bottom: view.bottom
        anchors.horizontalcenter: parent.horizontalcenter
    }

}

效果如下所示所示:

 

3.swipeview实战

为了方便后续更加方便添加模块,所以我们还需要重构之前v1版本整个文件目录结构,重构后的文件夹如下所示:

接下来我们就在我们之前v1版本里面添加一个page.qml,通过swipeview实现切换微信主界面每页列表, page.qml如下所示:

import qtquick 2.12
import qt.labs.folderlistmodel 2.12
import qtquick.layouts 1.12
import qtquick.controls 2.12
import "qrc:/bar" as bars
import "qrc:/recentfirend" as rencentfirend

rectangle {
    id: container
    anchors.fill: parent

    listmodel {             // 最近好友列表
        id: recentfirendmodel
        // 格式如下所示:
        // 'name' : 好友名称
        // 'headsrc' : 头像位置
        // 'recode'(聊天记录) : [date(时间), msgtype(hint提示、hintdate时间提示、recv接受提示、send发送提示), msg(信息内容)]
    }

    columnlayout {
        id: pagelist
        anchors.fill: parent
        spacing: 0
        swipeview {
            id: view
            currentindex: 0
            layout.fillheight: true
            layout.fillwidth: true
            interactive: false
            rencentfirend.recentfirendlist {
                id: recentfirendlist
                onnewfirendrequest: {
                    addexample()
                }
                onenterrequest: {
                    var obj = newjumpwindow("qrc:/chat/chatlist.qml", recentfirendmodel.get(index));
                    console.log("",recentfirendmodel.get(index).name)
                    obj.show();
                }
                component.oncompleted: {
                    recentfirendlist.setmodel(recentfirendmodel)
                }
            }
            rectangle {
                text {
                    text: "page2"
                    anchors.centerin: parent
                    font.pixelsize: 24
                    font.family: "microsoft yahei"
                }
            }
            rectangle {
                text {
                    text: "page3"
                    anchors.centerin: parent
                    font.pixelsize: 24
                    font.family: "microsoft yahei"
                }
            }
            rectangle {
                text {
                    text: "page4"
                    anchors.centerin: parent
                    font.pixelsize: 24
                    font.family: "microsoft yahei"
                }
            }

            oncurrentindexchanged: {
                menubar.swipeindex(currentindex)
            }

        }
        bars.menubar {
            id: menubar
            layout.fillheight: false
            layout.fillwidth: true
            layout.preferredheight: 60
            onindexclicked: {
                view.currentindex = index

            }

        }
    }
    ... ...
}

最终效果如下所示(支持自适应布局):

 

代码已上传群里, 未完待续,  后续出 微信v3版-添加通讯录列表控件(通过字典树实现中文转拼音排序)