第十五篇 -- QListWidget與QToolButton（界面）

效果圖：

這還只是一個界面，並沒有實現相應功能。

先看下這圖的構成吧。

工具欄的就是將Action拖上去，這部分前面已經介紹過了，那就看下面這部分的構圖。

1.左側是一個工具箱（ToolBox）組件，可以右鍵insert page或者delete page實現分組的添加或刪除。在屬性編輯器可以設置常用屬性的值。

• currentIndex：當前分組的編號，第一個分組的編號是0，通過改變這個值，可以選擇不同的分組頁面。
• currentItemText：當前分組的標題。
• currentItemName：當前分組的對象名稱
• currentItemIcon：為當前分組設置一個圖標，顯示在文字標題的左側。

在第一個分組里防止幾個QToolButton按鈕，並設置為網格布局。注意不要使用水平布局，因為水平布局時組內的ToolButton按鈕都是自動左對齊，而使用網格布局則是自動居中。如果碰到按鈕大小的問題的話，可以設置按鈕屬性minimumsize中的Width和Height值。

 

2. 右側是一個多頁（QTabWidget）組件。

QTabWidget是一個多頁的容器類組件。在窗體上放置一個QTabWidget組件，通過右鍵insert page或delete page等菜單項實現頁面的添加或刪除。在屬性編輯器里可以設置一些常用屬性的值。

tabPosition：頁標簽的位置，東南西北四個方位中選擇一個

currentIndex：當前頁的編號

currentTabText：當前頁的標題
currentTabName：當前頁的對象名稱

currentTabIcon：可以為當前頁設置一個圖標，顯示在文字標題的左側

tabsCloseable：頁面是否可以被關閉。若設置為True，則每個頁面的標題欄上會出現一個關閉按鈕，點擊關閉按鈕可以關閉頁面。

 

3. 使用QSplitter設計分割界面

具有分割效果的典型界面就是Windows的資源管理器，QSplitter用於設計具有分割效果的界面，可以左右或上下分割。本示例主窗體工作區的兩個主要組件是toolBox和tabWidget，希望這兩個組件設計為左右分割的效果。同時選中這兩個組件，右擊選擇Lay out->Lay Out Horizontally in Splitter，就可以為這兩個組件創建一個水平分割的布局組件splitter。

在QmyMainWindow的構造函數里使用下面一行語句就可以使splitter充滿整個工作區:

self.setCentralWidget(self.ui.splitter)

 

4. QListWidget組件

在第一頁中，第一行是一個label標簽，一個Line Edit控件，還有一個Check Box。第二行是四個QToolButton按鈕，第三行就是一個QlistWidget組件。

在窗體可視化設計時雙擊ListWidget組件，可以打開其列表項編輯器，在這個編輯器里可以增加、刪除、上移、下移列表項，可以設置每個項的屬性，包括文字內容、字體、文字對齊方式、背景色、前景色等。

比較重要的是其flags屬性（如圖3-18所示），用於設置項的一些標志，以下這些標志是枚舉類型Qt.ItemFlag的值的組合。

• Selectable：項可被選擇，對應枚舉值Qt.ItemIsSelectable。
• Editable：項可被編輯，對應枚舉值Qt.ItemIsEditable。
• DragEnabled：項可以被拖動，對應枚舉值Qt.ItemIsDragEnabled。
• DropEnabled：項可以接收拖放的項，對應枚舉值Qt.ItemIsDropEnabled。
• UserCheckable：項可以被復選，若為True，項前面出現一個CheckBox，對應枚舉值Qt.ItemIsUserCheckable。
• Enable：項被使能，對應枚舉值Qt.ItemIsEnabled。
• Tristate：允許Check的第三種狀態，若為False，則只有checked和unchecked兩種狀態，對應枚舉值Qt.ItemIsAutoTristate。

QListWidget的列表項一般是在程序里動態創建。

 

5. Action和槽

 

ui_listwidget.py

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'ui_listwidget.ui'
#
# Created by: PyQt5 UI code generator 5.13.0
#
# WARNING! All changes made in this file will be lost!


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 483)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.splitter = QtWidgets.QSplitter(self.centralwidget)
        self.splitter.setGeometry(QtCore.QRect(10, 10, 781, 381))
        self.splitter.setOrientation(QtCore.Qt.Horizontal)
        self.splitter.setObjectName("splitter")
        self.toolBox = QtWidgets.QToolBox(self.splitter)
        self.toolBox.setMaximumSize(QtCore.QSize(16777215, 16777215))
        self.toolBox.setObjectName("toolBox")
        self.page = QtWidgets.QWidget()
        self.page.setGeometry(QtCore.QRect(0, 0, 152, 291))
        self.page.setObjectName("page")
        self.gridLayout = QtWidgets.QGridLayout(self.page)
        self.gridLayout.setObjectName("gridLayout")
        self.btnList_Ini = QtWidgets.QToolButton(self.page)
        self.btnList_Ini.setMinimumSize(QtCore.QSize(130, 30))
        self.btnList_Ini.setObjectName("btnList_Ini")
        self.gridLayout.addWidget(self.btnList_Ini, 0, 0, 1, 1)
        self.btnList_Clear = QtWidgets.QToolButton(self.page)
        self.btnList_Clear.setMinimumSize(QtCore.QSize(130, 30))
        self.btnList_Clear.setObjectName("btnList_Clear")
        self.gridLayout.addWidget(self.btnList_Clear, 1, 0, 1, 1)
        self.btnList_Insert = QtWidgets.QToolButton(self.page)
        self.btnList_Insert.setMinimumSize(QtCore.QSize(130, 30))
        self.btnList_Insert.setObjectName("btnList_Insert")
        self.gridLayout.addWidget(self.btnList_Insert, 2, 0, 1, 1)
        self.btnList_Append = QtWidgets.QToolButton(self.page)
        self.btnList_Append.setMinimumSize(QtCore.QSize(130, 30))
        self.btnList_Append.setObjectName("btnList_Append")
        self.gridLayout.addWidget(self.btnList_Append, 3, 0, 1, 1)
        self.btnList_Delete = QtWidgets.QToolButton(self.page)
        self.btnList_Delete.setMinimumSize(QtCore.QSize(130, 30))
        self.btnList_Delete.setObjectName("btnList_Delete")
        self.gridLayout.addWidget(self.btnList_Delete, 4, 0, 1, 1)
        icon = QtGui.QIcon()
        icon.addPixmap(QtGui.QPixmap("Image/icons/list.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolBox.addItem(self.page, icon, "")
        self.page_2 = QtWidgets.QWidget()
        self.page_2.setGeometry(QtCore.QRect(0, 0, 152, 291))
        self.page_2.setObjectName("page_2")
        icon1 = QtGui.QIcon()
        icon1.addPixmap(QtGui.QPixmap("Image/icons/tree.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolBox.addItem(self.page_2, icon1, "")
        self.page_3 = QtWidgets.QWidget()
        self.page_3.setObjectName("page_3")
        icon2 = QtGui.QIcon()
        icon2.addPixmap(QtGui.QPixmap("Image/icons/tabel.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.toolBox.addItem(self.page_3, icon2, "")
        self.tabWidget = QtWidgets.QTabWidget(self.splitter)
        self.tabWidget.setObjectName("tabWidget")
        self.tab = QtWidgets.QWidget()
        self.tab.setObjectName("tab")
        self.gridLayout_2 = QtWidgets.QGridLayout(self.tab)
        self.gridLayout_2.setObjectName("gridLayout_2")
        self.btnSel_None = QtWidgets.QToolButton(self.tab)
        self.btnSel_None.setObjectName("btnSel_None")
        self.gridLayout_2.addWidget(self.btnSel_None, 1, 3, 1, 1)
        self.checkBox = QtWidgets.QCheckBox(self.tab)
        font = QtGui.QFont()
        font.setPointSize(10)
        self.checkBox.setFont(font)
        self.checkBox.setObjectName("checkBox")
        self.gridLayout_2.addWidget(self.checkBox, 0, 6, 1, 1)
        self.listWidget = QtWidgets.QListWidget(self.tab)
        self.listWidget.setObjectName("listWidget")
        item = QtWidgets.QListWidgetItem()
        item.setFlags(QtCore.Qt.ItemIsSelectable|QtCore.Qt.ItemIsEditable|QtCore.Qt.ItemIsDragEnabled|QtCore.Qt.ItemIsUserCheckable|QtCore.Qt.ItemIsEnabled)
        self.listWidget.addItem(item)
        item = QtWidgets.QListWidgetItem()
        item.setFlags(QtCore.Qt.ItemIsSelectable|QtCore.Qt.ItemIsEditable|QtCore.Qt.ItemIsDragEnabled|QtCore.Qt.ItemIsUserCheckable|QtCore.Qt.ItemIsEnabled)
        self.listWidget.addItem(item)
        self.gridLayout_2.addWidget(self.listWidget, 2, 0, 1, 7)
        self.label = QtWidgets.QLabel(self.tab)
        font = QtGui.QFont()
        font.setPointSize(10)
        self.label.setFont(font)
        self.label.setObjectName("label")
        self.gridLayout_2.addWidget(self.label, 0, 0, 1, 1)
        self.lineEdit = QtWidgets.QLineEdit(self.tab)
        self.lineEdit.setObjectName("lineEdit")
        self.gridLayout_2.addWidget(self.lineEdit, 0, 1, 1, 5)
        self.btnSel_ALL = QtWidgets.QToolButton(self.tab)
        self.btnSel_ALL.setObjectName("btnSel_ALL")
        self.gridLayout_2.addWidget(self.btnSel_ALL, 1, 2, 1, 1)
        self.btnSel_Invs = QtWidgets.QToolButton(self.tab)
        self.btnSel_Invs.setObjectName("btnSel_Invs")
        self.gridLayout_2.addWidget(self.btnSel_Invs, 1, 4, 1, 1)
        self.btnSelectItem = QtWidgets.QToolButton(self.tab)
        self.btnSelectItem.setObjectName("btnSelectItem")
        self.gridLayout_2.addWidget(self.btnSelectItem, 1, 0, 1, 2)
        self.tabWidget.addTab(self.tab, "")
        self.tab_2 = QtWidgets.QWidget()
        self.tab_2.setObjectName("tab_2")
        self.tabWidget.addTab(self.tab_2, "")
        self.tab_3 = QtWidgets.QWidget()
        self.tab_3.setObjectName("tab_3")
        self.tabWidget.addTab(self.tab_3, "")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
        self.toolBar = QtWidgets.QToolBar(MainWindow)
        self.toolBar.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
        self.toolBar.setObjectName("toolBar")
        MainWindow.addToolBar(QtCore.Qt.TopToolBarArea, self.toolBar)
        self.actList_Ini = QtWidgets.QAction(MainWindow)
        icon3 = QtGui.QIcon()
        icon3.addPixmap(QtGui.QPixmap("Image/icons/initial.jpg"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.actList_Ini.setIcon(icon3)
        self.actList_Ini.setObjectName("actList_Ini")
        self.actList_Clear = QtWidgets.QAction(MainWindow)
        icon4 = QtGui.QIcon()
        icon4.addPixmap(QtGui.QPixmap("Image/icons/clear.jpg"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.actList_Clear.setIcon(icon4)
        self.actList_Clear.setObjectName("actList_Clear")
        self.actList_Insert = QtWidgets.QAction(MainWindow)
        icon5 = QtGui.QIcon()
        icon5.addPixmap(QtGui.QPixmap("Image/icons/insert.jpg"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.actList_Insert.setIcon(icon5)
        self.actList_Insert.setObjectName("actList_Insert")
        self.actList_Append = QtWidgets.QAction(MainWindow)
        icon6 = QtGui.QIcon()
        icon6.addPixmap(QtGui.QPixmap("Image/icons/append.jpg"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.actList_Append.setIcon(icon6)
        self.actList_Append.setObjectName("actList_Append")
        self.actList_Delete = QtWidgets.QAction(MainWindow)
        icon7 = QtGui.QIcon()
        icon7.addPixmap(QtGui.QPixmap("Image/icons/delete.jpg"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.actList_Delete.setIcon(icon7)
        self.actList_Delete.setObjectName("actList_Delete")
        self.actSel_ALL = QtWidgets.QAction(MainWindow)
        self.actSel_ALL.setObjectName("actSel_ALL")
        self.actSel_None = QtWidgets.QAction(MainWindow)
        self.actSel_None.setObjectName("actSel_None")
        self.actSel_Invs = QtWidgets.QAction(MainWindow)
        self.actSel_Invs.setObjectName("actSel_Invs")
        self.actQuit = QtWidgets.QAction(MainWindow)
        icon8 = QtGui.QIcon()
        icon8.addPixmap(QtGui.QPixmap("Image/icons/quit.jpg"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.actQuit.setIcon(icon8)
        self.actQuit.setObjectName("actQuit")
        self.actSelPopMenu = QtWidgets.QAction(MainWindow)
        icon9 = QtGui.QIcon()
        icon9.addPixmap(QtGui.QPixmap("Image/icons/popmenu.jpg"), QtGui.QIcon.Normal, QtGui.QIcon.Off)
        self.actSelPopMenu.setIcon(icon9)
        self.actSelPopMenu.setObjectName("actSelPopMenu")
        self.toolBar.addAction(self.actList_Ini)
        self.toolBar.addAction(self.actList_Clear)
        self.toolBar.addAction(self.actList_Insert)
        self.toolBar.addAction(self.actList_Append)
        self.toolBar.addAction(self.actList_Delete)

        self.retranslateUi(MainWindow)
        self.toolBox.setCurrentIndex(0)
        self.tabWidget.setCurrentIndex(0)
        self.actSelPopMenu.triggered.connect(self.actSel_Invs.trigger)
        self.actQuit.triggered.connect(MainWindow.close)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.btnList_Ini.setText(_translate("MainWindow", "btnList_Ini"))
        self.btnList_Clear.setText(_translate("MainWindow", "btnList_Clear"))
        self.btnList_Insert.setText(_translate("MainWindow", "btnList_Insert"))
        self.btnList_Append.setText(_translate("MainWindow", "btnList_Append"))
        self.btnList_Delete.setText(_translate("MainWindow", "btnList_Delete"))
        self.toolBox.setItemText(self.toolBox.indexOf(self.page), _translate("MainWindow", "QListWidget操作"))
        self.toolBox.setItemText(self.toolBox.indexOf(self.page_2), _translate("MainWindow", "QTreeWidget"))
        self.toolBox.setItemText(self.toolBox.indexOf(self.page_3), _translate("MainWindow", "QTabelWidget"))
        self.btnSel_None.setText(_translate("MainWindow", "btnSel_None"))
        self.checkBox.setText(_translate("MainWindow", "可編輯"))
        __sortingEnabled = self.listWidget.isSortingEnabled()
        self.listWidget.setSortingEnabled(False)
        item = self.listWidget.item(0)
        item.setText(_translate("MainWindow", "New Item"))
        item = self.listWidget.item(1)
        item.setText(_translate("MainWindow", "New Item1"))
        self.listWidget.setSortingEnabled(__sortingEnabled)
        self.label.setText(_translate("MainWindow", "當前項變化"))
        self.btnSel_ALL.setText(_translate("MainWindow", "btnSel_ALL"))
        self.btnSel_Invs.setText(_translate("MainWindow", "btnSel_Invs"))
        self.btnSelectItem.setText(_translate("MainWindow", "btnSelectItem"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("MainWindow", "QListWidget"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("MainWindow", "QTreeWidget"))
        self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_3), _translate("MainWindow", "QTableWidget"))
        self.toolBar.setWindowTitle(_translate("MainWindow", "toolBar"))
        self.actList_Ini.setText(_translate("MainWindow", "初始化列表"))
        self.actList_Ini.setToolTip(_translate("MainWindow", "初始化列表"))
        self.actList_Ini.setShortcut(_translate("MainWindow", "Ctrl+I"))
        self.actList_Clear.setText(_translate("MainWindow", "清除列表"))
        self.actList_Clear.setToolTip(_translate("MainWindow", "清除列表"))
        self.actList_Insert.setText(_translate("MainWindow", "插入項"))
        self.actList_Insert.setToolTip(_translate("MainWindow", "插入項"))
        self.actList_Insert.setShortcut(_translate("MainWindow", "Ctrl+S"))
        self.actList_Append.setText(_translate("MainWindow", "添加項"))
        self.actList_Append.setToolTip(_translate("MainWindow", "添加項"))
        self.actList_Append.setShortcut(_translate("MainWindow", "Ctrl+A"))
        self.actList_Delete.setText(_translate("MainWindow", "刪除當前項"))
        self.actList_Delete.setToolTip(_translate("MainWindow", "刪除當前項"))
        self.actList_Delete.setShortcut(_translate("MainWindow", "Del"))
        self.actSel_ALL.setText(_translate("MainWindow", "全選"))
        self.actSel_ALL.setToolTip(_translate("MainWindow", "全選"))
        self.actSel_None.setText(_translate("MainWindow", "全不選"))
        self.actSel_None.setToolTip(_translate("MainWindow", "全不選"))
        self.actSel_Invs.setText(_translate("MainWindow", "反選"))
        self.actSel_Invs.setToolTip(_translate("MainWindow", "反選"))
        self.actQuit.setText(_translate("MainWindow", "退出"))
        self.actQuit.setToolTip(_translate("MainWindow", "退出程序"))
        self.actSelPopMenu.setText(_translate("MainWindow", "項選擇"))
        self.actSelPopMenu.setToolTip(_translate("MainWindow", "項選擇"))

 

myMainWindow_listwidget.py

#!/usr/bin/env python
# _*_ coding: UTF-8 _*_
"""=================================================
@Project -> File    : Operate-system -> myMainWindow_listwidget.py
@IDE     : PyCharm
@Author  : zihan
@Date    : 2020/4/14 9:24
@Desc    :
================================================="""

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QListWidgetItem, QMenu, QToolButton
from PyQt5.QtGui import QIcon, QCursor
from PyQt5.QtCore import pyqtSlot, Qt
from ui_listwidget import Ui_MainWindow


class QmyMainWindow(QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)

        self.setCentralWidget(self.ui.splitter)  # 使splitter充滿整個工作區
        self.__set_actions_for_button()  # ToolButton關聯Action
        self.__create_selection_pop_menu()

    # ToolButton關聯Action
    def __set_actions_for_button(self):
        self.ui.btnList_Ini.setDefaultAction(self.ui.actList_Ini)
        self.ui.btnList_Clear.setDefaultAction(self.ui.actList_Clear)

        self.ui.btnList_Insert.setDefaultAction(self.ui.actList_Insert)
        self.ui.btnList_Append.setDefaultAction(self.ui.actList_Append)
        self.ui.btnList_Delete.setDefaultAction(self.ui.actList_Delete)

        self.ui.btnSel_ALL.setDefaultAction(self.ui.actSel_ALL)
        self.ui.btnSel_None.setDefaultAction(self.ui.actSel_None)
        self.ui.btnSel_Invs.setDefaultAction(self.ui.actSel_Invs)

        self.ui.btnList_Ini.setToolButtonStyle(Qt.ToolButtonTextBesideIcon)
        self.ui.btnList_Clear.setToolButtonStyle(Qt.ToolButtonTextBesideIcon)
        self.ui.btnList_Insert.setToolButtonStyle(Qt.ToolButtonTextBesideIcon)
        self.ui.btnList_Append.setToolButtonStyle(Qt.ToolButtonTextBesideIcon)
        self.ui.btnList_Delete.setToolButtonStyle(Qt.ToolButtonTextBesideIcon)

    # 創建ToolButton按鈕的下拉菜單
    def __create_selection_pop_menu(self):
        menuSelection = QMenu(self)  # 下拉菜單
        menuSelection.addAction(self.ui.actSel_ALL)
        menuSelection.addAction(self.ui.actSel_None)
        menuSelection.addAction(self.ui.actSel_Invs)

        # listWidget上方的btnSelectItem按鈕
        self.ui.btnSelectItem.setPopupMode(QToolButton.MenuButtonPopup)
        self.ui.btnSelectItem.setToolButtonStyle(Qt.ToolButtonTextBesideIcon)
        self.ui.btnSelectItem.setDefaultAction(self.ui.actSelPopMenu)
        self.ui.btnSelectItem.setMenu(menuSelection)  # 設置下拉菜單

        # 工具欄上的下拉式菜單按鈕
        toolBtn = QToolButton(self)
        toolBtn.setPopupMode(QToolButton.InstantPopup)
        toolBtn.setDefaultAction(self.ui.actSelPopMenu)
        toolBtn.setToolButtonStyle(Qt.ToolButtonTextUnderIcon)
        toolBtn.setMenu(menuSelection)  # 設置下拉菜單
        self.ui.toolBar.addWidget(toolBtn)

        # 工具欄添加分隔條和"退出"按鈕
        self.ui.toolBar.addSeparator()
        self.ui.toolBar.addAction(self.ui.actQuit)


if __name__ == "__main__":
    app = QApplication(sys.argv)  # 創建app，用QApplication類
    form = QmyMainWindow()
    form.show()
    sys.exit(app.exec_())

 

ok.