PyQt5 中的 List View

文章目錄

- 1. 基礎概念
- 2. 創建 List View
- - 2.1 PyQt5 中一個簡單的 List View 實例
  - 2.2 代碼解釋
  - 2.3 運行結果
- 3. 數據模型
- - 3.1 標準模型
  - 3.2 自定義模型
- 4. 自定義 List View
- - 4.1 使用樣式表 (QSS)
  - 4.2 設置項委托 (Item Delegate)
- 5.事件處理
- 6. 與數據交互
- - 6.1 添加數據
  - 6.2 刪除數據
  - 6.3 編輯數據
  - 6.4 完整示例
- 7. 排序與過濾
- 8. 總結

1. 基礎概念

用途：
- List View 是 PyQt5 中用于顯示列表數據的重要組件之一。它可以在界面上以列表的形式展示多行數據，通常用于顯示諸如文件列表、聯系人列表、日程安排等等的數據。
特性：
- List View 具有靈活的布局和顯示方式，可以根據需要進行自定義。它支持多種交互方式，比如點擊、雙擊、拖拽等。同時，List View 也支持排序、過濾、編輯等功能，使用戶能夠更方便地管理和操作列表中的數據。
基本工作原理：
- List View 基于模型-視圖架構工作。它通過與數據模型進行交互來顯示數據，并且可以使用不同的模型來管理不同類型的數據。List View 通過視圖部件以及布局來展示數據，并通過委托來控制每個數據項的顯示方式。
視圖和模型：
- 在 PyQt5中，List View 是視圖（View）部件，用于顯示數據；而數據模型（Model）則負責管理數據的存儲和操作。通常情況下，可以使用 PyQt5 提供的標準模型（如 QStandardItemModel）來管理數據，也可以自定義模型來滿足特定需求。
定制化：
- List View 可以通過設置不同的屬性和樣式來進行定制化，比如調整行高、列寬、文本顏色、背景色等。此外，還可以通過設置委托（Delegate）來實現更高級的定制化，比如自定義每個數據項的顯示方式或交互方式。

2. 創建 List View

2.1 PyQt5 中一個簡單的 List View 實例

? 下面我們用PyQt5 創建一個簡單的 List View 實例，并展示一些靜態數據

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget, QListView
from PyQt5.QtCore import QStringListModelclass MyMainWindow(QMainWindow):def __init__(self):super().__init__()# 設置窗口標題和大小self.setWindowTitle("Simple List View Example")self.resize(500, 300)# 創建數據模型并填充數據data = ["Apple", "Banana", "Orange", "Grapes", "Pineapple"]self.model = QStringListModel()self.model.setStringList(data)# 創建 List View 實例并設置數據模型self.list_view = QListView()self.list_view.setModel(self.model)# 創建主窗口布局layout = QVBoxLayout()layout.addWidget(self.list_view)# 創建主窗口部件并設置布局central_widget = QWidget()central_widget.setLayout(layout)self.setCentralWidget(central_widget)if __name__ == "__main__":# 創建應用程序對象app = QApplication(sys.argv)# 創建主窗口對象window = MyMainWindow()# 顯示主窗口window.show()# 進入應用程序的主事件循環sys.exit(app.exec_())

2.2 代碼解釋

from PyQt5.QtCore import QStringListModel: 導入 PyQt5 中的 QStringListModel 類，用于管理 List View 的數據模型。
self.setWindowTitle("Simple List View Example"): 設置主窗口的標題。
self.resize(500, 300): 設置主窗口的大小為寬度 500 像素、高度 300 像素。
data = ["Apple", "Banana", "Orange", "Grapes", "Pineapple"]: 定義一個包含靜態數據的列表。
self.model = QStringListModel(): 創建一個 QStringListModel 對象，用于管理 List View 的數據模型。
self.model.setStringList(data): 將靜態數據添加到數據模型中。
self.list_view = QListView(): 創建一個 QListView 對象，用于顯示數據列表。
self.list_view.setModel(self.model): 將數據模型設置為 List View 的模型。
layout = QVBoxLayout(): 創建一個垂直布局管理器。
layout.addWidget(self.list_view): 將 List View 添加到布局中。
central_widget = QWidget(): 創建一個 QWidget 對象作為主窗口的中央部件。
central_widget.setLayout(layout): 將布局設置為中央部件的布局。
self.setCentralWidget(central_widget): 將中央部件設置為主窗口的中央部件。

2.3 運行結果

在這里插入圖片描述

3. 數據模型

在 PyQt5 中，數據模型是一種用于管理 List View 中數據的重要概念。數據模型負責存儲、組織和操作列表視圖中顯示的數據。PyQt5 提供了兩種主要類型的數據模型：標準模型和自定義模型。

3.1 標準模型

PyQt5 提供了一些標準的數據模型類，最常用的是 QStandardItemModel 和 QStringListModel。
QStandardItemModel：適用于一般的數據展示，可以存儲各種類型的數據，每個數據項都可以包含文本、圖標等內容。

QStringListModel：專門用于管理字符串列表的數據模型，可以方便地將字符串列表顯示在 List View 中。

from PyQt5.QtCore import QStringListModel# 創建 QStringListModel 數據模型
model = QStringListModel()# 填充數據到模型中
data = ["Apple", "Banana", "Orange", "Grapes", "Pineapple"]
model.setStringList(data)

3.2 自定義模型

有時候，標準模型可能無法滿足特定的需求，這時可以自定義數據模型。

自定義模型需要繼承自 QAbstractItemModel 類，并實現一些關鍵的方法，如 data()、rowCount()、columnCount() 等，以便 List View 能夠正確地顯示數據。

from PyQt5.QtCore import QAbstractItemModel, QModelIndex, Qt# 自定義數據模型類
class CustomModel(QAbstractItemModel):def __init__(self, data, parent=None):super().__init__(parent)self.data = datadef rowCount(self, parent=QModelIndex()):return len(self.data)def columnCount(self, parent=QModelIndex()):return 1def data(self, index, role=Qt.DisplayRole):if role == Qt.DisplayRole:return self.data[index.row()]return None# 使用自定義模型
data = ["Apple", "Banana", "Orange", "Grapes", "Pineapple"]
model = CustomModel(data)

4. 自定義 List View

在 PyQt5 中，自定義 List View 的外觀和行為可以通過多種方式實現，包括使用樣式表 (QSS)、設置項委托 (Item Delegate) 以及直接修改 List View 的屬性。

4.1 使用樣式表 (QSS)

樣式表類似于 CSS，可以用于修改控件的外觀。

from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget, QListView
from PyQt5.QtCore import QStringListModel
import sysclass MyMainWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("Custom List View Example")self.resize(500, 300)# 創建數據模型并填充數據data = ["Apple", "Banana", "Orange", "Grapes", "Pineapple"]self.model = QStringListModel()self.model.setStringList(data)# 創建 List View 實例并設置數據模型self.list_view = QListView()self.list_view.setModel(self.model)# 使用樣式表自定義 List View 的外觀self.list_view.setStyleSheet("""QListView {background-color: #f0f0f0;alternate-background-color: #e0e0e0;padding: 10px;}QListView::item {height: 40px;}QListView::item:selected {background-color: #a0a0ff;color: white;}""")# 創建主窗口布局layout = QVBoxLayout()layout.addWidget(self.list_view)# 創建主窗口部件并設置布局central_widget = QWidget()central_widget.setLayout(layout)self.setCentralWidget(central_widget)if __name__ == "__main__":app = QApplication(sys.argv)window = MyMainWindow()window.show()sys.exit(app.exec_())

結果如下：

在這里插入圖片描述

4.2 設置項委托 (Item Delegate)

項委托可以自定義每個項的繪制和編輯行為。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget, QListView, QStyledItemDelegate, QStyle
from PyQt5.QtCore import QStringListModel, QRect, QSize, Qt
from PyQt5.QtGui import QPainter, QColor, QFontclass CustomDelegate(QStyledItemDelegate):def paint(self, painter, option, index):painter.save()# 獲取當前項的矩形區域rect = option.rect# 檢查項的選擇狀態并設置相應的背景顏色if option.state & QStyle.State_Selected:painter.fillRect(rect, QColor("#D3D3D3"))  # 灰色背景else:painter.fillRect(rect, QColor("#FFFFFF"))  # 白色背景# 獲取要顯示的文本text = index.data()# 設置自定義字體和顏色font = QFont("Arial", 14)painter.setFont(font)painter.setPen(QColor("#000000"))  # 黑色字體# 繪制文本painter.drawText(rect, Qt.AlignLeft | Qt.AlignVCenter, text)painter.restore()def sizeHint(self, option, index):# 自定義每個項的高度return QSize(option.rect.width(), 40)class MyMainWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("Custom List View Example")self.resize(500, 300)# 創建數據模型并填充數據data = ["Apple", "Banana", "Orange", "Grapes", "Pineapple"]self.model = QStringListModel()self.model.setStringList(data)# 創建 List View 實例并設置數據模型self.list_view = QListView()self.list_view.setModel(self.model)# 設置自定義委托self.list_view.setItemDelegate(CustomDelegate())# 創建主窗口布局layout = QVBoxLayout()layout.addWidget(self.list_view)# 創建主窗口部件并設置布局central_widget = QWidget()central_widget.setLayout(layout)self.setCentralWidget(central_widget)if __name__ == "__main__":app = QApplication(sys.argv)window = MyMainWindow()window.show()sys.exit(app.exec_())

運行結果如下：

在這里插入圖片描述

5.事件處理

下面例子處理 List View 中的點擊事件。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget, QListView, QMessageBox
from PyQt5.QtCore import QStringListModelclass MyMainWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("List View Event Handling Example")self.resize(300, 200)# 創建數據模型并填充數據data = ["Apple", "Banana", "Orange", "Grapes", "Pineapple"]self.model = QStringListModel()self.model.setStringList(data)# 創建 List View 實例并設置數據模型self.list_view = QListView()self.list_view.setModel(self.model)# 連接 List View 的點擊事件到相應的處理函數self.list_view.clicked.connect(self.on_item_clicked)# 創建主窗口布局layout = QVBoxLayout()layout.addWidget(self.list_view)# 創建主窗口部件并設置布局central_widget = QWidget()central_widget.setLayout(layout)self.setCentralWidget(central_widget)def on_item_clicked(self, index):# 獲取點擊項的文本item_text = index.data()# 顯示消息框QMessageBox.information(self, "Item Clicked", f"You clicked: {item_text}")if __name__ == "__main__":app = QApplication(sys.argv)window = MyMainWindow()window.show()sys.exit(app.exec_())

運行結果如下：

在這里插入圖片描述

6. 與數據交互

? 當與 PyQt5 中的 QListView 進行交互時，可以通過操作數據模型來實現添加、刪除和編輯數據等操作。

6.1 添加數據

? 要向 List View 中添加數據，可以直接修改數據模型。例如，對于 QStringListModel，可以使用 insertRows 方法或 append 方法添加新項。

# 創建數據模型
model = QStringListModel()# 添加新項
new_item = "New Item"
model.insertRows(model.rowCount(), 1)
model.setData(model.index(model.rowCount() - 1), new_item)

6.2 刪除數據

? 刪除數據與添加數據類似，也是通過操作數據模型來實現。對于 QStringListModel，可以使用 removeRows 方法刪除指定位置的項。

# 刪除選定項
selected_index = list_view.selectedIndexes()[0]
model.removeRows(selected_index.row(), 1)

6.3 編輯數據

? 要編輯 List View 中的數據，需要捕獲用戶的編輯動作，并更新相應的數據模型。可以通過重載委托類的 setEditorData 和 setModelData 方法來實現。

class CustomDelegate(QStyledItemDelegate):def setEditorData(self, editor, index):# 獲取當前項的文本text = index.data()# 將文本設置到編輯器中editor.setText(text)def setModelData(self, editor, model, index):# 獲取編輯器中的文本text = editor.text()# 更新數據模型model.setData(index, text)

6.4 完整示例

下面是一個完整的示例，演示如何使用 PyQt5 實現添加、刪除和編輯 List View 中的數據

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget, QListView, QPushButton, QLineEdit, QMessageBox, QStyledItemDelegate
from PyQt5.QtCore import QStringListModel, Qtclass CustomDelegate(QStyledItemDelegate):def setEditorData(self, editor, index):# 獲取當前項的文本text = index.data()# 將文本設置到編輯器中editor.setText(text)def setModelData(self, editor, model, index):# 獲取編輯器中的文本text = editor.text()# 更新數據模型model.setData(index, text)class MyMainWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("List View Interaction Example")self.resize(300, 200)# 創建數據模型并填充數據self.model = QStringListModel()self.model.setStringList(["Apple", "Banana", "Orange"])# 創建 List View 實例并設置數據模型self.list_view = QListView()self.list_view.setModel(self.model)self.list_view.setItemDelegate(CustomDelegate())# 創建按鈕和文本框self.add_button = QPushButton("Add")self.remove_button = QPushButton("Remove")self.edit_text = QLineEdit()self.add_button.clicked.connect(self.add_item)self.remove_button.clicked.connect(self.remove_item)# 創建主窗口布局layout = QVBoxLayout()layout.addWidget(self.list_view)layout.addWidget(self.add_button)layout.addWidget(self.remove_button)layout.addWidget(self.edit_text)# 創建主窗口部件并設置布局central_widget = QWidget()central_widget.setLayout(layout)self.setCentralWidget(central_widget)def add_item(self):# 獲取要添加的文本new_item = self.edit_text.text().strip()if new_item:# 添加新項到數據模型self.model.insertRows(self.model.rowCount(), 1)self.model.setData(self.model.index(self.model.rowCount() - 1), new_item)# 清空文本框self.edit_text.clear()else:QMessageBox.warning(self, "Warning", "Please enter a valid item.")def remove_item(self):# 獲取選定項的索引selected_indexes = self.list_view.selectedIndexes()if selected_indexes:# 刪除選定項self.model.removeRows(selected_indexes[0].row(), 1)else:QMessageBox.warning(self, "Warning", "Please select an item to remove.")if __name__ == "__main__":app = QApplication(sys.argv)window = MyMainWindow()window.show()sys.exit(app.exec_())

運行結果如下：

在這里插入圖片描述

7. 排序與過濾

在 PyQt5 中，可以通過使用 QSortFilterProxyModel 類來實現 List View 的排序和過濾功能。這個類可以作為數據模型的中介，允許對模型中的數據進行排序和過濾，而不改變原始模型的數據。下面是如何在 List View 中實現排序和過濾功能的簡要步驟：

步驟概覽：

創建原始數據模型：通常使用 QStringListModel 或自定義的模型類。
創建 QSortFilterProxyModel 對象，并將原始數據模型設置為其源模型。
將 QSortFilterProxyModel 設置為 List View 的模型。
設置 QSortFilterProxyModel 的排序和過濾規則。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget, QListView, QLineEdit, QLabel, QSortFilterProxyModel
from PyQt5.QtCore import QStringListModelclass MyMainWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("List View Sorting and Filtering Example")self.resize(300, 200)# 創建原始數據模型并填充數據self.original_model = QStringListModel()self.original_model.setStringList(["Apple", "Banana", "Orange", "Grapes", "Pineapple"])# 創建排序和過濾代理模型self.proxy_model = QSortFilterProxyModel()self.proxy_model.setSourceModel(self.original_model)# 創建 List View 實例并設置模型為代理模型self.list_view = QListView()self.list_view.setModel(self.proxy_model)# 創建文本框和標簽用于輸入和顯示過濾文本self.filter_edit = QLineEdit()self.filter_edit.textChanged.connect(self.filter_items)self.filter_label = QLabel("Filter:")# 創建主窗口布局layout = QVBoxLayout()layout.addWidget(self.filter_label)layout.addWidget(self.filter_edit)layout.addWidget(self.list_view)# 創建主窗口部件并設置布局central_widget = QWidget()central_widget.setLayout(layout)self.setCentralWidget(central_widget)def filter_items(self):# 獲取過濾文本filter_text = self.filter_edit.text()# 設置過濾正則表達式self.proxy_model.setFilterRegExp(filter_text)if __name__ == "__main__":app = QApplication(sys.argv)window = MyMainWindow()window.show()sys.exit(app.exec_())

運行結果如下：

在這里插入圖片描述

8. 總結

在這篇文章中，我們涵蓋了 PyQt5 中 QListView 的各種功能和用法，包括List View 的基本概念，展示了如何使用 PyQt5 創建一個簡單的 List View 實例，介紹了如何使用數據模型來管理 List View 中的數據，包括標準模型（如 QStringListModel）和自定義模型，我們討論了如何自定義 List View 的外觀和行為，包括調整行高、列寬、背景色等。我們介紹了如何設置項委托，以自定義 List View 中項的編輯器和顯示器。我們討論了如何處理 List View 中的事件，例如點擊，并為這些事件添加相應的處理函數。我們展示了如何在 List View 中實現添加、刪除、編輯數據等操作，以及如何使用自定義委托類來編輯數據。最后，我們介紹了如何使用 QSortFilterProxyModel 類來實現 List View 的排序和過濾功能，使用戶能夠更輕松地查找和管理數據。

總的來說，通過這些內容，讀者可以了解到如何有效地使用 PyQt5 中的 QListView 組件，并根據自己的需求進行定制和擴展。