使用qt quick-ListView仿微信好友列表和聊天列表的示例代碼
1.視圖模型介紹
在Qml中、常見的View視圖有:
- ListView: 列表視圖,視圖中數(shù)據(jù)來自ListModel、XmlListModel或c++中繼承自QAbstractItemModel或QAbstractListModel的自定義模型類
- TableView: 和excel類似的視圖
- GridView: 網(wǎng)格視圖,類似于home菜單那樣,排列著一個(gè)個(gè)app小圖標(biāo)
- PathView: 路徑視圖,可以根據(jù)用戶自定義的path路徑來顯示不一樣的視圖效果
- SwipeView: 滑動(dòng)視圖,使用一組頁(yè)面填充。每次只顯示一個(gè)頁(yè)面。用戶可以通過橫向滑動(dòng)在頁(yè)面之間導(dǎo)航,一般會(huì)將它與PageIndicator結(jié)合使用
本章首先來學(xué)習(xí)ListView.以微信好友列表為例:
里面的每個(gè)好友就是由一個(gè)個(gè) item 組成的,存在視圖中的model里,然后寫一個(gè)delegate組件,即可通過ListView顯示出來.
由于時(shí)間不是很多,所以本章實(shí)現(xiàn)的微信好友列表和聊天列表(v1版本)是通過模擬數(shù)據(jù)實(shí)現(xiàn)的,等后面有時(shí)間后,再來實(shí)現(xiàn)個(gè)一個(gè)真正的內(nèi)網(wǎng)聊天工具.
2.demo實(shí)現(xiàn)(支持自適應(yīng))
好友列表如下圖所示:
聊天列表如下圖所示:
整個(gè)效果如下所示:
覺得GIF模糊的話,可以轉(zhuǎn)彎去bilibilihttps://www.bilibili.com/video/BV1Z64y1R7kL/
由于代碼上傳CSDN,會(huì)導(dǎo)致有些同學(xué)可能沒積分無法下載,所以已經(jīng)上傳群里了.
如果下載后學(xué)習(xí)有收獲,一定要來這里給我點(diǎn)個(gè)贊呀,都沒動(dòng)力更新文章了,贊的人太少了
3.重要組件-實(shí)現(xiàn)氣泡組件源碼
import QtQuick 2.0
import "BubbleNormal.js" as BubbleNormal
import "BubbleBlue.js" as BubbleBlue
import "BubbleBlack.js" as BubbleBlack
Item {
id: container
property var bubbleIndex: 0
property string msgText: ""
property bool isSend: true
property int iconHeight: 40
property int maxWidth: 100
Canvas {
id: canvas
anchors.fill: parent
onPaint: {
bubble().drawBubble(getContext('2d'));
}
}
Text {
id: text
text: msgText
font.pixelSize: 17
font.family: "Microsoft Yahei"
wrapMode: Text.WrapAnywhere
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
anchors.fill: parent
}
Component.onCompleted: {
bubble().initText();
bubble().reUpdateSize();
canvas.requestPaint();
}
onBubbleIndexChanged: {
bubble().initText();
bubble().reUpdateSize();
canvas.requestPaint();
}
function bubble() {
switch (bubbleIndex) {
case 0 : return BubbleNormal
case 1 : return BubbleBlue
case 2 : return BubbleBlack
default: return BubbleNormal
}
}
}
代碼如上所示,只要用戶更改了bubbleIndex值,那么我們就會(huì)去馬上調(diào)用替換后對(duì)應(yīng)的氣泡js文件的function(),進(jìn)行初始化消息、重繪氣泡背景。這個(gè)組件實(shí)現(xiàn)后,我們?nèi)绻雽?shí)現(xiàn)其它的氣泡,也可以直接往里加就好了
4.重要組件-實(shí)現(xiàn)聊天列表委托源碼
/****************************************************************************
** 聊天列表委托
** Author: 諾謙 https://www.cnblogs.com/lifexy/
** Create: 2021-6-12
****************************************************************************/
import QtQuick 2.12
import QtGraphicalEffects 1.12
import "./bubble" as Bubble
import "qrc:/Common.js" as Common
Item {
id: container
property var headSrc
property var myHeadSrc : "qrc:/head/myhead.jpg"
property var bubbleIndex : 0
height: _layout.height + 10
width: ListView.view.width
state: msgType
states: [
State {
name: "hint"
AnchorChanges { target: _layout;
anchors.horizontalCenter: container.horizontalCenter;
anchors.verticalCenter: container.verticalCenter; }
},
State {
name: "hintDate"
AnchorChanges { target: _layout;
anchors.horizontalCenter: container.horizontalCenter;
anchors.verticalCenter: container.verticalCenter; }
},
State {
name: "recv"
AnchorChanges { target: _layout;
anchors.left: container.left;
anchors.verticalCenter: container.verticalCenter; }
},
State {
name: "send"
AnchorChanges { target: _layout;
anchors.right: container.right;
anchors.verticalCenter: container.verticalCenter; }
}
]
Row {
id: _layout
anchors.leftMargin: 20
anchors.rightMargin: 20
spacing: 4
layoutDirection : msgType == "send" ? Qt.RightToLeft : Qt.LeftToRight
HeadImage {
id: _head
width : 50
height : 50
headUrl: msgType == "recv" ? headSrc : myHeadSrc
visible: msgType == "recv" || msgType == "send"
}
Text {
id: _hint
visible: msgType == "hintDate" || msgType == "hint"
text: msgType == "hintDate" ? getChatDate() : msg
color: "#B0B0B0"
font.pixelSize: 14
font.family: "Microsoft Yahei"
wrapMode: Text.WrapAnywhere
elide: Text.ElideRight
width: container.width - 40
height: 30
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
Bubble.ChatBubble {
id: _msg
visible: msgType == "recv" || msgType == "send"
msgText: msgType == "recv" || msgType == "send" ? msg : ""
isSend: msgType == "send" ? true : false
iconHeight: _head.height
maxWidth: container.width - _layout.anchors.leftMargin * 2 - _head.width * 2 - _layout.spacing * 2
bubbleIndex: container.bubbleIndex
}
}
// 判斷消息時(shí)間,與當(dāng)前時(shí)間間隔多久,來動(dòng)態(tài)顯示
function getChatDate () {
var total = new Date() - date;
if (total < (1000*60*60*24)) {
return date.toLocaleTimeString(Qt.locale(), "hh:mm");
} else if (total < (1000*60*60*24) * 2) {
return "昨天 "+date.toLocaleTimeString(Qt.locale(), "hh:mm");
} else if (total < (1000*60*60*24) * 3) {
return "前天 "+date.toLocaleTimeString(Qt.locale(), "hh:mm");
} else {
return date.toLocaleString(Qt.locale(), "yyyy年M月d日 hh:mm");
}
}
}
代碼如上所示,我們會(huì)去判斷消息類型：
- 如果消息類型是"hint"類型,就直接居中顯示。
- 如果消息類型是"hintDate"類型,則調(diào)用getChatDate()來動(dòng)態(tài)獲取要如何顯示時(shí)間.
- 如果消息類型是"recv"類型,則靠左顯示對(duì)方頭像,并加上氣泡消息
- 如果消息類型是"send"類型,則靠又顯示自己頭像,并加上氣泡消息
以上就是qt quick-ListView高仿微信好友列表和聊天列表的詳細(xì)內(nèi)容，更多關(guān)于qt 微信好友列表和聊天列表的資料請(qǐng)關(guān)注本站其它相關(guān)文章！
版權(quán)聲明：本站文章來源標(biāo)注為YINGSOO的內(nèi)容版權(quán)均為本站所有，歡迎引用、轉(zhuǎn)載，請(qǐng)保持原文完整并注明來源及原文鏈接。禁止復(fù)制或仿造本網(wǎng)站，禁止在非www.sddonglingsh.com所屬的服務(wù)器上建立鏡像，否則將依法追究法律責(zé)任。本站部分內(nèi)容來源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來，僅供學(xué)習(xí)參考，不代表本站立場(chǎng)，如有內(nèi)容涉嫌侵權(quán)，請(qǐng)聯(lián)系alex-e#qq.com處理。
關(guān)注官方微信