网站扫二维码怎么做,青海建设厅通报网站,设计上海地址,手机电视直播网站大全文章目录 系列文章索引六、样式表qss1、概述2、通用组件常用样式3、QLineEdit组件常用样式4、QpushButton常用样式5、QSlider常用样式6、QComboBox常用样式7、QProgressBar常用样式8、QMenu菜单样式9、qss选择器10、使用qss文件动态加载qss11、QDarkStyle夜间模式12、禁止子窗口… 文章目录 系列文章索引六、样式表qss1、概述2、通用组件常用样式3、QLineEdit组件常用样式4、QpushButton常用样式5、QSlider常用样式6、QComboBox常用样式7、QProgressBar常用样式8、QMenu菜单样式9、qss选择器10、使用qss文件动态加载qss11、QDarkStyle夜间模式12、禁止子窗口使用主窗口的样式 七、图表与曲线1、pyqtgraph 八、使用SQLite数据库1、简介及准备工作2、基本语法3、PySide6使用SQLite 九、项目打包1、常用打包技术2、PySide6项目打包1使用pyinstaller打包python2使用Inno Setup3图标注意事项 附 系列文章索引
PySide6开发桌面程序PySide6入门实战上 PySide6开发桌面程序PySide6入门实战下
六、样式表qss
1、概述
Qt style sheet简写就是qss也可以称为Qt样式表qss功能类似于css可以直接修改控件窗口样式。
注意如果使用资源的话需要先import Resources
# 示例
QLabel
{background-color: rgb(54,54,54); /*背景色*/color: rgb(230,230,230); /*字体颜色前景色*/font-family: Microsoft YaHei; /*字体类型*/font-size: 14px; /*字体大小*/
}样式的设置有两种一种是在ui设计器中直接写 还有一种是在代码中编写
qss06 QPushButton{background-image:url(:search32);background-position:center;background-repeat: no-repeat;border:none}QPushButton:hover{background-color:rgb(10,210,210);background-image:url(:search32)}QPushButton:pressed{background-color:rgb(10,210,210);background-image:url(:search32);padding-left:8px;padding-top:8px;}
self.btnSearch.setFixedSize(32, 32)
self.btnSearch.setText()
self.btnSearch.setStyleSheet(qss06)2、通用组件常用样式
/*
字体样式
font-family :为设置字体类型标准形式需要加双引号不加也可能会生效具体看系统是否支持中英文都支持但要保证字体编码支持一般程序编码为utf-8时没问题。font-size:为设置字体大小单位一般使用 px 像素
font-style:为设置字体斜体样式italic为斜体normal为不斜体
font-weight :为设置字体加粗样式bold 为加粗normal 为不加粗color:为设置字体颜色可以使用十六进制数表示颜色也可以使用某些特殊的字体颜色:red,green, blue 等或者使用rgb(r,g,b)和 rgba(r,g,b,a)来设置其中r、g、b、a值为0~255如果想不显示颜色可以设置值为透明 transparent;注意:字体颜色用的是 color 属性没有 font-color 这个属性*/
font-family:Microsoft YaHei;
font-size: 14px;
font-style: italic;
font-weight: bold;
color:#123456;/*
也可以一起设置
同时设置字体 style weight size family 的样式时style(是否斜体)和 weight(是否加粗)必须出现在开头size 和 family 在后面而且 size 必须在 family 之前否则样式将不生效*/
font: bold italic 18px Microsoft YaHei;/*
边框样式
solid 为实线 dashed 为虚线 dotted 为点线 none 为不显示(如果不设置 border-style 的话默认带边框)
*/
QLabel
{border-style: solid;/*单独设置某一边 border-right-style:dotted;*/border-width:2px;border-color: red;
}/*也可以一起设置*/
border: 2px solid red;/*也可以单独属性设置top、right、bottom、left*/
border-top-style: solid;
border-top-width:2px;
border-top-color: red;
border-top: 2px solid red;
border-right-style: solid;
border-right-width: 3px;
border-right-color: green;
border-right: 3px solid green;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: blue;
border-bottom: 2px solid blue;
border-left-style: solid;
border-left-width: 3px;
border-left-color: aqua;
border-left: 3px solid aqua;/*设置边框半径圆角这个半径需要合适否则没效果*/
border-top-left-radius:5px;
border-top-right-radius: 10px;
border-bottom-left-radius:15px;
border-bottom-right-radius:20px;
border-radius:20px;/*统一的半径*//*
文字位置
在 qss 中没有对齐方式只能通过设置 padding 来实现文字的显示位置;一般 padding-left 相当于x坐标padding-top 相当
于y坐标设置这两个就可以在任意位置显示了(默认情况下文字是上下左右都居中显示的)
*/
padding-left: 10px;
padding-top:8px;
padding-right: 7px;
padding-bottom: 9px;/*
背景样式
background-color 为设置背景颜色可以使用十六进制数表示颜色也可以使用某些特殊的字体颜色:red,green, blue等或者使用rgb(r,g,b)和 rgba(r,g,b,a)来设置其中r、g、b、a值为0~255如果想不显示颜色可以设置值为透明transparentbackground-image 为设置背景图片图片路径为 url(image-path)
background-repeat 为设置背景图是否重复填充背景如果背景图片尺寸小于背景实际大小的话默认会自动重复填充图片可以设置为 no-repeat不重复repeat-x在x轴重复repeat-y 在y轴重复background-position 为设置背景图片显示位置只支持 left right top bottom center;值 left right center 为设置水平位置值 top bottom center 为设置垂直位置
*/
background-color:rgb(54,54,54);
background-image:url(:/imgs/picture/0.png);/*显示背景图片也可以不用引号*/
background-repeat:no-repeat;/*不重复显示*/
background-position:left center;/*
可以统一设置
background 为设置背景的所有属性color image repeat position 这些属性值出现的顺序可以任意
*/
background: url(:/imgs/picture/0.png) no-repeat left center #363636;
/*动态悬浮样式鼠标移上去会产生的样式*/
QLabel:hover
{color: red;border-color: green;background-color:#363636;
}
/*禁止使用的样式*/
QLabel:disabled
{color: blue;border-color: brown;background-color:#363636;
}
3、QLineEdit组件常用样式
// 这不是csspython代码里写的
setReadonly(false);//只读
setFocusPolicy(Qt::NoFocus);//无法获得焦点
setMaxLength(10);//最多输入10个字符// 文本对其方式
1ineedit-setAlignment(Qt::AlignLeft)//左对齐
1ineedit-setAlignment(Qt::AlignRight)//右对齐
1ineedit-setAlignment(Qt::Aligncenter)//居中对齐// 正数控制
// 第一个数是1-9的第二个数和之后的是0-9的
QRegExp regx([1-9][0-9]$);
QValidator *validator new QRegExpValidator(regx, ui-lineEdit);
lineEdit-setValidator(validator);
/*样式*/
QLineEdit{border: 1px solid #ABCDA0; /* 边框宽度为1px颜色为#A0A0A0 */border-radius: 3px; /* 边框圆角 */padding-left: 5px; /* 文本距离左边界有5px */background-color: #F2F2F2; /* 背景颜色 */color: #A0A0A0; /* 文本颜色 */selection-background-color: #A0A0A0; /* 选中文本的背景颜色 */selection-color: #F2F2F2; /* 选中文本的颜色 */font-family: Microsoft YaHei; /* 文本字体族 */font-size: 10px; /* 文本字体大小 */
}QLineEdit:hover { /* 鼠标悬浮在QLineEdit时的状态 */border: 1px solid #298DFF;border-radius: 3px;background-color: #F2F2F2;color: #298DFF;selection-background-color: #298DFF;selection-color: #F2F2F2;
}QLineEdit[echoMode2] { /* QLineEdit有输入掩码时的状态 */lineedit-password-character: 9679;lineedit-password-mask-delay: 2000;
}QLineEdit:disabled { /* QLineEdit在禁用时的状态 */border: 1px solid #CDCDCD;background-color: #CDCDCD;color: #B4B4B4;
}QLineEdit:read-only { /* QLineEdit在只读时的状态 */background-color: #CDCDCD;color: #F2F2F2;
}4、QpushButton常用样式
QPushButton
{/*前景色文字的颜色 */color:green;/*背景色 */background-color:rgb(223,223,223);/*边框风格 */border-style:outset;/*边框宽度 */border-width:0.5px;/*边框颜色 */border-color:rgb(10,45,110);/*边框倒角 */border-radius:10px;/* 字体 */font:bold 22px;/*控件最小宽度*/min-width:100px;/*控件最小高度 */min-height:20px;/*内边距 */padding :4px;
}/*鼠标按下时的效果加上#可以指定哪个按钮的pressed事件*/
QPushButton#pushButton:pressed
{/*改变背景色 */background-color:rgb(40,85,20);/*改变边框风格 */border-style:inset;/*使文字有一点移动 */padding-left:6px;padding-top:6px;
}/*按钮样式 */
QPushButton:flat
{border:2px solid red;
}/*鼠标悬浮时的效果*/
QPushButton:hover
{color:#0000ff;background-color:rgb(210205205);/*改变背景色*/border-style:inset;/*改变边框风格*/padding-left:8px;padding-top:8px;
}/*鼠标悬浮时的效果指定某个按钮*/
QPushButton#btn2:hover
{color:#0000ff;background-color:rgb(10010020);/*改变背景色*/border-style:inset;/*改变边框风格*/padding-left:8px;padding-top:8px;
}/*状态相关*/
:checked button部件被选中
:unchecked button部件未被选中
:disabled 部件被禁用
:enabled 部件被启用
:focus 部件获得焦点
:hover 鼠标位于部件上
:pressed 部件被鼠标按下
:indeterminate checkbox或radiobutton被部分选中
:off 部件可以切换且处于off状态
:on 部件可以切换且处于on状态
/*可以设置背景图片*/
QPushButton
{background-image:url(:search32);background-position:center;background-repeat: no-repeat;border:none
}QPushButton:hover
{background-color:rgb(10,210,210);background-image:url(:search32)
}QPushButton:pressed
{background-color:rgb(10,210,210);background-image:url(:search32);padding-left:8px;padding-top:8px;
}5、QSlider常用样式
1水平滑动条
QSlider
{background-color: #363636; border-style: outset; border-radius: 10px;
}QSlider::groove:horizontal
{height: 12px;background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);margin: 2px 0
}QSlider::handle:horizontal
{background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green);width: 16px;height: 16px;margin: -5px 6px -5px 6px;border-radius:11px; border: 3px solid #ffffff;
}QProgressBar
{background:rgb(54,54,54);border:none; /*无边框*/border-radius:5px;text-align:center; /*文本的位置*/color: rgb(229, 229, 229); /*文本颜色*/
}QProgressBar::chunk
{background-color:rgb(58, 154, 255);border-radius:4px;
}2竖直滑动条
QSlider
{background-color: rgba(22, 22, 22, 0.7);padding-top: 15px; /*上面端点离顶部的距离*/padding-bottom: 15px;border-radius: 5px; /*外边框矩形倒角*/
}QSlider::add-page:vertical
{background-color: #FF7826;width:5px;border-radius: 2px;
}QSlider::sub-page:vertical
{background-color: #7A7B79;width:5px;border-radius: 2px;
}QSlider::groove:vertical
{background:transparent;width:6px;
}QSlider::handle:vertical
{height: 14px; width: 14px;margin: 0px -4px 0px -4px;border-radius: 7px;background: white;
}6、QComboBox常用样式 /* 未下拉时QComboBox的样式 */
QComboBox
{background:rgb(54,54,54);border: 1px solid gray; /* 边框 */border-radius: 5px; /* 圆角 */padding: 1px 18px 1px 3px; /* 字体填衬 */color: white;font: normal normal 24px Microsoft YaHei;
}/* 未下拉时QComboBox的样式 */
QComboBox
{border: 1px solid gray; /* 边框 */border-radius: 5px; /* 圆角 */padding: 1px 18px 1px 3px; /* 字体填衬 */color: white;font: normal normal 24px Microsoft YaHei;background:rgb(54,54,54);
}/* 下拉后整个下拉窗体样式 */
QComboBox QAbstractItemView
{outline: 0px solid gray; /* 选定项的虚框 */border: 1px solid yellow; /* 整个下拉窗体的边框 */color: rgb(250,251,252);background-color: rgb(70,80,90); /* 整个下拉窗体的背景色 */selection-background-color: lightgreen; /* 整个下拉窗体被选中项的背景色 */
}/* 下拉后整个下拉窗体每项的样式 */
/* 项的高度设置pComboBox-setView(new QListView(this));后该项才起作用 */
QComboBox QAbstractItemView::item
{height: 50px;
}/* 下拉后整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover
{color: rgb(90,100,105);background-color: lightgreen; /* 整个下拉窗体越过每项的背景色 */
}/* 下拉后整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected
{color: rgb(12, 23, 34);background-color: lightgreen;
}/* QComboBox中的垂直滚动条 */
QComboBox QAbstractScrollArea QScrollBar:vertical
{width: 13px;background-color: #d0d2d4; /* 空白区域的背景色*/
}QComboBox QAbstractScrollArea QScrollBar::handle:vertical
{border-radius: 5px; /* 圆角 */background: rgb(60,60,60); /* 小方块的背景色深灰lightblue */
}QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover
{background: rgb(90, 91, 93); /* 越过小方块的背景色yellow */
}/* 设置为可编辑setEditable(true)editable时编辑区域的样式 */
QComboBox:editable
{background: green;
}/* 设置为非编辑setEditable(false)!editable时整个QComboBox的样式 */
QComboBox:!editable
{background: rgb(54,54,54);
}/* 设置为可编辑editable时点击整个QComboBox的样式 */
QComboBox:editable:on
{background: rgb(54,54,54);
}/* 设置为非编辑!editable时点击整个QComboBox的样式 */
QComboBox:!editable:on
{background: rgb(54,54,54);
}/* 设置为可编辑editable时下拉框的样式 */
QComboBox::drop-down:editable
{background: rgb(54,54,54);
}/* 设置为可编辑editable时点击下拉框的样式 */
QComboBox::drop-down:editable:on
{background: rgb(54,54,54);
}/* 设置为非编辑!editable时下拉框的样式 */
QComboBox::drop-down:!editable
{background: rgb(54,54,54);
}/* 设置为非编辑!editable时点击下拉框的样式 */
QComboBox::drop-down:!editable:on
{background: rgb(54,54,54);image: url(:/resources/up.png); /* 显示上拉箭头 */
}/* 下拉框样式 */
QComboBox::drop-down
{subcontrol-origin: padding; /* 子控件在父元素中的原点矩形。如果未指定此属性则默认为padding。 */subcontrol-position: top right; /* 下拉框的位置右上 */width: 32px; /* 下拉框的宽度 */border-left-width: 1px; /* 下拉框的左边界线宽度 */border-left-color: darkgray; /* 下拉框的左边界线颜色 */border-left-style: solid; /* 下拉框的左边界线为实线 */border-top-right-radius: 3px; /* 下拉框的右上边界线的圆角半径应和整个QComboBox右上边界线的圆角半径一致 */border-bottom-right-radius: 3px; /* 同上 */image: url(:/resources/down.png);
}/* 越过下拉框样式 */
QComboBox::drop-down:hover
{background: rgb(80, 75, 90);
}/* 下拉箭头样式 */
QComboBox::down-arrow
{ width: 32px; /* 下拉箭头的宽度建议与下拉框drop-down的宽度一致 */ background: rgb(54,54,54); /* 下拉箭头的的背景色 */ padding: 0px 0px 0px 0px; /* 上内边距、右内边距、下内边距、左内边距 */ image: url(:/resources/down.png);
} /* 点击下拉箭头 */
QComboBox::down-arrow:on
{ image: url(:/resources/up.png); /* 显示上拉箭头 */
}7、QProgressBar常用样式
样式一
QProgressBar
{background:rgb(54,54,54);border:none; /*无边框*/border-radius:5px;text-align:center; /*文本的位置*/color: rgb(229, 229, 229); /*文本颜色*/
}QProgressBar::chunk
{background-color:rgb(58, 154, 255);border-radius:4px;
}样式二 QProgressBar
{border-radius:5px;background-color:darkgray;text-align:center
}
QProgressBar::chunk
{background-color:#1F0FEF;width:6px;margin:5px;
}竖直样式
QProgressBar:vertical
{border-radius:5px;background-color:darkgray;text-align:center;padding-left:5px;padding-right:4px;padding-bottom:2px;
}
QProgressBar::chunk:vertical
{background-color:#06B025;margin:1px;
}竖直样式
QProgressBar:vertical
{border-radius:5px;background-color:darkgray;text-align:center;padding-left:5px;padding-right:4px;padding-bottom:2px;
}
QProgressBar::chunk:vertical
{background-color:QLinearGradient( x1:0, y1:0, x2:0, y2: 1,stop: 0 #00ff58,stop: 1 #034f1f);margin:1px;
}8、QMenu菜单样式
QMenu::item
{font:16px;background-color:rgb(253,253,253);padding:8px 32px;margin:0px 8px;border-bottom:1px solid #DBDBDB;
}
/*选择项设置*/
QMenu::item:selected
{background-color:#FFF8DC;
}9、qss选择器
1通配符选择器
/*匹配所有的控件用星号表示*/
* {background-color:yellow;
}
/*指明子类所有QPushButton的样式都会改变*/
* QPushButton {background-color:yellow;
}2类型选择器
/*通过控件类型来匹配控件的包括子类*/
QWidget {background-color:yellow;
}
/*如果想防止子类例如窗口被修改可以设置属性*/
setAttribute(Qt::WA_StyleBackground);
/*类选择器也是通过控件类型来匹配控件但不同的是不包含子类语法是在类前面加了个.是个点*/
.QWidget {background-color:yellow;
}3ID选择器 ID选择器是结合控件的objectname来匹配控件的qss里objectname前加个井号来表示不同控件的objectname是可以相同的
#blue {background-color:blue
}4属性选择器比较复杂不推荐用 属性选择器是结合控件的属性值来匹配控件的首先要设定控件的属性qss里属性用[protertyattitude]来限制
# python代码
1abel1.setProperty(notice_level,error)
1abe12.setProperty(notice_level,warning)/*qss代码*/
.QLabel {background-color:pink;
}
QLabel[notice_levelwarning]{border:5px solid ye1low;
}
QLabel[notice_levelerror]{border:5px solid red;
}这里还有个用法就是qss内只定义属性值只要有这个属性的控件就可以被选中
QLabel [notice_leve1]{background-color:pink;
}10、使用qss文件动态加载qss
1准备style.qss
QWidget{background-color: rgb(255, 234, 12);
}QPushButton {color: white;background-color: blue;border-radius: 10px;
}2读取文件并统一加载
from PySide6.QtWidgets import QMessageBoximport MainWindowclass MainWindowImpl(MainWindow.Ui_MainWindow):def __init__(self, window):super().__init__()self.setupUi(window)self.window windowself.loadQss()def loadQss(self):# 读取qss文件并加载不能通过Resource资源文件加载只能读。# 如果打包的话需要将这个qss文件打包进去获取到本地路径然后加载try:qssFile style.qsswith open(qssFile, r) as f:qss f.read()# 加载所有qssself.window.setStyleSheet(qss)except FileNotFoundError:QMessageBox.information(None, 提示, qss file NotFoundError)11、QDarkStyle夜间模式
官网https://pypi.org/project/QDarkStyle/ 1安装
# 安装
pip install QDarkStyle2使用
import sysfrom PySide6.QtWidgets import QApplication, QWidgetfrom MainWidgetImpl import MainWidgetImplimport qdarkstyleif __name__ __main__:app QApplication(sys.argv)w QWidget()wImpl MainWidgetImpl(w)w.show()# PySide 6 给QWidget统一设置StyleSheet即可dark_stylesheet qdarkstyle.load_stylesheet_pyside6()w.setStyleSheet(dark_stylesheet)sys.exit(app.exec())12、禁止子窗口使用主窗口的样式
self.setAttribute(Qt.WA_StyledBackground) # 禁止父窗口样式影响子控件样式# 鼠标追踪如果某些样式没生效可以设置这个试试
self.setMouseTracking(True)七、图表与曲线
1、pyqtgraph
1安装
# 安装
pip install pyqtgraph2在qt designer中使用pyqtgraph
import MainWindowclass MainWindowImpl(MainWindow.Ui_MainWindow):def __init__(self, window):super().__init__()self.setupUi(window)self.window window# x轴hour [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]# y轴tempture [15, 31, 27, 34, 23, 90, 100, 234, 3, 12]self.plotView.plot(hour, tempture)八、使用SQLite数据库
1、简介及准备工作
sqlite是用C语言编写的一个嵌入型开源数据库可以直接集成到项目代码中SQLite 数据库不需要server它只是一个文件存储在磁盘中。像其他数据库一样SQLite 支持事务这意味着你可以组合多个操作作为一个单一的、原子的操作。
入门https://www.runoob.com/sqlite/sqlite-tutorial.html
默认python自带sqlite库直接用即可
2、基本语法
入门参考https://www.runoob.com/sqlite/sqlite-python.html
python操作sqlite3import sqlite3if __name__ __main__:conn sqlite3.connect(D:/example.db)c conn.cursor()sql1 CREATE TABLE IF NOT EXISTS tb01(date text, book_name, express text, price real)c.execute(sql1)sql2 INSERT INTO tb01 VALUES(2024-1-20, book01, beijing, 13.45);INSERT INTO tb01 VALUES(2024-1-3, book03, beijing, 13.45);INSERT INTO tb01 VALUES(2024-1-2, book02, beijing, 13.45);INSERT INTO tb01 VALUES(2024-1-4, book04, beijing, 13.45);datas [(2024-1-20, book01, beijing, 13.45),(2024-1-3, book03, beijing, 13.45),(2024-1-2, book02, beijing, 13.45),(2024-1-4, book04, beijing, 13.45)]# 插入多行数据c.executemany(INSERT INTO tb01 VALUES (?,?,?,?), datas)sql3 select * from tb01c.execute(sql3)sql4 select * from tb01 where book_namebook01# 更新数据sql5 update tb01 set book_namebook20 where date2024-1-20#c.execute(sql5)# 打印查询后的数据for row in c.fetchall():print(row)conn.commit()conn.close()3、PySide6使用SQLite from PySide6.QtSql import QSqlDatabase, QSqlTableModel
from PySide6.QtWidgets import QMessageBoximport MainWindowclass MainWindowImpl(MainWindow.Ui_MainWindow):def __init__(self, window):super().__init__()self.setupUi(window)self.window windowdb QSqlDatabase.addDatabase(QSQLITE)db.setDatabaseName(D:/example.db)if not db.open():QMessageBox.information(None, 提示, sqlite连接失败)returnmodel QSqlTableModel()model.setTable(tb01)# 设置策略当Qt数据视图修改时sqlite同步更新model.setEditStrategy(QSqlTableModel.OnFieldChange)model.select() # 必须调用不然不显示数据self.tableView.setModel(model)九、项目打包
1、常用打包技术
NSIS Inno Setup本次使用 Qt Installer Framework不常用 SetupFactory advanced installer收费
2、PySide6项目打包
1使用pyinstaller打包python
# 1安装pyinstaller
pip install pyinstaller# 2执行打包进入到main文件的目录
pyinstaller -w main.py# 参数说明
#-w --windowed --noconsole不显示命令行窗口仅对windows有效打包后的dist目录就是应用程序执行main.exe就可以执行程序了
2使用Inno Setup
1、下载百度搜一搜就行 https://inno-setup.updatestar.com/ https://www.downkuai.com/soft/113997.html 下载安装点下一步就行。
2、打开软件 然后自动开始打包打包完成后 双击mysetup.exe就可以安装安装的软件可以正常进行安装、卸载。 生成的脚本文件可以进行修改和继续使用。
3图标注意事项
除了在打包前定义的图标之前还需要修改脚本
然后点构建-编译重新打包。
附
图标在线转换https://www.hipdf.cn/jpg-to-ico
QMessageInfo还没学
