目录
一、多线程任务和多窗体交互
二、增删改查Demo
三、UI设计
【css效果代码对照表】
【实现效果】
【实现代码】
【常见问题】
Q1:工具栏怎么加,资源图片怎么加
Q2:控件被背景染色怎么办?
Q3:QTdesigner有多少好用的快捷键
END
一、多线程任务和多窗体交互
【main】
import MainForm
#import CRUD
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBoxif __name__ == '__main__':app = QApplication(sys.argv)MainWindow = QMainWindow()ui = MainForm.Ui_MainWindow()#也可能是Ui_Form/Ui_widget这里填写的是生成的类名ui.setupUi(MainWindow)MainWindow.show()sys.exit(app.exec_())
【MainForm.py】
# -*- coding: utf-8 -*-
import time# Form implementation generated from reading ui file 'MainForm.ui'
#
# Created by: PyQt5 UI code generator 5.15.9
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again. Do not edit this file unless you know what you are doing.from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import QThread, pyqtSignalclass Ui_MainWindow(object):def __init__(self):super().__init__()def setupUi(self, MainWindow):MainWindow.setObjectName("MainWindow")MainWindow.resize(800, 600)icon = QtGui.QIcon()icon.addPixmap(QtGui.QPixmap("ril.ico"), QtGui.QIcon.Normal, QtGui.QIcon.Off)MainWindow.setWindowIcon(icon)self.centralwidget = QtWidgets.QWidget(MainWindow)self.centralwidget.setObjectName("centralwidget")self.pushButton = QtWidgets.QPushButton(self.centralwidget)self.pushButton.setGeometry(QtCore.QRect(300, 150, 181, 31))self.pushButton.setObjectName("pushButton")self.pushButton.clicked.connect(self.open_new_window)self.progressBar = QtWidgets.QProgressBar(self.centralwidget)self.progressBar.setGeometry(QtCore.QRect(30, 440, 741, 51))self.progressBar.setProperty("value", 0)self.progressBar.setObjectName("progressBar")self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)self.pushButton_2.setGeometry(QtCore.QRect(290, 260, 201, 28))self.pushButton_2.setObjectName("pushButton_2")MainWindow.setCentralWidget(self.centralwidget)self.worker = WorkerThread() # 创建WorkerThread实例self.worker.progress.connect(self.update_progress) # 多线程连接进度条self.pushButton_2.clicked.connect(self.worker.start) # 开始按钮连接多线程self.retranslateUi(MainWindow)QtCore.QMetaObject.connectSlotsByName(MainWindow)def retranslateUi(self, MainWindow):_translate = QtCore.QCoreApplication.translateMainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))self.pushButton.setText(_translate("MainWindow", "点击我打开另一个窗体"))self.pushButton_2.setText(_translate("MainWindow", "点击我,执行多线程任务"))def open_new_window(self):import Form2# 创建新的子窗口self.new_window = Form2.Ui_Form() # 使用 Form2 类self.new_window.setWindowTitle("一个新的窗体")# Form2信号 关联 主窗口获取方法getdataself.new_window.signal.connect(self.MainGetData)# 发送消息到Form2self.new_window.SubGetData("hello")self.new_window.show() # 显示新窗体def update_progress(self, value):#设置进度条的值self.progressBar.setValue(value)def MainGetData(self,msg):#接收Form2的信息print(f"我是主窗体,我收到了: {msg}")class WorkerThread(QThread): #多线程任务progress = pyqtSignal(int) # 自定义信号用于发送进度def run(self):for i in range(1, 6):time.sleep(i) # 模拟耗时操作self.progress.emit(i * 20) # 发送当前进度print(f"任务{i}完成了")self.progress.emit(100) # 任务全部完成
【Form2】
# -*- coding: utf-8 -*-# Form implementation generated from reading ui file 'Form2.ui'
#
# Created by: PyQt5 UI code generator 5.15.9
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again. Do not edit this file unless you know what you are doing.from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import pyqtSignalclass Ui_Form(QtWidgets.QWidget):#【改】1.改为继承QtWidgets.QWidgetsignal = pyqtSignal(str)#信号,沟通主窗体的getdata方法def __init__(self):# 【加】2.初始化界面方法super().__init__()self.setupUi(self)def setupUi(self, Form):Form.setObjectName("Form")Form.resize(571, 345)self.label = QtWidgets.QLabel(Form)self.label.setGeometry(QtCore.QRect(190, 30, 281, 161))font = QtGui.QFont()font.setFamily("Arial")font.setPointSize(36)self.label.setFont(font)self.label.setObjectName("label")self.lineEdit = QtWidgets.QLineEdit(Form)self.lineEdit.setGeometry(QtCore.QRect(220, 160, 151, 31))self.lineEdit.setObjectName("lineEdit")self.pushButton = QtWidgets.QPushButton(Form)self.pushButton.setGeometry(QtCore.QRect(240, 210, 111, 28))self.pushButton.setObjectName("pushButton")self.pushButton.clicked.connect(self.SubSendData)self.retranslateUi(Form)QtCore.QMetaObject.connectSlotsByName(Form)def retranslateUi(self, Form):_translate = QtCore.QCoreApplication.translateForm.setWindowTitle(_translate("Form", "Form"))self.label.setText(_translate("Form", "子窗体"))self.pushButton.setText(_translate("Form", "发送给主窗体"))def SubGetData(self,msg):#接收主窗体的信息print(f"我是Form2,我收到了: {msg}")def SubSendData(self):#发送信息给主窗体outputdata = self.lineEdit.text()self.signal.emit(outputdata)self.close()
【效果图】
运行main.py函数,点击打开窗体即打开Form2,点击多线程任务即可实现多线程任务。
二、增删改查Demo
【main.py】
#import MainForm
import CRUD
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBoxif __name__ == '__main__':app = QApplication(sys.argv)MainWindow = QMainWindow()ui = CRUD.Ui_Form()#也可能是Ui_Form/Ui_widget这里填写的是生成的类名ui.setupUi(MainWindow)MainWindow.show()sys.exit(app.exec_())
【CRUD.py】
import SQLiterConnect
from PyQt5.QtGui import QIcon
from PyQt5 import QtCore, QtGui, QtWidgetsclass Ui_Form(object):def setupUi(self, Form):Form.setObjectName("Form")Form.resize(1074, 759)self.label = QtWidgets.QLabel(Form)self.label.setGeometry(QtCore.QRect(410, 0, 281, 91))Form.setWindowIcon(QIcon("ril.ico"))#设置iconfont = QtGui.QFont()font.setFamily("黑体")font.setPointSize(26)self.label.setFont(font)self.label.setObjectName("label")self.lineEdit = QtWidgets.QLineEdit(Form)self.lineEdit.setGeometry(QtCore.QRect(80, 110, 111, 31))self.lineEdit.setObjectName("lineEdit")self.comboBox = QtWidgets.QComboBox(Form)self.comboBox.setGeometry(QtCore.QRect(520, 110, 141, 31))self.comboBox.setObjectName("comboBox")self.comboBox.addItem("")self.comboBox.addItem("")self.comboBox.addItem("")self.checkBox = QtWidgets.QCheckBox(Form)self.checkBox.setGeometry(QtCore.QRect(700, 110, 111, 21))self.checkBox.setObjectName("checkBox")self.lineEdit_2 = QtWidgets.QLineEdit(Form)self.lineEdit_2.setGeometry(QtCore.QRect(300, 110, 131, 31))self.lineEdit_2.setObjectName("lineEdit_2")self.pushButton = QtWidgets.QPushButton(Form)self.pushButton.setGeometry(QtCore.QRect(840, 110, 93, 28))self.pushButton.setObjectName("pushButton")self.tableWidget = QtWidgets.QTableWidget(Form)self.tableWidget.setGeometry(QtCore.QRect(30, 170, 1021, 571))self.tableWidget.setObjectName("tableWidget")self.tableWidget.setColumnCount(0)self.tableWidget.setRowCount(0)self.tableWidget.verticalHeader().setVisible(False)#隐藏垂直自增的序号列self.tableWidget.setSortingEnabled(True)#设置允许排名self.label_2 = QtWidgets.QLabel(Form)self.label_2.setGeometry(QtCore.QRect(30, 120, 72, 15))self.label_2.setObjectName("label_2")self.label_3 = QtWidgets.QLabel(Form)self.label_3.setGeometry(QtCore.QRect(250, 120, 72, 15))self.label_3.setObjectName("label_3")self.label_4 = QtWidgets.QLabel(Form)self.label_4.setGeometry(QtCore.QRect(470, 120, 72, 15))self.label_4.setObjectName("label_4")self.pushButton_2 = QtWidgets.QPushButton(Form)self.pushButton_2.setGeometry(QtCore.QRect(940, 110, 93, 28))self.pushButton_2.setObjectName("pushButton_2")#绑定事件self.pushButton.clicked.connect(self.query)self.pushButton_2.clicked.connect(self.add)self.lineEdit.textChanged.connect(self.query)self.lineEdit_2.textChanged.connect(self.query)self.checkBox.stateChanged.connect(self.query)self.comboBox.currentIndexChanged.connect(self.query)#初始化self.tableWidget.setColumnCount(8)#设置8列self.tableWidget.setHorizontalHeaderLabels(["ID", "姓名", "年龄", "班级", "性别", "是否是领导", "编辑", "删除"])self.query()self.retranslateUi(Form)QtCore.QMetaObject.connectSlotsByName(Form)def retranslateUi(self, Form):_translate = QtCore.QCoreApplication.translateForm.setWindowTitle(_translate("Form", "增删改查演示"))self.label.setText(_translate("Form", "增删改查Demo"))self.comboBox.setItemText(0, _translate("Form", "全部"))self.comboBox.setItemText(1, _translate("Form", "男"))self.comboBox.setItemText(2, _translate("Form", "女"))self.checkBox.setText(_translate("Form", "是否是领导"))self.pushButton.setText(_translate("Form", "查询"))self.label_2.setText(_translate("Form", "姓名:"))self.label_3.setText(_translate("Form", "班级:"))self.label_4.setText(_translate("Form", "性别:"))self.pushButton_2.setText(_translate("Form", "新增"))def query(self):try:# 清空表格self.tableWidget.setRowCount(0)# 获取输入数据name = self.lineEdit.text()classes = self.lineEdit_2.text()sex = self.comboBox.currentText()is_leader = 1 if self.checkBox.isChecked() else 0#拼接SQLsql = "SELECT * FROM Student WHERE 1=1"if name:sql += f" AND Name LIKE '%{name}%'"if classes:sql += f" AND Classes LIKE '%{classes}%'"if sex and sex!="全部":sql+= f" AND Sex = '{sex}'"if is_leader:sql += f" AND IsLeader = {is_leader}"rows = SQLiterConnect.sqlquery(sql)# 填充表格for row in rows:rowPosition = self.tableWidget.rowCount()self.tableWidget.insertRow(rowPosition)for col, item in enumerate(row):table_item = QtWidgets.QTableWidgetItem(str(item))# 设置内容居中对齐table_item.setTextAlignment(QtCore.Qt.AlignCenter | QtCore.Qt.AlignVCenter)self.tableWidget.setItem(rowPosition, col, table_item)editButton = QtWidgets.QPushButton("编辑")editButton.clicked.connect(lambda checked, row=row: self.edit(row))self.tableWidget.setCellWidget(rowPosition, 6, editButton)deleteButton = QtWidgets.QPushButton("删除")deleteButton.clicked.connect(lambda checked, row=rowPosition: self.delete(row))self.tableWidget.setCellWidget(rowPosition, 7, deleteButton)except Exception as e:print(f"查询出错{e}")def add(self):try:dialog = EditDialog((None, '', '', '', '', 0)) # 创建空记录的对话框if dialog.exec_():data = dialog.get_data()#编写SQL:sql = f"INSERT INTO Student (Name, Age, Classes, Sex, IsLeader) VALUES ('{data['name']}', {data['age']}, '{data['classes']}', '{data['sex']}', {data['is_leader']})"SQLiterConnect.sqlexecute(sql)self.query()except Exception as e:print(f"新增出错{e}")def edit(self, row):try:dialog = EditDialog(row)if dialog.exec_():data = dialog.get_data()item_id = row[0]#编写并执行SQLsql=f"""UPDATE Student SET Name = '{data['name']}', Age = '{data['age']}', Classes = '{data['classes']}', Sex = '{data['sex']}', IsLeader = '{data['is_leader']}' WHERE ID = {item_id}"""SQLiterConnect.sqlexecute(sql)self.query()except Exception as e:print(f"编辑出错{e}")def delete(self, row):try:item_id = self.tableWidget.item(row, 0).text()reply = QtWidgets.QMessageBox.question(None, '删除', '确定删除吗?',QtWidgets.QMessageBox.Yes | QtWidgets.QMessageBox.No,QtWidgets.QMessageBox.No)if reply == QtWidgets.QMessageBox.Yes:sql = f"DELETE FROM Student WHERE ID = {item_id}"SQLiterConnect.sqlexecute(sql)self.query()except Exception as e:print(f"删除出错{e}")class EditDialog(QtWidgets.QDialog):#编辑对话框def __init__(self, row, parent=None):super(EditDialog, self).__init__(parent)self.row = rowself.setWindowTitle("编辑框")self.setGeometry(100, 100, 300, 200)# self.setWindowIcon(QtGui.QIcon("ril.ico"))#设置icon图标self.name_edit = QtWidgets.QLineEdit(self)self.name_edit.setText(row[1])self.age_edit = QtWidgets.QLineEdit(self)self.age_edit.setText(str(row[2]))self.classes_edit = QtWidgets.QLineEdit(self)self.classes_edit.setText(row[3])self.sex_combo = QtWidgets.QComboBox(self)self.sex_combo.addItems(["全部","男", "女"])self.sex_combo.setCurrentText(row[4])self.is_leader_check = QtWidgets.QCheckBox("Is Leader", self)self.is_leader_check.setChecked(row[5])self.save_button = QtWidgets.QPushButton("保存", self)self.save_button.clicked.connect(self.save)layout = QtWidgets.QFormLayout(self)layout.addRow("Name:", self.name_edit)layout.addRow("Age:", self.age_edit)layout.addRow("Classes:", self.classes_edit)layout.addRow("Sex:", self.sex_combo)layout.addRow("Is Leader:", self.is_leader_check)layout.addWidget(self.save_button)# 计算并设置对话框位置为屏幕中心screen_rect = QtWidgets.QDesktopWidget().screenGeometry()dialog_rect = self.geometry()x = (screen_rect.width() - dialog_rect.width()) // 2y = (screen_rect.height() - dialog_rect.height()) // 2self.move(x, y)def save(self):self.accept()def get_data(self):try:return {'name': self.name_edit.text(),'age': int(self.age_edit.text()),'classes': self.classes_edit.text(),'sex': self.sex_combo.currentText(),'is_leader': 1 if self.is_leader_check.isChecked() else 0}except Exception as e:print(f"编辑框转化数据出错{e}")
【SQLiterConnect】(sqlite数据库)
from datetime import datetime
import sqlite3conn = sqlite3.connect('database.db')
cursor = conn.cursor()
now = datetime.now().strftime("%Y-%m-%d %H:%M:%S")def sqlquery(sql):try:rows = cursor.execute(sql).fetchall()print(f"查询成功,数据:{len(rows)}条,时间:{now}")return rowsexcept Exception as e:print(f"查询出现错误: {e},时间:{now},出错SQL:\n{sql}")def sqlexecute(sql):try:cursor.execute(sql)cursor.connection.commit()print(f"增删改成功,时间:{now}")except Exception as e:print(f"增删改出现错误: {e},时间:{now},出错SQL:\n{sql}")#不要出现GO等脚本关键字cursor.connection.rollback()if __name__ == '__main__':pass# data = sqlquery("SELECT * FROM BuyTable WHERE ID='1'")# ins = 100# data = sqlquery(f"SELECT * FROM BuyTable WHERE ID={ins}")
三、UI设计
【css效果代码对照表】
效果 | css代码 | |
卡片 | background-color: rgb(255, 255, 255); /* 背景颜色为白色 */ border-radius: 30px; /* 圆角半径为30像素 */ | |
悬浮变红标签 | QLabel { font: bold 15px; color: black; background: transparent; } QLabel:hover { color: red; } | |
悬浮阴影标签 | QLabel { font: bold 15px; color: black; background: transparent; } QLabel:hover { font: bold 15px; color: white; background: #333; padding: 10px; border-radius: 5px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* 文本阴影 */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); /* 边框阴影 */ } | |
悬浮显框标签 | QLabel { font: bold 15px; color: black; background: #f0f0f0; padding: 10px; border: 2px solid transparent; /* 初始透明边框 */ border-radius: 5px; transition: border-color 0.3s ease; } QLabel:hover { border-color: #ff6b6b; /* 鼠标悬停时边框颜色 */ } | |
QPlainTextEdit 无格式可换行输入框 | QPlainTextEdit { border: 2px solid rgb(0, 0, 0); border-radius: 20px; background: white; /* 背景色为白色 */ padding: 10px; /* 适当的内边距,以避免内容接触到边框 */ } QPlainTextEdit:focus { outline: none; border-color: rgb(0, 170, 255); } 【注意】点击这个控件右边QPlainTextEdit设置undoRedoEnabled=true(打勾),支持ctrl+z撤销你写错的内容! | |
QLineEdit 单行输入框 | QLineEdit{ border: 2px solid rgb(0, 0, 0); border-radius: 20px; padding:10px;/*下拉框内容和下拉框的间距*/ } QLineEdit:focus { outline: none; border-color: rgb(0, 170, 255); } 【注意】点击这个控件右边QLineEdit设置 输入类型 echoMode | |
悬浮变色透明按钮 | QPushButton { background-image: url(:/pics/icons/bell.png); /* 设置按钮背景图像 */ background-repeat: no-repeat; /* 不重复背景图像 */ background-position: left center; /* 图片靠左对齐,垂直居中 */ background-color: transparent; /* 背景颜色透明 */ padding-left: 40px; /* 为了避免文本覆盖图片,调整内边距 */ border: none; /* 去除按钮边框 */ border-radius: 30px; } QPushButton:hover { background-color: rgb(170, 255, 255); /* 鼠标悬停时背景色 */ } | |
悬浮变色 无图按钮 | QPushButton { background-color:rgb(0, 170, 255) ; border: 2px solid rgb(0, 0, 0); /* 设置边框的宽度和颜色 */ border-radius: 10px; font: bold 10pt "微软雅黑"; } QPushButton:hover { background-color:rgb(135,206,250) ; /* 鼠标悬停时背景色 */ } | |
下拉框 | QComboBox { border: 2px solid rgb(0, 0, 0); border-radius: 20px; padding:10px;/*下拉框内容和下拉框的间距*/ } QComboBox::drop-down {/*下拉箭头ui*/ subcontrol-origin: padding; subcontrol-position: top right; width: 30px; /* 尝试调整宽度 */ border-left: 1px solid rgb(0, 0, 0); /* 边框与组合框对齐 */ border-top-right-radius: 18px; /* 圆角半径,略小于组合框 */ border-bottom-right-radius: 18px; /* 圆角半径,略小于组合框 */ background: rgb(0, 170, 255); /* 设置背景色 */ } QComboBox::down-arrow { image: url(:/pics/icons/search.png);/* 自定义箭头图标 */ width: 15px; /* 箭头宽度 */ height: 15px; /* 箭头高度 */ } QComboBox QAbstractItemView {/*下拉框设置*/ border: 2px solid black; padding: 5px; background-color: rgb(255, 255, 255); } | |
选择框 | QCheckBox { color: black; /* 文本颜色 */ font: bold 10pt "微软雅黑";/*字体*/ padding: 5px; /* 内边距 */ spacing: 10px; /* 文本与复选框之间的间距 */ } QCheckBox::indicator { width: 15px; /* 正方形复选框宽度 */ height: 15px; /* 正方形复选框高度 */ } QCheckBox::indicator:unchecked { border: 2px solid rgb(0, 170, 255); /* 未选中状态下的边框颜色 */ border-radius: 5px; /* 边框圆角 */ background: white; /* 背景颜色 */ } QCheckBox::indicator:checked { border: 2px solid rgb(0, 170, 255); /* 选中状态下的边框颜色 */ border-radius: 5px; /* 边框圆角 */ background: rgb(0, 170, 255); /* 背景颜色 */ image: url(:/pics/icons/right.png);/*打勾icon*/ } QCheckBox::indicator:unchecked:hover { border: 2px solid rgb(135,206,250) ; /* 鼠标悬停时的边框颜色 */ } QCheckBox::indicator:checked:hover { border: 2px solid rgb(135,206,250) ; /* 鼠标悬停时的边框颜色 */ } | |
单选选择框 | QRadioButton { color: black; /* 文本颜色 */ font-size: 16px; /* 字体大小 */ padding: 5px; /* 内边距 */ spacing: 8px; /* 文本与单选框之间的间距 */ font: bold 10pt "微软雅黑";/*字体*/ } QRadioButton::indicator { width: 15px; /* 单选框宽度 */ height: 15px; /* 单选框高度 */ } QRadioButton::indicator:unchecked { border: 2px solid rgb(0, 170, 255);/* 未选中状态下的边框颜色 */ border-radius: 9px; /* 边框圆角 */ background: white; /* 背景颜色 */ } QRadioButton::indicator:checked { border: 2px solid rgb(0, 170, 255);/* 选中状态下的边框颜色 */ border-radius: 9px; /* 边框圆角 */ background: rgb(0, 170, 255); /* 背景颜色 */ image: url(:/checked_icon.png); /* 选中时的图标,可以替换成自己的图标 */ } QRadioButton::indicator:unchecked:hover { border: 2px solid rgb(135,206,250) ; /* 鼠标悬停时的边框颜色 */ } QRadioButton::indicator:checked:hover { border: 2px solid rgb(135,206,250) ; /* 鼠标悬停时的边框颜色 */ } | |
小组框 | QGroupBox { border: 2px solid black; /* 黑色边框 */ border-radius: 18px; /* 边框圆角 */ background-color: transparent; } QGroupBox::title { color: transparent; /* 隐藏标题 */ background-color: transparent; } 【主要用途】控制radiobutton,遍历控件用 | |
进度条 | QProgressBar { border: 2px solid rgb(0, 170, 255); /* 边框颜色 */ border-radius: 10px; /* 圆角 */ background: #f3f3f3;; /* 背景颜色 */ text-align: center; /* 进度文本对齐 */ height: 25px; /* 高度 */ } QProgressBar::chunk { background: rgb(0, 170, 255); } | |
列表 | QListWidget { border: 1px solid black; /* 边框颜色和粗细 */ border-radius: 15px; /* 圆角 */ background-color: rgb(0, 170, 255); /* 背景颜色 */ color: black; /* 文本颜色 */ } QListWidget::item { padding: 5px; /* 项目内边距 */ } QListWidget::item:selected { background-color: rgb(135, 206, 250); /* 鼠标悬浮颜色 */ border-radius: 15px; /* 圆角 */ color: black; /* 选中项文本颜色 */ } QListWidget::item:hover { background-color: rgb(135, 206, 250); /* 鼠标悬浮颜色 */ border-radius: 15px; /* 圆角 */ color: black; /* 鼠标悬浮时文本颜色 */ } /* 隐藏滚动条 */ QListWidget::scrollbar:vertical { border: 1px solid black; background: #f3f3f3; width: 0px; height: 0px; } QListWidget::scrollbar:horizontal { border: 1px solid black; background: #f3f3f3; height: 0px; width: 0px; } 【注意】 ①居中设置要【右键-编辑项目】选择对应列的【属性】的【textAlignment】设置水居、垂居 ②图标设置要【右键-编辑项目】选择对应列的【属性】的【icon】 | |
树形选择 | QTreeWidget { border: 1px solid black; /* 边框颜色和粗细 */ border-radius: 10px; /* 圆角 */ background-color: rgb(0, 170, 255); /* 背景颜色 */ color: black; /* 文本颜色 */ } QTreeWidget::item { padding: 5px; /* 项目内边距 */ } QTreeWidget::item:selected { background-color: rgb(135, 206, 250); /* 选中项的背景颜色 */ border-radius: 10px; /* 圆角 */ color: black; /* 选中项文本颜色 */ } QTreeWidget::item:hover { background-color: rgb(135, 206, 250); /* 鼠标悬浮时的背景颜色 */ border-radius: 10px; /* 圆角 */ color: black; /* 鼠标悬浮时文本颜色 */ } QTreeWidget::branch:has-children { image: none; /* 隐藏箭头图标 */ } 【注意】 1.双击展开下拉选项(如果想实现单击树节点展开/默认展开所有,请从代码可调整;) 2.点击TreeWidget这个组件,在紫色的QTreeView框中,【取消勾选】rootlsDecorated(箭头装饰),【勾选】animated(动画效果),headerHiddenexpandsOnDoubleClick(双击展开) 3.图标设置要【右键-编辑项目】选择对应列的【属性】的【icon】 | |
可视化表格 | QTableWidget{ border: 1px solid black; } QHeaderView::section { background-color: rgb(135, 206, 250); /* 设置表头背景色为淡蓝色 */ font: bold 10pt "微软雅黑"; /* 设置字体为微软雅黑,大小为10pt,粗体 */ border-top: 0px solid black; border-bottom: 0.5px solid black; /* 设置表头的边框为1px黑色实线 */ border-right: 0.5px solid black; /* 设置表头的边框为1px黑色实线 */ } QTableWidget::item :first{ border-left: 0.5px solid black; /* 单元格左边框 */ } QTableWidget::item { border-right: 0.5px solid black; /* 单元格右边框 */ border-bottom: 0.5px solid black; /* 单元格下边框 */ } QTableWidget::item:selected { background-color: rgb(135, 206, 250); /* 选中的单元格背景色为淡蓝色 */ } QTableWidget::item:hover { background-color: rgb(135, 206, 250); /* 鼠标悬浮的单元格背景色为淡蓝色 */ } QScrollBar:vertical { border: 0px solid black; /* 滚动条无边框 */ background: rgb(240, 240, 240); /* 滚动条背景色为浅灰色 */ width: 10px; /* 设置滚动条宽度为10px */ border-radius: 5px; /* 设置滚动条圆角为5px */ } QScrollBar::handle:vertical { background: rgb(135, 206, 250); /* 滚动条滑块背景色为淡蓝色 */ min-height: 20px; /* 滑块的最小高度为20px */ border-radius: 5px; /* 滑块圆角为5px */ } QScrollBar::add-line:vertical { background: rgb(240, 240, 240); /* 向下按钮背景色为浅灰色 */ border: 0px solid black; /* 向下按钮无边框 */ height: 10px; /* 向下按钮高度为10px */ subcontrol-position: bottom; /* 向下按钮位置在滚动条底部 */ subcontrol-origin: margin; /* 向下按钮位置原点在边距 */ } QScrollBar::sub-line:vertical { background: rgb(240, 240, 240); /* 向上按钮背景色为浅灰色 */ border: 0px solid black; /* 向上按钮无边框 */ height: 10px; /* 向上按钮高度为10px */ subcontrol-position: top; /* 向上按钮位置在滚动条顶部 */ subcontrol-origin: margin; /* 向上按钮位置原点在边距 */ } QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical { background: none; /* 向上和向下箭头背景色为无 */ } QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { background: none; /* 滚动条添加和子页面背景色为无 */ } QScrollBar:horizontal { border: 0px solid black; /* 滚动条无边框 */ background: rgb(240, 240, 240); /* 滚动条背景色为浅灰色 */ height: 10px; /* 设置滚动条高度为10px */ border-radius: 5px; /* 设置滚动条圆角为5px */ } QScrollBar::handle:horizontal { background: rgb(135, 206, 250); /* 滚动条滑块背景色为淡蓝色 */ min-width: 20px; /* 滑块的最小宽度为20px */ border-radius: 5px; /* 滑块圆角为5px */ } QScrollBar::add-line:horizontal { background: rgb(240, 240, 240); /* 向右按钮背景色为浅灰色 */ border: 0px solid black; /* 向右按钮无边框 */ width: 10px; /* 向右按钮宽度为10px */ subcontrol-position: right; /* 向右按钮位置在滚动条右侧 */ subcontrol-origin: margin; /* 向右按钮位置原点在边距 */ } QScrollBar::sub-line:horizontal { background: rgb(240, 240, 240); /* 向左按钮背景色为浅灰色 */ border: 0px solid black; /* 向左按钮无边框 */ width: 10px; /* 向左按钮宽度为10px */ subcontrol-position: left; /* 向左按钮位置在滚动条左侧 */ subcontrol-origin: margin; /* 向左按钮位置原点在边距 */ } QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal { background: none; /* 向左和向右箭头背景色为无 */ } QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal { background: none; /* 滚动条添加和子页面背景色为无 */ } 【强烈推荐代码】 self.tableWidget.verticalHeader().setVisible(False)#隐藏垂直自增的序号列 【注意事项】 控件右边属性页,showGrid不要勾选,否则对齐有问题! | |
Tab页面圆形水平 | QTabWidget::pane { border: 2px solid black; /* 黑色边框 */ } QTabBar::tab { background: rgb(0, 170, 255); /* 主配色 */ color: white; border-top: 2px solid black; /* 黑色边框 */ border-left: 2px solid black; /* 黑色边框 */ border-right: 2px solid black; /* 黑色边框 */ border-top-right-radius: 10px; border-top-left-radius: 10px; padding: 10px; min-width: 100px; } QTabBar::tab:selected { background:rgb(170, 170, 255) ; /* 鼠标悬浮配色 */ color: black; } QTabBar::tab:hover { background: rgb(135, 206, 250); /* 鼠标悬浮配色 */ color: black; } QTabBar::tab:first:selected { margin-left: 0; /* No margin for the first tab */ } QTabBar::tab:last:selected { margin-right: 0; /* No margin for the last tab */ } 【注意】点击控件看右边的QTabWidget 1.删除控件,按需选择(需要写代码):tabsClosable 3.右边可选tabshape,不过三角形tab背景色渲染会有点小问题,背景色会跟其父容器。 | |
Tab页面三角水平 | QTabWidget::pane { border: 2px solid black; /* 黑色边框 */ color: black; } QTabBar::tab { padding: 10px; min-width: 100px; color: black; } QTabBar::tab:selected { background:rgb(170, 170, 255) ; /* 鼠标悬浮配色 */ color: black; } QTabBar::tab:hover { background: rgb(135, 206, 250); /* 鼠标悬浮配色 */ color: black; } | |
Tab页面圆形水平 | QTabWidget::pane { border: 2px solid black; } QTabBar::tab { background: rgb(0, 170, 255); color: white; border-bottom-left-radius: 10px; border-top-left-radius: 10px; border-top: 2px solid black; /* 黑色边框 */ border-left: 2px solid black; /* 黑色边框 */ border-bottom: 2px solid black; /* 黑色边框 */ min-width: 80px; min-height: 30px; padding: 10px; } QTabBar::tab:selected { background: rgb(170, 170, 255); } QTabBar::tab:hover { background: rgb(135, 206, 250); } 【注意】 水平文本那里我也搞不定,只能清空标签内容,然后将tab移动到有label的地方了(原谅我= =太难搞了) | |
Stacked Widget (无标签的tab页面) | background-color: rgb(255, 255, 127); 【注意】用户是看不到箭头的 | |
日历 | 推荐开启: | |
时分秒 | QTimeEdit { border: 2px solid black; padding: 5px; background-color: rgb(0, 170, 255); color: black; font: 75 12pt "微软雅黑"; border-radius:10px; } QTimeEdit:hover { background-color: rgb(135, 206, 250); } /*隐藏箭头*/ QTimeEdit::up-button, QTimeEdit::down-button { subcontrol-origin: padding; subcontrol-position: top right; width: 0px; height: 0px; border: none; } 【右边推荐设置】 HH:mm:ss | |
整数 | QSpinBox, QTimeEdit { border: 2px solid black; padding: 5px; background-color: rgb(0, 170, 255); color: black; font: 50 12pt "微软雅黑"; border-radius: 10px; /* 设置圆角 */ } QSpinBox::up-button, QSpinBox::down-button, QTimeEdit::up-button, QTimeEdit::down-button { subcontrol-origin: padding; width: 20px; /* 箭头宽度 */ height: 10px; /* 箭头高度 */ padding-right: 3px; /* border-radius: 10px; /*设置圆角隐藏按钮 */ } QSpinBox::up-button:hover, QSpinBox::down-button:hover, QTimeEdit::up-button:hover, QTimeEdit::down-button:hover { background-color: rgb(135, 206, 250); /* 悬停时背景色 */ } QSpinBox:hover, QTimeEdit:hover { background-color: rgb(135, 206, 250); } 【注意】大小值点击控件右边设置 |
【实现效果】
【实现代码】
【main.py】
import UIdemo
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QMessageBoxif __name__ == '__main__':app = QApplication(sys.argv)MainWindow = QMainWindow()ui = UIdemo.Ui_Form()#也可能是Ui_Form/Ui_widget这里填写的是生成的类名ui.setupUi(MainWindow)MainWindow.show()sys.exit(app.exec_())
【UIdemo.py】
# -*- coding: utf-8 -*-# Form implementation generated from reading ui file 'UIdemo.ui'
#
# Created by: PyQt5 UI code generator 5.15.9
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again. Do not edit this file unless you know what you are doing.from PyQt5 import QtCore, QtGui, QtWidgetsclass Ui_Form(object):def setupUi(self, Form):Form.setObjectName("Form")Form.resize(1082, 831)self.widget = QtWidgets.QWidget(Form)self.widget.setGeometry(QtCore.QRect(610, 650, 431, 161))self.widget.setStyleSheet("background-color: rgb(255, 255, 255); /* 背景颜色为白色 */\n"
"border-radius: 30px; /* 圆角半径为15像素 */\n"
"")self.widget.setObjectName("widget")self.pushButton = QtWidgets.QPushButton(Form)self.pushButton.setGeometry(QtCore.QRect(880, 30, 161, 61))self.pushButton.setStyleSheet("QPushButton {\n"
" background-image: url(:/pics/icons/bell.png); /* 设置按钮背景图像 */\n"
" background-repeat: no-repeat; /* 不重复背景图像 */\n"
" background-position: left center; /* 图片靠左对齐,垂直居中 */\n"
" background-color: transparent; /* 背景颜色透明 */\n"
" padding-left: 40px; /* 为了避免文本覆盖图片,调整内边距 */\n"
" border: none; /* 去除按钮边框 */\n"
" border-radius: 30px; \n"
"}\n"
"QPushButton:hover {\n"
" background-color: rgb(170, 255, 255); /* 鼠标悬停时背景色 */\n"
"}\n"
"\n"
"")self.pushButton.setObjectName("pushButton")self.pushButton_2 = QtWidgets.QPushButton(Form)self.pushButton_2.setGeometry(QtCore.QRect(890, 110, 121, 41))self.pushButton_2.setStyleSheet("QPushButton {\n"
" background-color:rgb(0, 170, 255) ;\n"
" border: 2px solid rgb(0, 0, 0); /* 设置边框的宽度和颜色 */\n"
" border-radius: 10px; \n"
" font: bold 10pt \"微软雅黑\";\n"
"}\n"
"QPushButton:hover {\n"
" background-color:rgb(135,206,250) ; /* 鼠标悬停时背景色 */\n"
"}\n"
"\n"
"")self.pushButton_2.setIconSize(QtCore.QSize(20, 20))self.pushButton_2.setAutoDefault(False)self.pushButton_2.setDefault(False)self.pushButton_2.setFlat(True)self.pushButton_2.setObjectName("pushButton_2")self.comboBox = QtWidgets.QComboBox(Form)self.comboBox.setGeometry(QtCore.QRect(870, 180, 181, 41))self.comboBox.setStyleSheet("QComboBox {\n"
" border: 2px solid rgb(0, 0, 0);\n"
" border-radius: 20px;\n"
" padding:10px;/*下拉框内容和下拉框的间距*/\n"
"}\n"
"\n"
"QComboBox::drop-down {/*下拉箭头ui*/\n"
" subcontrol-origin: padding;\n"
" subcontrol-position: top right;\n"
" width: 30px; /* 尝试调整宽度 */\n"
" border-left: 1px solid rgb(0, 0, 0); /* 边框与组合框对齐 */\n"
" border-top-right-radius: 18px; /* 圆角半径,略小于组合框 */\n"
" border-bottom-right-radius: 18px; /* 圆角半径,略小于组合框 */\n"
" background: rgb(0, 170, 255); /* 设置背景色 */\n"
"}\n"
"QComboBox::down-arrow {\n"
" image: url(:/pics/icons/search.png);/* 自定义箭头图标 */\n"
" width: 15px; /* 箭头宽度 */\n"
" height: 15px; /* 箭头高度 */\n"
"}\n"
"\n"
"QComboBox QAbstractItemView {/*下拉框设置*/\n"
" border: 2px solid black; \n"
" padding: 5px;\n"
" background-color: rgb(255, 255, 255);\n"
"}\n"
"\n"
"")self.comboBox.setObjectName("comboBox")self.comboBox.addItem("")self.comboBox.addItem("")self.comboBox.addItem("")self.checkBox = QtWidgets.QCheckBox(Form)self.checkBox.setGeometry(QtCore.QRect(880, 240, 151, 41))self.checkBox.setStyleSheet(" QCheckBox \n"
" {\n"
" color: black; /* 文本颜色 */\n"
" font: bold 10pt \"微软雅黑\";/*字体*/\n"
" padding: 5px; /* 内边距 */\n"
" spacing: 10px; /* 文本与复选框之间的间距 */\n"
"}\n"
"\n"
"QCheckBox::indicator {\n"
" width: 15px; /* 正方形复选框宽度 */\n"
" height: 15px; /* 正方形复选框高度 */\n"
"}\n"
"\n"
"\n"
"QCheckBox::indicator:unchecked {\n"
" border: 2px solid rgb(0, 170, 255); /* 未选中状态下的边框颜色 */\n"
" border-radius: 5px; /* 边框圆角 */\n"
" background: white; /* 背景颜色 */\n"
"}\n"
"\n"
"QCheckBox::indicator:checked {\n"
" border: 2px solid rgb(0, 170, 255); /* 选中状态下的边框颜色 */\n"
" border-radius: 5px; /* 边框圆角 */\n"
" background: rgb(0, 170, 255); /* 背景颜色 */\n"
" image: url(:/pics/icons/right.png);/*打勾icon*/\n"
"}\n"
"\n"
"QCheckBox::indicator:unchecked:hover {\n"
" border: 2px solid rgb(135,206,250) ; /* 鼠标悬停时的边框颜色 */\n"
"}\n"
"\n"
"QCheckBox::indicator:checked:hover {\n"
" border: 2px solid rgb(135,206,250) ; /* 鼠标悬停时的边框颜色 */\n"
"}")self.checkBox.setTristate(False)self.checkBox.setObjectName("checkBox")self.radioButton = QtWidgets.QRadioButton(Form)self.radioButton.setGeometry(QtCore.QRect(880, 280, 151, 41))self.radioButton.setStyleSheet("QRadioButton \n"
"{\n"
" color: black; /* 文本颜色 */\n"
" font-size: 16px; /* 字体大小 */\n"
" padding: 5px; /* 内边距 */\n"
" spacing: 8px; /* 文本与单选框之间的间距 */\n"
" font: bold 10pt \"微软雅黑\";/*字体*/\n"
"}\n"
"\n"
"QRadioButton::indicator {\n"
" width: 15px; /* 单选框宽度 */\n"
" height: 15px; /* 单选框高度 */\n"
"}\n"
"\n"
"QRadioButton::indicator:unchecked {\n"
" border: 2px solid rgb(0, 170, 255);/* 未选中状态下的边框颜色 */\n"
" border-radius: 9px; /* 边框圆角 */\n"
" background: white; /* 背景颜色 */\n"
"}\n"
"\n"
"QRadioButton::indicator:checked {\n"
" border: 2px solid rgb(0, 170, 255);/* 选中状态下的边框颜色 */\n"
" border-radius: 9px; /* 边框圆角 */\n"
" background: rgb(0, 170, 255); /* 背景颜色 */\n"
" image: url(:/checked_icon.png); /* 选中时的图标,可以替换成自己的图标 */\n"
"}\n"
"\n"
"QRadioButton::indicator:unchecked:hover {\n"
" border: 2px solid rgb(135,206,250) ; /* 鼠标悬停时的边框颜色 */\n"
"}\n"
"\n"
"QRadioButton::indicator:checked:hover {\n"
" border: 2px solid rgb(135,206,250) ; /* 鼠标悬停时的边框颜色 */\n"
"}\n"
"\n"
"")self.radioButton.setChecked(False)self.radioButton.setAutoRepeat(False)self.radioButton.setObjectName("radioButton")self.progressBar = QtWidgets.QProgressBar(Form)self.progressBar.setGeometry(QtCore.QRect(850, 340, 221, 31))self.progressBar.setStyleSheet("\n"
"QProgressBar {\n"
" border: 2px solid rgb(0, 170, 255); /* 边框颜色 */\n"
" border-radius: 10px; /* 圆角 */\n"
" background: #f3f3f3;; /* 背景颜色 */\n"
" text-align: center; /* 进度文本对齐 */\n"
" height: 25px; /* 高度 */\n"
"}\n"
"QProgressBar::chunk {\n"
" background: rgb(0, 170, 255);\n"
"}\n"
"")self.progressBar.setProperty("value", 24)self.progressBar.setTextVisible(True)self.progressBar.setOrientation(QtCore.Qt.Horizontal)self.progressBar.setInvertedAppearance(False)self.progressBar.setTextDirection(QtWidgets.QProgressBar.TopToBottom)self.progressBar.setObjectName("progressBar")self.listWidget = QtWidgets.QListWidget(Form)self.listWidget.setGeometry(QtCore.QRect(710, 40, 131, 231))self.listWidget.setStyleSheet("QListWidget \n"
"{\n"
" border: 1px solid black; /* 边框颜色和粗细 */\n"
" border-radius: 15px; /* 圆角 */\n"
" background-color: rgb(0, 170, 255); /* 背景颜色 */\n"
" color: black; /* 文本颜色 */\n"
"}\n"
"\n"
"QListWidget::item {\n"
" padding: 5px; /* 项目内边距 */\n"
"}\n"
"\n"
"QListWidget::item:selected {\n"
" background-color: rgb(135, 206, 250); /* 鼠标悬浮颜色 */\n"
" border-radius: 15px; /* 圆角 */\n"
" color: black; /* 选中项文本颜色 */\n"
"}\n"
"\n"
"QListWidget::item:hover {\n"
" background-color: rgb(135, 206, 250); /* 鼠标悬浮颜色 */\n"
" border-radius: 15px; /* 圆角 */\n"
" color: black; /* 鼠标悬浮时文本颜色 */\n"
"}\n"
"/* 隐藏滚动条 */\n"
"QListWidget::scrollbar:vertical {\n"
" border: 1px solid black;\n"
" background: #f3f3f3;\n"
" width: 0px;\n"
" height: 0px;\n"
"}\n"
"\n"
"QListWidget::scrollbar:horizontal {\n"
" border: 1px solid black;\n"
" background: #f3f3f3;\n"
" height: 0px;\n"
" width: 0px;\n"
"}")self.listWidget.setObjectName("listWidget")item = QtWidgets.QListWidgetItem()item.setTextAlignment(QtCore.Qt.AlignCenter)icon = QtGui.QIcon()icon.addPixmap(QtGui.QPixmap(":/pics/icons/like.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)item.setIcon(icon)self.listWidget.addItem(item)item = QtWidgets.QListWidgetItem()self.listWidget.addItem(item)item = QtWidgets.QListWidgetItem()self.listWidget.addItem(item)item = QtWidgets.QListWidgetItem()self.listWidget.addItem(item)item = QtWidgets.QListWidgetItem()self.listWidget.addItem(item)item = QtWidgets.QListWidgetItem()self.listWidget.addItem(item)self.tableWidget = QtWidgets.QTableWidget(Form)self.tableWidget.setGeometry(QtCore.QRect(600, 400, 471, 221))self.tableWidget.setStyleSheet("QHeaderView::section {\n"
" background-color: rgb(135, 206, 250); /* 设置表头背景色为淡蓝色 */\n"
" font: bold 10pt \"微软雅黑\"; /* 设置字体为微软雅黑,大小为10pt,粗体 */\n"
" border: 1px solid black; /* 设置表头的边框为1px黑色实线 */\n"
"}\n"
"\n"
"QTableWidget::item {\n"
" border-right: 0.5px solid black; /* 单元格右边框 */\n"
"}\n"
"\n"
"QTableWidget::item:selected {\n"
" background-color: rgb(135, 206, 250); /* 选中的单元格背景色为淡蓝色 */\n"
"}\n"
"\n"
"QTableWidget::item:hover {\n"
" background-color: rgb(135, 206, 250); /* 鼠标悬浮的单元格背景色为淡蓝色 */\n"
"}\n"
"\n"
"QScrollBar:vertical {\n"
" border: 0px solid black; /* 滚动条无边框 */\n"
" background: rgb(240, 240, 240); /* 滚动条背景色为浅灰色 */\n"
" width: 10px; /* 设置滚动条宽度为10px */\n"
" border-radius: 5px; /* 设置滚动条圆角为5px */\n"
"}\n"
"\n"
"QScrollBar::handle:vertical {\n"
" background: rgb(135, 206, 250); /* 滚动条滑块背景色为淡蓝色 */\n"
" min-height: 20px; /* 滑块的最小高度为20px */\n"
" border-radius: 5px; /* 滑块圆角为5px */\n"
"}\n"
"\n"
"QScrollBar::add-line:vertical {\n"
" background: rgb(240, 240, 240); /* 向下按钮背景色为浅灰色 */\n"
" border: 0px solid black; /* 向下按钮无边框 */\n"
" height: 10px; /* 向下按钮高度为10px */\n"
" subcontrol-position: bottom; /* 向下按钮位置在滚动条底部 */\n"
" subcontrol-origin: margin; /* 向下按钮位置原点在边距 */\n"
"}\n"
"\n"
"QScrollBar::sub-line:vertical {\n"
" background: rgb(240, 240, 240); /* 向上按钮背景色为浅灰色 */\n"
" border: 0px solid black; /* 向上按钮无边框 */\n"
" height: 10px; /* 向上按钮高度为10px */\n"
" subcontrol-position: top; /* 向上按钮位置在滚动条顶部 */\n"
" subcontrol-origin: margin; /* 向上按钮位置原点在边距 */\n"
"}\n"
"\n"
"QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {\n"
" background: none; /* 向上和向下箭头背景色为无 */\n"
"}\n"
"\n"
"QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {\n"
" background: none; /* 滚动条添加和子页面背景色为无 */\n"
"}\n"
"\n"
"QScrollBar:horizontal {\n"
" border: 0px solid black; /* 滚动条无边框 */\n"
" background: rgb(240, 240, 240); /* 滚动条背景色为浅灰色 */\n"
" height: 10px; /* 设置滚动条高度为10px */\n"
" border-radius: 5px; /* 设置滚动条圆角为5px */\n"
"}\n"
"\n"
"QScrollBar::handle:horizontal {\n"
" background: rgb(135, 206, 250); /* 滚动条滑块背景色为淡蓝色 */\n"
" min-width: 20px; /* 滑块的最小宽度为20px */\n"
" border-radius: 5px; /* 滑块圆角为5px */\n"
"}\n"
"\n"
"QScrollBar::add-line:horizontal {\n"
" background: rgb(240, 240, 240); /* 向右按钮背景色为浅灰色 */\n"
" border: 0px solid black; /* 向右按钮无边框 */\n"
" width: 10px; /* 向右按钮宽度为10px */\n"
" subcontrol-position: right; /* 向右按钮位置在滚动条右侧 */\n"
" subcontrol-origin: margin; /* 向右按钮位置原点在边距 */\n"
"}\n"
"\n"
"QScrollBar::sub-line:horizontal {\n"
" background: rgb(240, 240, 240); /* 向左按钮背景色为浅灰色 */\n"
" border: 0px solid black; /* 向左按钮无边框 */\n"
" width: 10px; /* 向左按钮宽度为10px */\n"
" subcontrol-position: left; /* 向左按钮位置在滚动条左侧 */\n"
" subcontrol-origin: margin; /* 向左按钮位置原点在边距 */\n"
"}\n"
"\n"
"QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {\n"
" background: none; /* 向左和向右箭头背景色为无 */\n"
"}\n"
"\n"
"QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {\n"
" background: none; /* 滚动条添加和子页面背景色为无 */\n"
"}\n"
"")self.tableWidget.setShowGrid(True)self.tableWidget.setGridStyle(QtCore.Qt.SolidLine)self.tableWidget.setObjectName("tableWidget")self.tableWidget.setColumnCount(4)self.tableWidget.setRowCount(5)item = QtWidgets.QTableWidgetItem()self.tableWidget.setVerticalHeaderItem(0, item)item = QtWidgets.QTableWidgetItem()self.tableWidget.setVerticalHeaderItem(1, item)item = QtWidgets.QTableWidgetItem()self.tableWidget.setVerticalHeaderItem(2, item)item = QtWidgets.QTableWidgetItem()self.tableWidget.setVerticalHeaderItem(3, item)item = QtWidgets.QTableWidgetItem()self.tableWidget.setVerticalHeaderItem(4, item)item = QtWidgets.QTableWidgetItem()self.tableWidget.setHorizontalHeaderItem(0, item)item = QtWidgets.QTableWidgetItem()self.tableWidget.setHorizontalHeaderItem(1, item)item = QtWidgets.QTableWidgetItem()self.tableWidget.setHorizontalHeaderItem(2, item)item = QtWidgets.QTableWidgetItem()self.tableWidget.setHorizontalHeaderItem(3, item)self.treeWidget = QtWidgets.QTreeWidget(Form)self.treeWidget.setGeometry(QtCore.QRect(550, 40, 131, 231))self.treeWidget.setStyleSheet("QTreeWidget {\n"
" border: 1px solid black; /* 边框颜色和粗细 */\n"
" border-radius: 10px; /* 圆角 */\n"
" background-color: rgb(0, 170, 255); /* 背景颜色 */\n"
" color: black; /* 文本颜色 */\n"
"}\n"
"\n"
"QTreeWidget::item {\n"
" padding: 5px; /* 项目内边距 */\n"
"}\n"
"\n"
"QTreeWidget::item:selected {\n"
" background-color: rgb(135, 206, 250); /* 选中项的背景颜色 */\n"
" border-radius: 10px; /* 圆角 */\n"
" color: black; /* 选中项文本颜色 */\n"
"}\n"
"\n"
"QTreeWidget::item:hover {\n"
" background-color: rgb(135, 206, 250); /* 鼠标悬浮时的背景颜色 */\n"
" border-radius: 10px; /* 圆角 */\n"
" color: black; /* 鼠标悬浮时文本颜色 */\n"
"}\n"
"\n"
"QTreeWidget::branch:has-children {\n"
" image: none; /* 隐藏箭头图标 */\n"
"}")self.treeWidget.setIndentation(25)self.treeWidget.setRootIsDecorated(False)self.treeWidget.setUniformRowHeights(False)self.treeWidget.setItemsExpandable(True)self.treeWidget.setAnimated(True)self.treeWidget.setAllColumnsShowFocus(False)self.treeWidget.setWordWrap(False)self.treeWidget.setHeaderHidden(True)self.treeWidget.setObjectName("treeWidget")item_0 = QtWidgets.QTreeWidgetItem(self.treeWidget)item_0 = QtWidgets.QTreeWidgetItem(self.treeWidget)item_1 = QtWidgets.QTreeWidgetItem(item_0)icon1 = QtGui.QIcon()icon1.addPixmap(QtGui.QPixmap(":/pics/icons/file.png"), QtGui.QIcon.Normal, QtGui.QIcon.Off)item_1.setIcon(0, icon1)item_1 = QtWidgets.QTreeWidgetItem(item_0)self.groupBox = QtWidgets.QGroupBox(Form)self.groupBox.setGeometry(QtCore.QRect(610, 300, 141, 81))self.groupBox.setStyleSheet("QGroupBox {\n"
" border: 2px solid black; /* 黑色边框 */\n"
" border-radius: 18px; /* 边框圆角 */\n"
" background-color: transparent;\n"
"}\n"
"\n"
"QGroupBox::title {\n"
" color: transparent; /* 隐藏标题 */\n"
" background-color: transparent;\n"
"}\n"
"")self.groupBox.setObjectName("groupBox")self.lineEdit = QtWidgets.QLineEdit(Form)self.lineEdit.setGeometry(QtCore.QRect(320, 400, 211, 41))self.lineEdit.setStyleSheet("QLineEdit{\n"
" border: 2px solid rgb(0, 0, 0);\n"
" border-radius: 20px;\n"
" padding:10px;/*下拉框内容和下拉框的间距*/\n"
"}\n"
"\n"
"QLineEdit:focus {\n"
" outline: none;\n"
" border-color: rgb(0, 170, 255);\n"
"}\n"
"\n"
"")self.lineEdit.setEchoMode(QtWidgets.QLineEdit.Normal)self.lineEdit.setDragEnabled(False)self.lineEdit.setClearButtonEnabled(True)self.lineEdit.setObjectName("lineEdit")self.widget_2 = QtWidgets.QWidget(Form)self.widget_2.setGeometry(QtCore.QRect(320, 0, 221, 61))self.widget_2.setStyleSheet("background-color: rgb(179, 255, 151);")self.widget_2.setObjectName("widget_2")self.tabWidget = QtWidgets.QTabWidget(Form)self.tabWidget.setGeometry(QtCore.QRect(20, 80, 511, 101))self.tabWidget.setStyleSheet("QTabWidget::pane {\n"
" border: 2px solid black; /* 黑色边框 */\n"
"}\n"
"\n"
"QTabBar::tab {\n"
" background: rgb(0, 170, 255); /* 主配色 */\n"
" color: white;\n"
" border-top: 2px solid black; /* 黑色边框 */\n"
" border-left: 2px solid black; /* 黑色边框 */\n"
" border-right: 2px solid black; /* 黑色边框 */\n"
" border-top-right-radius: 10px; \n"
" border-top-left-radius: 10px; \n"
" padding: 10px;\n"
" min-width: 100px;\n"
"}\n"
"\n"
"QTabBar::tab:selected {\n"
" background:rgb(170, 170, 255) ; /* 鼠标悬浮配色 */\n"
" color: black;\n"
"}\n"
"\n"
"QTabBar::tab:hover {\n"
" background: rgb(135, 206, 250); /* 鼠标悬浮配色 */\n"
" color: black;\n"
"}\n"
"\n"
"QTabBar::tab:first:selected {\n"
" margin-left: 0; /* No margin for the first tab */\n"
"}\n"
"\n"
"QTabBar::tab:last:selected {\n"
" margin-right: 0; /* No margin for the last tab */\n"
"}\n"
"")self.tabWidget.setTabShape(QtWidgets.QTabWidget.Rounded)self.tabWidget.setElideMode(QtCore.Qt.ElideNone)self.tabWidget.setUsesScrollButtons(True)self.tabWidget.setDocumentMode(False)self.tabWidget.setTabsClosable(False)self.tabWidget.setMovable(True)self.tabWidget.setTabBarAutoHide(False)self.tabWidget.setObjectName("tabWidget")self.tab = QtWidgets.QWidget()self.tab.setObjectName("tab")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, "")self.tabWidget_2 = QtWidgets.QTabWidget(Form)self.tabWidget_2.setGeometry(QtCore.QRect(20, 200, 511, 91))self.tabWidget_2.setStyleSheet("QTabWidget::pane {\n"
" border: 2px solid black; /* 黑色边框 */\n"
" color: black;\n"
"}\n"
"\n"
"QTabBar::tab {\n"
" padding: 10px;\n"
" min-width: 100px;\n"
" color: black;\n"
"}\n"
"\n"
"QTabBar::tab:selected {\n"
" background:rgb(170, 170, 255) ; /* 鼠标悬浮配色 */\n"
" color: black;\n"
"}\n"
"\n"
"QTabBar::tab:hover {\n"
" background: rgb(135, 206, 250); /* 鼠标悬浮配色 */\n"
" color: black;\n"
"}\n"
"\n"
"\n"
"")self.tabWidget_2.setTabShape(QtWidgets.QTabWidget.Triangular)self.tabWidget_2.setElideMode(QtCore.Qt.ElideNone)self.tabWidget_2.setUsesScrollButtons(True)self.tabWidget_2.setDocumentMode(False)self.tabWidget_2.setTabsClosable(False)self.tabWidget_2.setMovable(True)self.tabWidget_2.setTabBarAutoHide(False)self.tabWidget_2.setObjectName("tabWidget_2")self.tab_4 = QtWidgets.QWidget()self.tab_4.setObjectName("tab_4")self.tabWidget_2.addTab(self.tab_4, "")self.tab_5 = QtWidgets.QWidget()self.tab_5.setObjectName("tab_5")self.tabWidget_2.addTab(self.tab_5, "")self.tab_6 = QtWidgets.QWidget()self.tab_6.setObjectName("tab_6")self.tabWidget_2.addTab(self.tab_6, "")self.tabWidget_3 = QtWidgets.QTabWidget(Form)self.tabWidget_3.setGeometry(QtCore.QRect(10, 310, 261, 221))self.tabWidget_3.setStyleSheet("QTabWidget::pane {\n"
" border: 2px solid black;\n"
"}\n"
"\n"
"QTabBar::tab {\n"
" background: rgb(0, 170, 255);\n"
" color: white;\n"
" border-bottom-left-radius: 10px;\n"
" border-top-left-radius: 10px;\n"
" border-top: 2px solid black; /* 黑色边框 */\n"
" border-left: 2px solid black; /* 黑色边框 */\n"
" border-bottom: 2px solid black; /* 黑色边框 */\n"
" min-width: 80px;\n"
" min-height: 30px;\n"
" padding: 10px;\n"
"}\n"
"\n"
"QTabBar::tab:selected {\n"
" background: rgb(170, 170, 255);\n"
"}\n"
"\n"
"QTabBar::tab:hover {\n"
" background: rgb(135, 206, 250);\n"
"}\n"
"\n"
"\n"
"\n"
"\n"
"\n"
"\n"
"")self.tabWidget_3.setTabPosition(QtWidgets.QTabWidget.West)self.tabWidget_3.setTabShape(QtWidgets.QTabWidget.Rounded)self.tabWidget_3.setElideMode(QtCore.Qt.ElideRight)self.tabWidget_3.setUsesScrollButtons(True)self.tabWidget_3.setDocumentMode(False)self.tabWidget_3.setTabsClosable(False)self.tabWidget_3.setMovable(True)self.tabWidget_3.setTabBarAutoHide(False)self.tabWidget_3.setObjectName("tabWidget_3")self.tab_7 = QtWidgets.QWidget()self.tab_7.setObjectName("tab_7")self.tabWidget_3.addTab(self.tab_7, "")self.tab_8 = QtWidgets.QWidget()self.tab_8.setObjectName("tab_8")self.tabWidget_3.addTab(self.tab_8, "")self.label = QtWidgets.QLabel(Form)self.label.setGeometry(QtCore.QRect(30, 330, 72, 15))self.label.setObjectName("label")self.plainTextEdit = QtWidgets.QPlainTextEdit(Form)self.plainTextEdit.setGeometry(QtCore.QRect(320, 320, 211, 61))self.plainTextEdit.setStyleSheet("QPlainTextEdit {\n"
" border: 2px solid rgb(0, 0, 0);\n"
" border-radius: 20px;\n"
" background: white; /* 背景色为白色 */\n"
" padding: 10px; /* 适当的内边距,以避免内容接触到边框 */\n"
"}\n"
"\n"
"QPlainTextEdit:focus {\n"
" outline: none;\n"
" border-color: rgb(0, 170, 255);\n"
"}\n"
"\n"
"\n"
"")self.plainTextEdit.setTabChangesFocus(False)self.plainTextEdit.setBackgroundVisible(False)self.plainTextEdit.setObjectName("plainTextEdit")self.stackedWidget = QtWidgets.QStackedWidget(Form)self.stackedWidget.setGeometry(QtCore.QRect(20, 560, 181, 111))self.stackedWidget.setStyleSheet("background-color: rgb(255, 255, 127);")self.stackedWidget.setObjectName("stackedWidget")self.page = QtWidgets.QWidget()self.page.setObjectName("page")self.stackedWidget.addWidget(self.page)self.page_2 = QtWidgets.QWidget()self.page_2.setObjectName("page_2")self.stackedWidget.addWidget(self.page_2)self.calendarWidget = QtWidgets.QCalendarWidget(Form)self.calendarWidget.setGeometry(QtCore.QRect(240, 560, 311, 261))self.calendarWidget.setGridVisible(True)self.calendarWidget.setSelectionMode(QtWidgets.QCalendarWidget.SingleSelection)self.calendarWidget.setHorizontalHeaderFormat(QtWidgets.QCalendarWidget.ShortDayNames)self.calendarWidget.setVerticalHeaderFormat(QtWidgets.QCalendarWidget.NoVerticalHeader)self.calendarWidget.setNavigationBarVisible(True)self.calendarWidget.setObjectName("calendarWidget")self.timeEdit = QtWidgets.QTimeEdit(Form)self.timeEdit.setGeometry(QtCore.QRect(110, 740, 101, 31))self.timeEdit.setStyleSheet("QTimeEdit \n"
"{\n"
" border: 2px solid black;\n"
" padding: 5px;\n"
" background-color: rgb(0, 170, 255);\n"
" color: black;\n"
" font: 75 12pt \"微软雅黑\";\n"
"border-radius:10px;\n"
"}\n"
"\n"
"\n"
"QTimeEdit:hover \n"
"{\n"
" background-color: rgb(135, 206, 250);\n"
"}\n"
"/*隐藏箭头*/\n"
"QTimeEdit::up-button, QTimeEdit::down-button \n"
"{\n"
" subcontrol-origin: padding;\n"
" subcontrol-position: top right;\n"
" width: 0px;\n"
" height: 0px;\n"
" border: none;\n"
"}")self.timeEdit.setCurrentSection(QtWidgets.QDateTimeEdit.HourSection)self.timeEdit.setCalendarPopup(False)self.timeEdit.setObjectName("timeEdit")self.spinBox = QtWidgets.QSpinBox(Form)self.spinBox.setGeometry(QtCore.QRect(30, 740, 61, 31))self.spinBox.setStyleSheet("QSpinBox, QTimeEdit {\n"
" border: 2px solid black;\n"
" padding: 5px;\n"
" background-color: rgb(0, 170, 255);\n"
" color: black;\n"
" font: 50 12pt \"微软雅黑\";\n"
" border-radius: 10px; /* 设置圆角 */\n"
"}\n"
"\n"
"QSpinBox::up-button, QSpinBox::down-button,\n"
"QTimeEdit::up-button, QTimeEdit::down-button {\n"
" subcontrol-origin: padding;\n"
" width: 20px; /* 箭头宽度 */\n"
" height: 10px; /* 箭头高度 */\n"
" padding-right: 3px;\n"
" /* border-radius: 10px; /*设置圆角隐藏按钮 */\n"
"}\n"
"\n"
"QSpinBox::up-button:hover, QSpinBox::down-button:hover,\n"
"QTimeEdit::up-button:hover, QTimeEdit::down-button:hover {\n"
" background-color: rgb(135, 206, 250); /* 悬停时背景色 */\n"
"}\n"
"\n"
"QSpinBox:hover, QTimeEdit:hover {\n"
" background-color: rgb(135, 206, 250);\n"
"}")self.spinBox.setObjectName("spinBox")self.label_3 = QtWidgets.QLabel(Form)self.label_3.setGeometry(QtCore.QRect(300, 500, 111, 31))self.label_3.setStyleSheet("QLabel {\n"
" font: bold 15px;\n"
" color: black;\n"
" background: transparent;\n"
"}\n"
"\n"
"QLabel:hover {\n"
" font: bold 15px;\n"
" color: white;\n"
" background: #333;\n"
" padding: 10px;\n"
" border-radius: 5px;\n"
" text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* 文本阴影 */\n"
" box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); /* 边框阴影 */\n"
"}\n"
"")self.label_3.setAlignment(QtCore.Qt.AlignCenter)self.label_3.setObjectName("label_3")self.label_4 = QtWidgets.QLabel(Form)self.label_4.setGeometry(QtCore.QRect(420, 460, 111, 41))self.label_4.setStyleSheet("QLabel {\n"
" font: bold 15px;\n"
" color: black;\n"
" background: #f0f0f0;\n"
" padding: 10px;\n"
" border: 2px solid transparent; /* 初始透明边框 */\n"
" border-radius: 5px;\n"
" transition: border-color 0.3s ease;\n"
"}\n"
"\n"
"QLabel:hover {\n"
" border-color: #ff6b6b; /* 鼠标悬停时边框颜色 */\n"
"}\n"
"")self.label_4.setObjectName("label_4")self.label_2 = QtWidgets.QLabel(Form)self.label_2.setGeometry(QtCore.QRect(310, 460, 141, 31))self.label_2.setStyleSheet("QLabel {\n"
" font: bold 15px;\n"
" color: black;\n"
" background: transparent;\n"
"}\n"
"QLabel:hover {\n"
" color: red;\n"
"}\n"
"")self.label_2.setObjectName("label_2")self.retranslateUi(Form)self.tabWidget.setCurrentIndex(2)self.tabWidget_2.setCurrentIndex(0)self.tabWidget_3.setCurrentIndex(1)self.stackedWidget.setCurrentIndex(1)QtCore.QMetaObject.connectSlotsByName(Form)def retranslateUi(self, Form):_translate = QtCore.QCoreApplication.translateForm.setWindowTitle(_translate("Form", "Form"))self.pushButton.setText(_translate("Form", "PushButton"))self.pushButton_2.setText(_translate("Form", "PushButton"))self.comboBox.setItemText(0, _translate("Form", "1"))self.comboBox.setItemText(1, _translate("Form", "2"))self.comboBox.setItemText(2, _translate("Form", "3"))self.checkBox.setText(_translate("Form", "CheckBox"))self.radioButton.setText(_translate("Form", "RadioButton"))__sortingEnabled = self.listWidget.isSortingEnabled()self.listWidget.setSortingEnabled(False)item = self.listWidget.item(0)item.setText(_translate("Form", "新建项目"))item = self.listWidget.item(1)item.setText(_translate("Form", "新建项目"))item = self.listWidget.item(2)item.setText(_translate("Form", "新建项目"))item = self.listWidget.item(3)item.setText(_translate("Form", "新建项目"))item = self.listWidget.item(4)item.setText(_translate("Form", "新建项目"))item = self.listWidget.item(5)item.setText(_translate("Form", "新建项目"))self.listWidget.setSortingEnabled(__sortingEnabled)self.tableWidget.setSortingEnabled(False)item = self.tableWidget.verticalHeaderItem(0)item.setText(_translate("Form", "1"))item = self.tableWidget.verticalHeaderItem(1)item.setText(_translate("Form", "2"))item = self.tableWidget.verticalHeaderItem(2)item.setText(_translate("Form", "3"))item = self.tableWidget.verticalHeaderItem(3)item.setText(_translate("Form", "4"))item = self.tableWidget.verticalHeaderItem(4)item.setText(_translate("Form", "5"))item = self.tableWidget.horizontalHeaderItem(0)item.setText(_translate("Form", "新建列"))item = self.tableWidget.horizontalHeaderItem(1)item.setText(_translate("Form", "新建列"))item = self.tableWidget.horizontalHeaderItem(2)item.setText(_translate("Form", "新建列"))item = self.tableWidget.horizontalHeaderItem(3)item.setText(_translate("Form", "新建列"))self.treeWidget.setSortingEnabled(False)self.treeWidget.headerItem().setText(0, _translate("Form", "1"))__sortingEnabled = self.treeWidget.isSortingEnabled()self.treeWidget.setSortingEnabled(False)self.treeWidget.topLevelItem(0).setText(0, _translate("Form", "1-1"))self.treeWidget.topLevelItem(1).setText(0, _translate("Form", "1-2"))self.treeWidget.topLevelItem(1).child(0).setText(0, _translate("Form", "1-2-1"))self.treeWidget.topLevelItem(1).child(1).setText(0, _translate("Form", "1-2-2"))self.treeWidget.setSortingEnabled(__sortingEnabled)self.groupBox.setTitle(_translate("Form", "GroupBox"))self.lineEdit.setPlaceholderText(_translate("Form", "请输入密码"))self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), _translate("Form", "Tab 1"))self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), _translate("Form", "Tab 2"))self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_3), _translate("Form", "Tab 3"))self.tabWidget_2.setTabText(self.tabWidget_2.indexOf(self.tab_4), _translate("Form", "Tab 1"))self.tabWidget_2.setTabText(self.tabWidget_2.indexOf(self.tab_5), _translate("Form", "Tab 2"))self.tabWidget_2.setTabText(self.tabWidget_2.indexOf(self.tab_6), _translate("Form", "Tab 3"))self.label.setText(_translate("Form", "TextLabel"))self.timeEdit.setDisplayFormat(_translate("Form", "HH:mm:ss"))self.label_3.setText(_translate("Form", "TextLabel"))self.label_4.setText(_translate("Form", "TextLabel"))self.label_2.setText(_translate("Form", "TextLabel"))
import icon_rc
【常见问题】
Q1:工具栏怎么加,资源图片怎么加
Q2:控件被背景染色怎么办?
继承css导致的
解决方案:
①选择Qwidget,设置背景色作为画布。
②画布先放到最小,文字等控件放完先,然后拖动图片放大(避免出现文字被图片同化染色)
Q3:QTdesigner有多少好用的快捷键
1.预览和查看生成的代码
CTRL+R 预览
2.选中控件一键布局和一键缩小窗体(开发重置窗体用,不会删掉里面的控件)
3.三个设计器
END
本文写了快五万字,越写越卡,后面继续出教程会写在新的文章里面了!~