在上章我們學習了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版-添加通訊錄串列控制元件(通過字典樹實作中文轉拼音排序)
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/288170.html
標籤：C++
上一篇：5hutool實戰:IoUtil 流操作工具類（將內容寫到流中）
下一篇：Go--Sync.Once的應用