Qt 使用 QTreeWidget 實現類 QQ 的用戶列表界面

Qt 使用 QTreeWidget 實現類 QQ 的用戶列表界面

QTreeWidget 是 Qt 提供的樹形控件，適合展示層級結構數據。本文演示如何利用它構建類似 QQ/微信的側邊欄用戶列表，包含分組、好友項目、圖標、狀態顯示等功能。

界面設計

使用 Qt Designer 創建包含 QTabWidget 的主界面，左側為垂直標籤頁（西側標籤位置），首個標籤頁嵌入 QTreeWidget：

• 設置 headerHidden=true 隱藏表頭
• 設置 iconSize=50x50 適配大頭像
• 啟用 sortingEnabled 自動排序
• 通過樣式表自定義字體、下劃線等視覺效果

數據結構定義

在 .ui 文件中預置樹結構：

<widget class="QTreeWidget" name="treeWidget">
  <column><property name="text"><string>1</string></property></column>
  <item> <!-- 分組節點 -->
    <property name="text"><string>Friends</string></property>
    <property name="font"><font><weight>75</weight><bold>true</bold></font></property>
    <property name="textAlignment"><set>AlignHCenter|AlignVCenter</set></property>
    <property name="background"><color alpha="255"><red>9</red><green>9</green><blue>193</blue></color></property>
    <property name="foreground"><color alpha="255"><red>0</red><green>0</green><blue>0</blue></color></property>
    <item> <!-- 好友子項 -->
      <property name="text"><string>Friend1</string></property>
      <property name="icon"><iconset resource="icon.qrc"><normaloff>:/image/face/126.png</normaloff></iconset></property>
      <property name="font"><font><bold>true</bold><underline>true</underline></font></property>
      <item><property name="text"><string>Find</string></property><property name="icon">:/image/theme/find.png</property></item>
      <item><property name="text"><string>Email</string></property><property name="icon">:/image/theme/chat.png</property></item>
    </item>
  </item>
  <item><property name="text"><string>Devices</string></property>...</item>
</widget>

代碼實現

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include 
#include 

namespace Ui { class Widget; }

class Widget : public QWidget {
    Q_OBJECT
public:
    explicit Widget(QWidget *parent = nullptr);
    ~Widget();

private slots:
    void changeText(const QModelIndex &index);

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include 

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {
    ui->setupUi(this);
    // 點擊樹項目時觸發
    connect(ui->treeWidget, &QTreeWidget::clicked, this, &Widget::changeText);
}

Widget::~Widget() { delete ui; }

void Widget::changeText(const QModelIndex &index) {
    // 示例：獲取點擊項目文本
    // qDebug() << index.data().toString();
    // 可在此處理項目點擊邏輯，如打開聊天視窗
}

項目屬性詳細說明

資源文件管理

所有圖標統一放入 icon.qrc 資源文件，結構如下：

icon.qrc
├── /new/prefix1/image/face/     # 頭像圖標
├── /new/prefix1/image/theme/    # 主題圖標
└── /new/prefix1/image/theme/    # 聯繫人、群組、查找等功能圖標

運行效果

進階擴展建議

• 動態增減項目：使用 addTopLevelItem()、addChild()、takeChild()
• 自定義委託：繼承 QStyledItemDelegate 實現富文本、進度條等複雜渲染
• 右鍵菜單：為項目設置 setContextMenuPolicy(Qt::CustomContextMenu) 綁定自定義菜單
• 拖放排序：啟用 setDragDropMode(QAbstractItemView::InternalMove)
• 數據模型分離：大數據量時改用 QTreeView + 自定義模型

完整項目結構包含：.pro、main.cpp、widget.h/cpp、widget.ui、icon.qrc 及圖片資源目錄。