標籤：

PC客戶端開發:目前有沒有封裝的比較好的類，可以比較快速和高效的實現QQ的氣泡聊天信息展示功能？

01-15

要能實現目前qq氣泡信息展示所有的功能，如可展示圖片、可處理鏈接、可顯示HTML，不限框架不限語言，最好是Qt。

本人對Qt比較熟，但是Qt要實現這個功能的話，必須修改內核，我想其他框架應該也要深入內核。 我只是寄希望於可以更快點做到，如果有人實現過的話，可以借鑒，畢竟這是一個開源的世界。

效果展示：

StackOverFLow相關提問: qt - How to give QTextFrame or QTextBlock a background-image in QTextEdit?

剛從iOS轉到Qt，正好在做這一塊的東西。之前考慮過QListView加自定義delegate。但是覺得這玩意裡面的內容都是畫出來的，交互很麻煩，而且顯示的控制項好像有些固定就否掉了。

最後根據iOS裡面UITableView的機制寫了一個類似的東西，支持消息widget的重用，而且消息widget可以自定義。下面是成品圖。文本消息氣泡是用QTextEdit做的。圖片氣泡是用QLabel顯示的。語音的氣泡就是一個QWidget，裡面添加些子控制項就行。一般的交互都沒什麼問題。現在遇到的問題是QTextEdit遇到表情和文字在一起的時候不知道怎麼計算氣泡大小，如果是單純的文字得話 QFontMetrics.boundingRec就可以算出來。

樓主去了解下iOS裡面UITableView應該可以有些幫助。以後有時間會整理下把相關代碼開源出來,畢竟現在是為公司寫的。

用QListView/QListWidget

消息用QTextEdit/QTextBrowser實現，足以之支撐帶超鏈接的富文本和表情了，調整樣式表就能實現邊框背景這些效果。頭像氣泡用QLabel貼圖，然後用QHboxLayout和消息排一起。

layout的兩側按需添加QSpacer來實現靠左/靠右/居中。

把上述內容(信息、頭像氣泡、QSpacer和layout)打包成一個widget，做好設置文本、設置頭像、設置樣式、設置對齊的介面，然後就能用了。

每來一條消息，就new一個這樣的widget，放到list里就行。

另外，需要重載下ResizeEvent，以根據聊天窗口大小自適應消息氣泡的大小(主要是寬度)

至於右鍵菜單么，contextMenu咯。

還有分享鏈接之類的卡片，就封一個專門的卡片分享widget就行了，帶標題、正文縮略，click後用QDesktopServices::openUrl打開鏈接。

沒深入研究和嘗試過QML，但用傳統的widgets框架都不難做，QML應該更簡單。

以上。

可以試試改這個 http://doc.qt.io/qt-5/qtquickcontrols2-chattutorial-example.html

---------------------------------------20161012更---------------------------------------

之前花了些時間去找解決方案.

  • 開源項目Cutegram是基於Qml開發的, 在我看來難度最小. 用Listview, 自定義delegate就行, delegate里基本可以用上所有qml type和qt quick control. message item想做成什麼樣基本都沒什麼問題.
  • 開源項目QQStars也是基於qml開發的, 可以直接編譯通過. 雖然QQStars效果不輸Cutegram, 但是前者在代碼結構上不如Cutegram. 感覺研究完Cutegram你各種qt quick技術都會了.
  • 但是題主還是想基於QTextEdit或者其子類實現. 基於此, 修改內核恐怕是最好的方式. 在沒有修改內核的情況下嘗試實現了. messageitem可以做到有背景, 但是聊天窗體resize的messageitem背景的resize沒有找到實現途徑; 鏈接hover事件也沒有實現; 等等…… 有時間會嘗試修改內核的, 實現好了再來跟大家分享. (工作比較忙, 時間可能會比較久, 希望屆時可以從實現難易程度、性能、效果三方面比較QtWidget實現方式和QtQuick實現方式,)

    GitHub - Aseman-Land/Cutegram: Cutegram is a telegram client by Aseman Land. It"s forked from sigram.

    GitHub - zccrs/QQStars: 基於webqq協議的qq客戶端，qt開發，可跨平台

    ---------------------------------------20160820答---------------------------------------

    大家可以從Telegram Desktop, Cuetgram找到相關實現. 我已經決定自己用QML實現了, 期待可以做到可以開源的程度.

    其中Cutegram是一個叫Aseman實驗室做的開源項目.

樓主，qt的樣式支持css3的box model，了解一下這個，實現你要的樣式並不難。

qt不熟悉，但是win32的dui庫我知道有兩個實現的還可以，一個是mpf，一個是soui2，mpf效果很好，但是缺點是還沒有完全開源，soui2完全開源，氣泡模式也提供了demo，樓主可以參考下

利用qwebview 來搞吧，js html qt交互

推薦閱讀：

※Qt程序冷啟動過慢如何解決？
※QT獲取線程號函數currentThreadId()返回Qt::HANDLE 如何得到QString?
※qt窗口之間如何通信或信息共享？
※想學QT，是直接QT5還是先學QT4好？
※如何選擇C++與QML交互的兩種方式？

TAG:QtC開發框架 | 客戶端開發 | PC客戶端 | QtQuick |