C/C++ Qt TreeWidget 單層樹形元件應用

lyshark發表於2021-11-26
C++QT元件

TreeWidget 目錄樹元件，該元件適用於建立和管理目錄樹結構，在開發中我們經常會把它當作一個升級版的ListView元件使用，因為ListView每次只能顯示一列資料集，而使用TableWidget元件顯示多列顯得不夠美觀，此時使用Tree元件顯示單層結構是最理想的方式，本章博文將通過TreeWidget實現多欄位顯示，並增加一個自定義選單，通過在指定記錄上右鍵可彈出該選單並對指定記錄進行操作。

1.通過TreeView元件實現一個只讀屬性的樹形目錄，該目錄中指定三個欄位，分別用來表示ID,IP地址,使用者名稱欄位.

初始化Tree元件

  • 1.初始化並設定treeView屬性
  • 2.設定列頭長度
  • 3.設定列頭資料
  • 4.設定表中元素
#include <QSplitter>
#include <QTreeView>
#include <QTextCodec>
#include <QStandardItemModel>

// By: LyShark
// https://www.cnblogs.com/lyshark
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent),ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QStandardItemModel *tree = new QStandardItemModel(0,3,this);

    // 設定treeView屬性
    ui->treeView->setColumnWidth(0,300);                               // 設定最後一列寬度自適應
    ui->treeView->setIndentation(1);                                   // 設定表頭縮排為1
    ui->treeView->setEditTriggers(QAbstractItemView::NoEditTriggers);  // 節點不可編輯

    // 設定列頭長度
    ui->treeView->setColumnWidth(0,50);      // 設定第1列長度
    ui->treeView->setColumnWidth(1,200);     // 設定第2列長度
    ui->treeView->setColumnWidth(2,200);     // 設定第3列長度

    // 設定列頭資料
    tree->setHeaderData(0, Qt::Horizontal, tr("ID"));
    tree->setHeaderData(1, Qt::Horizontal, tr("IP地址"));
    tree->setHeaderData(2, Qt::Horizontal, tr("使用者"));

    ui->treeView->setModel(tree);           // 將表頭設定到模型

    // 設定表中元素
    QList<QStandardItem *> ptr;

    QStandardItem *item_uid = new QStandardItem("1001");
    item_uid->setIcon(QIcon(":/image/1.ico"));
    ptr.push_back(item_uid);

    QStandardItem *item_addr = new QStandardItem("192.168.1.1");
    ptr.push_back(item_addr);

    QStandardItem *item_username = new QStandardItem("lyshark");
    ptr.push_back(item_username);
    tree->appendRow(ptr);
}

程式碼執行後，如下所示：

2.使用TreeWidget元件，自己定義一個選單，並將該選單繫結到Tree元件內，具體實現程式碼如下。

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 在MainWindow中使用右擊選單需要新增此項
    ui->treeWidget->setContextMenuPolicy(Qt::CustomContextMenu);

    // 建立基礎頂部選單
    QMenuBar *bar = menuBar();
    this->setMenuBar(bar);
    QMenu * fileMenu = bar->addMenu("選單1");

    // 實現只隱藏選單1其他的不受影響
    fileMenu->menuAction()->setVisible(false);

    // 新增子選單
    GetColumnAction = fileMenu->addAction("獲取列號");
    GetRowDataAction = fileMenu->addAction("獲取本行資料");
    GetLineAction = fileMenu->addAction("獲取行號");

    // 分別設定圖示
    GetColumnAction->setIcon(QIcon(":/image/1.ico"));
    GetRowDataAction->setIcon(QIcon(":/image/2.ico"));
    GetLineAction->setIcon(QIcon(":/image/3.ico"));

    // 為子選單繫結熱鍵
    GetColumnAction->setShortcut(Qt::CTRL | Qt::Key_A);
    GetRowDataAction->setShortcut(Qt::SHIFT | Qt::Key_S);
    GetLineAction->setShortcut(Qt::CTRL | Qt::SHIFT | Qt::Key_B);

    // 繫結槽函式: 獲取選中列
    connect(GetColumnAction,&QAction::triggered,this,[=](){
        int col = ui->treeWidget->currentColumn();
        std::cout << col << std::endl;
    });

    // 繫結槽函式: 獲取選中的第0行的資料內容
    connect(GetRowDataAction,&QAction::triggered,this,[=](){
        QString msg = ui->treeWidget->currentItem()->text(0);
        std::cout << msg.toStdString().data() << std::endl;
    });

    // 繫結槽函式: 獲取當前選中的索引值
    connect(GetLineAction,&QAction::triggered,this,[=](){
        int row  = ui->treeWidget->currentIndex().row();
        std::cout << row << std::endl;
    });

    // 設定treeWidget屬性
    ui->treeWidget->setColumnCount(4);         // 設定總列數
    ui->treeWidget->setColumnWidth(0,300);     // 設定最後一列寬度自適應
    ui->treeWidget->setIndentation(1);         // 設定表頭縮排為1

    // 設定表頭資料
    QStringList headers;
    headers.append("檔名");
    headers.append("更新時間");
    headers.append("檔案型別");
    headers.append("檔案大小");
    ui->treeWidget->setHeaderLabels(headers);

    // 模擬插入資料到表中
    for(int x=0;x<100;x++)
    {
        QTreeWidgetItem* item=new QTreeWidgetItem();
        item->setText(0,"<lyshark.com>");
        item->setIcon(0,QIcon(":/image/1.ico"));
        item->setText(1,"2020-12-11");
        item->setText(2,"*.pdf");
        item->setText(3,"102MB");
        item->setIcon(3,QIcon(":/image/2.ico"));
        ui->treeWidget->addTopLevelItem(item);
    }
}

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

// 當treeWidget中的右鍵被點選時則觸發
// By: LyShark
// https://www.cnblogs.com/lyshark
void MainWindow::on_treeWidget_customContextMenuRequested(const QPoint &pos)
{
    std::cout << "x pos = "<< pos.x() << "y pos = " << pos.y() << std::endl;
    Q_UNUSED(pos);

    // 新建Menu選單
    QMenu *ptr = new QMenu(this);

    // 新增Actions建立選單項
    ptr->addAction(GetColumnAction);
    ptr->addAction(GetLineAction);

    // 新增一個分割線
    ptr->addSeparator();
    ptr->addAction(GetRowDataAction);

    // 在滑鼠游標位置顯示右鍵快捷選單
    ptr->exec(QCursor::pos());
    // 手工建立的指標必須手工刪除
    delete ptr;
}

最終我們實現的效果如下所示。

相關文章