31.qt quick-使用SwipeView添加滑动视图-高仿微信V2版本

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

31.qt quick-使用SwipeView添加滑动视图-高仿微信V2版本

 

1.Container介绍

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

31.qt quick-使用SwipeView添加滑动视图-高仿微信V2版本

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 } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyjyjj.html