31.qt quick-使用SwipeView新增滑動檢視-高仿微信V2版本

諾謙發表於2021-06-19
QTUIView

在上章我們學習了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版-新增通訊錄列表控制元件(通過字典樹實現中文轉拼音排序)

 

相關文章