C/C++ Qt ListWidget 列表框元件應用

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

ListWidget列表框元件，該元件與TreeWidget有些相似，區別在於TreeWidget可以實現巢狀以及多欄位結構，而ListWidget元件則只能實現單欄位結構，ListWidget元件常用於顯示單條記錄，例如只顯示IP地址，使用者名稱等資料，如下筆記是本人在開發中經常用到的一些基本操作技巧，包括列表框元件的基本操作方法。

常用節點間的操作方法如下:

  • ListView 元件與應用基礎
  • ListWidget 初始化
  • ListWidget 變化行(觸發事件)
  • ListWidget 編輯狀態設定
  • ListWidget 全選/全不選
  • ListWidget 反選(對錯交織)
  • ListWidget 指定位置插入 / 增加一項
  • ListWidget 刪除選中項

ListView 元件與應用基礎: 該元件與ListWidget功能一致，只是ListView無法實現編輯只能預覽。

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

#include <QListView>
#include <QStandardItem>
#include <QStringListModel>

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

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

// 初始化View元件 向ListView元件中填充資料
// By:LyShark
// https://www.cnblogs.com/lyshark
void MainWindow::on_pushButton_clicked()
{
    QStringList data;
    QStringListModel *model;

    // 追加資料到ListView中
    data << QString("192.168.1.1");
    data << QString("192.168.1.2");
    data << QString("192.168.1.3");
    data << QString("192.168.1.4");

    model = new QStringListModel(data);
    ui->listView->setModel(model);

    // 移除第1個地址
    data.removeAt(0);

    // 再次重新整理ListView
    model = new QStringListModel(data);
    ui->listView->setModel(model);
}

// 實現間隔初始化,每一行一種顏色
void MainWindow::on_pushButton_2_clicked()
{
    QStringList data;
    QStandardItemModel *model = new QStandardItemModel();

    // 清空記錄
    model->removeRows(0,model->rowCount());

    // 追加資料到ListView中
    data << QString("192.168.1.1");

    // 迴圈追加
    for(int x=2; x<5; x++)
    {
        data << QString("192.168.1.%0").arg(x);
    }

    // 輸出到ListView記錄
    int nCount = data.size();
    for(int x=0; x<nCount; x++)
    {
        QString string = static_cast<QString>(data.at((x)));  // 強轉為QString型別
        QStandardItem *item = new QStandardItem(string);

        if(x%2 == 0)
        {
            // 設定色彩
            QLinearGradient linear_grad(QPointF(0,0),QPointF(200,200));
            linear_grad.setColorAt(0,Qt::darkGreen);

            QBrush brush(linear_grad);
            item->setBackground(brush);
        }
        // 追加到mode模型
        model->appendRow(item);
    }

    // 設定模型
    ui->listView->setModel(model);
    //ui->listView->setFixedSize(200,300);
}

程式碼執行效果如下:

上方程式碼中我們多數都是在使用View檢視元件，接下來將具體分析Widget元件的使用細節，View元件與Widget元件看似一致，但卻存在本質區別，其大致區別如下:

  • Widget 元件可以直接通過如AddItem等一系列函式操作特定資料集，該元件還具有直接編輯的能力。
  • View 元件是基於Model模型對映工作的，每次運算元據時都需要藉助QAbstractListModel資料模型來操作。

簡單來說View元件適合於瀏覽展示資料較多的場景，因為其繫結了連結串列結構從而在資料的展示上更為靈活，而Widget元件更適合於更新或修改資料較多的使用場景。


ListWidget 節點初始化: 節點的初始化就是向widget元件內插入一個QListWidgetItem類。

// 初始化列表 listWidget
// By: LyShark
void MainWindow::on_pushButton_clicked()
{
    // 每一行是一個QListWidgetItem
    QListWidgetItem *aItem;

    // 設定ICON的圖示
    QIcon aIcon;
    aIcon.addFile(":/image/1.ico");

    ui->listWidget->clear();
    for(int x=0;x<10;x++)
    {
        QString str = QString::asprintf("192.168.1.%d",x);
        aItem = new QListWidgetItem();   // 新建一個項

        aItem->setText(str);                   // 設定文字標籤
        aItem->setIcon(aIcon);                 // 設定圖示
        aItem->setCheckState(Qt::Checked);     // 設為選中狀態
        aItem->setFlags(Qt::ItemIsSelectable |  // 設定為不可編輯狀態
                         Qt::ItemIsUserCheckable
                        |Qt::ItemIsEnabled);

        ui->listWidget->addItem(aItem); //增加項
    }
}

程式碼執行效果如下:


ListWidget 行內文字變化: 當我們點選行內任意一個列表選項時，我們讓其觸發currentItemChanged並將變化行更新到窗體上。

// listWidget 當前選中項發生變化
// By: LyShark
void MainWindow::on_listWidget_currentItemChanged(QListWidgetItem *current, QListWidgetItem *previous)
{
    QString str;
    if (current != NULL) //需要檢測變數指標是否為空
    {
      if (previous==NULL)  //需要檢測變數指標是否為空
      {
          str="當前："+current->text();
          this->setWindowTitle(QString(current->text()));
      }
      else
      {
        str="前一項：" + previous->text() + "; 當前項：" + current->text();
        std::cout << str.toStdString().data() << std::endl;
        this->setWindowTitle(QString(current->text()));
      }
    }
}

程式碼執行效果如下:


ListWidget 編輯狀態設定: 預設情況下ListWidget元件內所有檔案是不可編輯的，我們也可以將編輯屬性開啟。

// 設定所有項設定為可編輯狀態
// https://www.cnblogs.com/lyshark
void MainWindow::on_pushButton_5_clicked()
{
    int x,cnt;
    QListWidgetItem *aItem;

    cnt = ui->listWidget->count();
    for(x=0;x<cnt;x++)
    {
        aItem = ui->listWidget->item(x);
        aItem->setFlags(Qt::ItemIsSelectable | Qt::ItemIsEditable
                        |Qt::ItemIsUserCheckable |Qt::ItemIsEnabled);
    }
}

程式碼執行效果如下:


ListWidget 全選/全不選: 全選顧名思義就是選中選單中的所有資料，使用aItem->setCheckState(Qt::Checked)實現選中，通過迴圈計數即可。

// 全選按鈕
// https://www.cnblogs.com/lyshark
void MainWindow::on_pushButton_2_clicked()
{
    int cnt = ui->listWidget->count();   // 獲取總數
    for(int x=0;x<cnt;x++)
    {
        QListWidgetItem *aItem = ui->listWidget->item(x);  // 獲取到一項指標
        aItem->setCheckState(Qt::Checked);                 // 設定為選中
    }

}

// 全不選
// By: LyShark
void MainWindow::on_pushButton_3_clicked()
{
    int cnt = ui->listWidget->count();   // 獲取總數
    for(int x=0;x<cnt;x++)
    {
        QListWidgetItem *aItem = ui->listWidget->item(x);  // 獲取到一項指標
        aItem->setCheckState(Qt::Unchecked);               // 設定為非選中
    }
}

程式碼執行效果如下:


ListWidget 反選功能: 反選的含義是，使用者選中選單反選後會變為未選中狀態，未選中則變為選中，只需要增加一個判斷即可實現。

// By: LyShark
void MainWindow::on_pushButton_4_clicked()
{
    int x,cnt;
    QListWidgetItem *aItem;

    cnt = ui->listWidget->count();
    for(x=0;x<cnt;x++)
    {
        aItem = ui->listWidget->item(x);
        if(aItem->checkState() != Qt::Checked)
            aItem->setCheckState(Qt::Checked);
        else
            aItem->setCheckState(Qt::Unchecked);
    }
}

程式碼執行效果如下:


ListWidget 指定位置插入/追加插入: 在選中行的上方插入一行新的表項，以及追加到末尾一行。

// 指定位置插入一項
// www.cnblogs.com/lyshark
void MainWindow::on_pushButton_8_clicked()
{
    QIcon aIcon;
    aIcon.addFile(":/image/3.ico");

    QListWidgetItem *aItem = new QListWidgetItem("插入的資料");
    aItem->setIcon(aIcon);
    aItem->setCheckState(Qt::Checked);
    aItem->setFlags(Qt::ItemIsSelectable |Qt::ItemIsUserCheckable |Qt::ItemIsEnabled);

    // 在當前行的上方插入一個項
    ui->listWidget->insertItem(ui->listWidget->currentRow(),aItem);
}

// 增加一項,尾部追加
void MainWindow::on_pushButton_7_clicked()
{
    QIcon aIcon;
    aIcon.addFile(":/image/2.ico");

    QListWidgetItem *aItem = new QListWidgetItem("新增的專案");   // 增加專案名
    aItem->setIcon(aIcon);                                       // 設定圖示
    aItem->setCheckState(Qt::Checked);                           // 設定為選中
    aItem->setFlags(Qt::ItemIsSelectable |Qt::ItemIsUserCheckable |Qt::ItemIsEnabled);
    ui->listWidget->addItem(aItem);                              // 增加到控制元件
}

程式碼執行效果如下:


ListWidget 刪除選中項: 刪除當前選中的一項，並清理釋放記憶體。

// 刪除選中項
void MainWindow::on_pushButton_6_clicked()
{
    int row = ui->listWidget->currentRow(); // 獲取當前行
    QListWidgetItem *aItem = ui->listWidget->takeItem(row);  // 移除指定行的項,但不delete
    delete aItem;                                            // 釋放空間
}

程式碼執行效果如下:

相關文章