分享

实战PyQt5: 111

 大傻子的文渊阁 2023-02-06 发布于浙江

可以使用QSS样式表的部件

QSS样式表支持各种部件,属性,伪状态和子控件,从而可以实现定制部件的外观,下面我们将详细列出可以使用QSS样式表的部件:

  • QAbstractScrollArea:所有派生自QAbstractScrollArea类的子类,包括QTextEdit, QAbstractItemView(所有项目视图类),都可以通过设置background-attachment属性来实现可滚动背景。通过给background-attachment设置fixed和scroll,背景会固定不动或者跟随滚动。
  • QChecBox: QCheckBox的勾选符号可以使用::indicator子控件来定制。默认情况下,勾选标记位于部件矩形的左上角。QCheckBox的spacing属性可以用于指定勾选标记和文本内容之间的间距。
  • QColumnView:可以使用image属性来设置握柄(grip)的样式,可以使用::left-arrow子控件和::right-arrow子控件来设置箭头的样式
  • QComboBox:组合下拉框的框架可以使用盒模型(Box Model)设置样式。可以使用:: drop-down子控件设置下拉按钮的样式。默认情况下,下拉按钮位于部件的填充矩形的右上角。可以使用:: down-arrow子控件设置下拉按钮内的箭头标记的样式。默认情况下,箭头位于下拉子控件的内容矩形的中心。
  • QSpinBox(QDoubleSpinBox, QDateEdit,QTimeEdit,QDateTimeEdit):旋转框的框架可以使用盒模型(Box Model)设置样式。

可以使用:: up-button和:: up-arrow子控件设置向上按钮和箭头的样式。默认情况下,向上按钮位于小部件的“填充”矩形的右上角。如果没有明确的尺寸,则它占据其参考矩形高度的一半。向上箭头放置在向上按钮的“内容”矩形的中心。

可以使用::down-button和::down-arrow子控件设置向下按钮和箭头的样式。默认情况下,向下按钮位于小部件的“填充”矩形的右下角。如果没有明确的尺寸,则它占据其参考矩形高度的一半。底部箭头位于底部按钮的“内容”矩形的中心。

  • QDialog:仅支持background,background-clip和background-origin属性。
  • QDialogButton: 可以使用button-layout属性更改按钮的布局。
  • QDockWidget:支持停靠时标题栏和标题栏按钮的样式。

可以使用border属性设置停靠窗口小部件边框的样式。::title子控件可以用于自定义标题栏。

关闭按钮和浮动按钮分别使用相对于::title子控件的::close-button和::float-button来进行定位。标题栏为垂直时,

当标题栏垂直时,需要设置:vertical伪状态。另外,根据
QDockWidget.DockWidgetFeature设置:closable,:floatable和:movable pseudo状态。

注意:使用QMainWindow :: separator设置调整大小句柄(handle)的样式。

警告:取消QDockWidget时,样式表无效,因为Qt退出时,Qt使用本机顶级窗口。

  • QFrame:自Qt4.3开始,在QLabel上设置样式表会自动将QFrame的 ::frameStyle属性设置为QFrame :: StyledPanel。
  • QGroupBox:QGroupBox的标题用::title子控件进行定制,标题的位置依QGroupBox::textAlignment的具体值而言。对于可选的QGroupBox而言,标题中还会包含一个勾选标记,勾选标记用::indicator来定制,spacing仍然用于设置勾选标记与文本的间距。
  • QHeaderView:QHeaderView是Model/View框架中的一部分。标题视图的各小节(section)使用:: section子控件设置样式。::section支持 :middle, :first, :last, :only-one, :previous-selected, :selected, :checked等伪状态。::up-arrow和::down-arrow用于定制表头的排序标记。
  • QLabel:QLabel不支持:hover伪状态,自Qt4.3开始,给QLabel设置样式表也就隐式指定了QFrame::frameStyle属性。
  • QLineEdit:selection-color, selection-background-color属性分别指定了选中文本的文本颜色和背景色,使用lineedit-password-character属性设置密码字符的样式。使用lineedit-password-mask-delay更改密码掩码延迟时间。
  • QListView(QListWidget):当view支持斑马色条时,alternate-background-color属性指定备选色实现斑马色带。

当前所选条目的的颜色和背景,可以使用selection-color和
selection-background-color属性来设置。

选择行为由show-decoration-selected属性控制。

使用::item子控件可以更精细地控制QListView中的条目。

  • QMainWindow:支持分隔符的样式。使用QDockWidget时,QMainWindow中的分隔符使用:: separator子控件设置样式。
  • QMenu:菜单中的独立项使用::item子控件定制,除了常见的伪状态,::item还支持:selected, :default, :exclusive以及:non-exclusive等伪状态。利用这些伪状态,可以为不同状态的菜单项定制出不同的外观。对于可勾选的菜单项,使用::indicator对勾选标记进行定制,::separator则定制菜单项之间的分隔符;对于有子菜单的菜单项,其箭头号可以用::right-arrow, ::left-arrow进行定制,还有::scroller及::tearoff两个子组件。
  • QMenuBar:菜单栏组件的spacing属性可指定菜单项之间的间距,单个菜单项还可以通过::item子组件定制风格。但是值得注意的是,由于MAC下菜单栏集成到了系统菜单栏,此时样式表会失去作用。
  • QMessageBox:messagebox-text-interaction-flags属性可用于更改与消息框中的文本的交互方式。
  • QProgressBar:进度条组件使用::chunks子组件来定制进度条样式,text-align属性用于设定进度条中文本的对齐方向:left, center, right。对于不确定状态的进度条,将使用:indeterminate伪状态集。
  • QPushButton:支持:default, :flat, :checked伪状态,对于具备关联菜单的按钮,可以用::menu-indicator来定制下拉菜单标记。而:open和:closed伪状态则分别用于定制菜单打开和关闭时按钮的外观。从Qt5.15开始,可以将icon属性设置为覆盖按钮图标。
  • QRadioButton:::indicator用于定制文本前面的选项框,默认情况下,选项框放置在窗口部件是“内容”矩阵的左上角。spacing指定文本与选项框之间的间距。
  • QScrollBar:滚动条的组成其实非常复杂,依据垂直和水平方向的不同,由::handle, ::add-line, ::sub-line, ::add-page, ::sub-page, ::right-arrow, ::left-arrow, ::down-arrow, ::up-arrow等子组件组成。伪状态:horizontal, :vertical用于确定滚动条的方向,width(min-width), height(min-height)则可确定滚动条的不同长和宽。
  • QSizeGrip:支持width,height和image属性。
  • QSlider:对于水平的QSlider,min-width和height属性必须同时提供;对于垂直的QSlider, 必须同时提供min-height和width属性。QSlider由::groove和::handle两部分组成。::groove子组件是一条槽,供::handle在上面滑动。
  • QSplitter:窗体分割器,主要的部件是::handle。通过::handle可以动态改变分割器中的不同子窗口大小。
  • QStatusBar:仅支持background属性,单个条目的框架可以使用:: item子控件设置样式。
  • QTabBar:单独的选项卡使用子控件::tab来定制样式,使用::close-button属性来定制关闭按钮的样式,选项卡支持 :only-one, :first, :last, :middle, :previous--selected, :next-selected, :selected 伪状态。其中:top, :left, :right, :bottom伪状态根据选项卡的方向来设置。
  • QTableView(QTableWidget):当view支持斑马色条时,alternate-background-color属性指定备选色实现斑马色带,selection-color和selection-background-color属性指定选定项的文本色和背景色。注意:保证同时设置了背景色和边框宽度值。
  • QTextEdit:使用selection-color, selection-background-color属性定制,其他的定制方式见QAbstractScrollArea。
  • QToolBar:伪状态:top, :left, :right, :bottom的使用依赖于工具栏的具体位置;:first, :last, :middle, :only-one则用于设置在工具栏中的具体位置。工具栏的分隔线用::separator子组件来设置,子组件::handle则用于设置移动工具栏的handle。
  • QToolButton:如果QToolButton关联了一个菜单,则 ::menu-indicator子控件可用于设置指示器样式。默认情况下,菜单指示器位于窗口小部件的填充矩形的右下角。 如果被设置成了QToolButton::MenuButtonPopup模式,那么::menu-button子控件用于绘制菜单按钮。::menu-arrow子控件用于在菜单按钮内部绘制菜单箭头。当QToolButton显示箭头时,将使用::up-arrow,::down-arrow,::left-arrow和::right-arrow子控件。注意:如果设置了QToolButton的背景色,那么必须还要设置边框border的宽度才会起作用。这是因为QToolButton默认绘制的边框会完全遮挡住用户设置的背景色。
  • QToolBox:可以使用::tab子控件设置各个选项卡的样式。选项卡支持:only-one,:first,:last,:middle,:previous-selected,:next-selected,:selected伪状态。
  • QToolTip:opacity属性控制QToolTip的不透明度。
  • QTreeView(QTreeWidget):当View支持斑马色条时,alternate-background-color属性指定备选色实现斑马色带,selection-color和selection-background-color属性指定选定项的文本色和背景色。show-decoration-selected属性控制选中时是选中整项还是仅仅只是项的文本。::branch子控件设置树形视图的分支的样式,::branch子控件支持:open,:closed,:has-sibling和:has-children伪状态。使用::item子控件可以更精细地控制View中的项目。
  • QWidget:仅支持background,background-clip和background-origin属性。

代码演示

演示加载qss文件的方法。这里仅列出py文件代码,完整资源可从网络上下载。完整代码如下:

import sys
from PyQt5.QtCore import Qt, QTimer, QDateTime, QDate, QFile
from PyQt5.QtGui import QPalette, QColor
from PyQt5.QtWidgets import (QApplication, QWidget, QMainWindow, QPushButton, QTextEdit, 
                             QGroupBox, QCheckBox, QRadioButton, QComboBox, QLabel,
                             QVBoxLayout, QHBoxLayout, QGridLayout, QStyleFactory,
                             QTabWidget, QSizePolicy, QProgressBar, QTableWidget,
                             QLineEdit, QSpinBox, QDateTimeEdit, QSlider,
                             QScrollBar, QMenu, QMenuBar, QAction, QCalendarWidget, QDial)
 
import resource_rc
 
#标记控制窗口
class LoadQssDemo(QMainWindow):
    def __init__(self):
        super(LoadQssDemo, self).__init__()
        
        # 设置窗口标题
        self.setWindowTitle('实战PyQt5: 加载QSS样式表文件')
        
        #应用的初始调色板
        self.origPalette = QApplication.palette()
        
        self.initUi()
        
    def initUi(self):
        self.initMenuBar()
               
        #生成要显示的部件
        self.createTopLeftGroupBox()
        self.createTopRightGroupBox()
        self.createBottomLeftTabWidget()
        self.createBottomRightGroupBox()
        self.createProgressBar()
        
        mainLayout = QGridLayout()
        mainLayout.addWidget(self.topLeftGroupBox, 1, 0) #1行0列
        mainLayout.addWidget(self.topRightGroupBox, 1, 1) #1行1列
        mainLayout.addWidget(self.bottomLeftTabWidget, 2, 0) #2行0列
        mainLayout.addWidget(self.bottomRightGroupBox, 2, 1) #2行1列
        mainLayout.addWidget(self.progressBar, 3, 0, 1, 2) ## 3行0列,占1行2列
        mainLayout.setRowStretch(1, 1)
        mainLayout.setRowStretch(2, 1)
        mainLayout.setColumnStretch(0, 1)
        mainLayout.setColumnStretch(1, 1)
        
        mainWidget = QWidget()
        mainWidget.setLayout(mainLayout)
        
        self.setCentralWidget(mainWidget)
        
        #这里加载一个QSS文件
        self.loadStyleSheet()
    
    #菜单栏设置
    def initMenuBar(self):
        mBar = self.menuBar()
        
        menuFile = mBar.addMenu('文件(&F)')          
        aExit = QAction('退出(&X)', self)
        aExit.triggered.connect(self.close)
        menuFile.addAction(aExit)
 
    
    #创建左上角成组部件
    def createTopLeftGroupBox(self):
        self.topLeftGroupBox = QGroupBox('组 1')
        
        rad1 = QRadioButton('单选按钮1')
        rad2 = QRadioButton('单选按钮2')
        rad3 = QRadioButton('单选按钮3')
        rad1.setChecked(True)
        
        chk = QCheckBox('三态复选按钮')
        chk.setTristate(True)
        chk.setCheckState(Qt.PartiallyChecked)
        
        layout = QVBoxLayout()
        layout.addWidget(rad1)
        layout.addWidget(rad2)
        layout.addWidget(rad3)
        layout.addWidget(chk)
        layout.addStretch(1)
        
        self.topLeftGroupBox.setLayout(layout)
        
    #创建右上角成组部件
    def createTopRightGroupBox(self):
        self.topRightGroupBox = QGroupBox('组 2')
        
        btnDefault = QPushButton('Push Button:缺省模式')
        btnDefault.setDefault(True)
        
        btnToggle = QPushButton('Push Button: 切换模式')
        btnToggle.setCheckable(True)
        btnToggle.setChecked(True)
        
        btnFlat = QPushButton('Push Button: 扁平外观')
        btnFlat.setFlat(True)
        
        layout = QVBoxLayout()
        layout.addWidget(btnDefault)
        layout.addWidget(btnToggle)
        layout.addWidget(btnFlat)
        layout.addStretch(1)
        
        self.topRightGroupBox.setLayout(layout)
        
        
    #创建左下角Tab控件
    def createBottomLeftTabWidget(self):
        self.bottomLeftTabWidget = QTabWidget()
        self.bottomLeftTabWidget.setSizePolicy(QSizePolicy.Preferred, QSizePolicy.Ignored)
        
        tab1 = QWidget()
        tableWidget = QTableWidget(10, 10)  #10行10列
        
        tab1Layout = QHBoxLayout()
        tab1Layout.setContentsMargins(5,5,5,5)
        tab1Layout.addWidget(tableWidget)
        tab1.setLayout(tab1Layout)
        
        tab2 = QWidget()
        textEdit = QTextEdit()
        textEdit.setPlainText("一闪一闪小星星,\n"
                              "我想知道你是什么.\n" 
                              "在整个世界之上, 如此的高,\n"
                              "像在天空中的钻石.\n"
                              "一闪一闪小星星,\n" 
                              "我多想知道你是什么!\n")
        
        tab2Layout = QHBoxLayout()
        tab2Layout.setContentsMargins(5, 5, 5, 5)
        tab2Layout.addWidget(textEdit)
        tab2.setLayout(tab2Layout)
        
        tab3 = QWidget()
        calendar = QCalendarWidget()
        #设置最小日期
        calendar.setMinimumDate(QDate(1900,1,1))
        #设置最大日期
        calendar.setMaximumDate(QDate(4046,1,1))
        #设置网格可见
        calendar.setGridVisible(True)
        tab3Layout = QHBoxLayout()
        tab3Layout.setContentsMargins(5, 5, 5, 5)
        tab3Layout.addWidget(calendar)
        tab3.setLayout(tab3Layout)
        
        self.bottomLeftTabWidget.addTab(tab1, '表格(&T)')
        self.bottomLeftTabWidget.addTab(tab2, '文本编辑(&E)')
        self.bottomLeftTabWidget.addTab(tab3, '日历(&C)')
        
        #self.bottomLeftTabWidget.addTab(tab1, '表格(&T)')
        #self.bottomLeftTabWidget.addTab(tab2, '文本编辑(&E)')
        
        
    #创建右下角成组部件
    def createBottomRightGroupBox(self):
        self.bottomRightGroupBox = QGroupBox('组 3')
        self.bottomRightGroupBox.setCheckable(True)
        self.bottomRightGroupBox.setChecked(True)
        
        lineEdit = QLineEdit('s3cRe7')
        lineEdit.setEchoMode(QLineEdit.Password)
        
        spinBox = QSpinBox(self.bottomRightGroupBox)
        spinBox.setValue(50)
        
        dateTimeEdit = QDateTimeEdit(self.bottomRightGroupBox)
        dateTimeEdit.setDateTime(QDateTime.currentDateTime())
        
        slider = QSlider(Qt.Horizontal, self.bottomRightGroupBox)
        slider.setValue(40)
        
        scrollBar = QScrollBar(Qt.Horizontal, self.bottomRightGroupBox)
        scrollBar.setValue(60)
        
        dial = QDial(self.bottomRightGroupBox)
        dial.setValue(30)
        dial.setNotchesVisible(True)
        
        layout = QGridLayout()
        layout.addWidget(lineEdit, 0, 0, 1, 2)  #0行0列,占1行2列
        layout.addWidget(spinBox, 1, 0, 1, 2)   #1行0列,占1行2列
        layout.addWidget(dateTimeEdit, 2, 0, 1, 2) #2行0列,占1行2列
        layout.addWidget(slider, 3, 0)  #3行0列,占1行1列
        layout.addWidget(scrollBar, 4, 0) #4行0列,占1行1列
        layout.addWidget(dial, 3, 1, 2, 1)  #3行1列,占2行1列
        layout.setRowStretch(5, 1)
        
        self.bottomRightGroupBox.setLayout(layout)
          
    #禁止窗口上的组件
    def setWidgetsDisbaled(self, disable):
        self.topLeftGroupBox.setDisabled(disable)
        self.topRightGroupBox.setDisabled(disable)
        self.bottomLeftTabWidget.setDisabled(disable)
        self.bottomRightGroupBox.setDisabled(disable)
        
    #创建进度条
    def createProgressBar(self):
        self.progressBar = QProgressBar()
        self.progressBar.setRange(0, 10000)
        self.progressBar.setValue(0)
        
        # 定时器,定时更新进度条的值
        timer = QTimer(self)
        timer.timeout.connect(self.advanceProgressBar)
        timer.start(100)
        
    #设置进度条的值        
    def advanceProgressBar(self):
        curVal = self.progressBar.value()
        maxVal = self.progressBar.maximum()
        self.progressBar.setValue(curVal + (maxVal - curVal)//100)
      
    #关键代码!!!!!!  
    def loadStyleSheet(self):
        file = QFile(':/qdarkstyle/qdarkstyle.qss')
        file.open(QFile.ReadOnly)
 
        styleSheet = file.readAll()
        styleSheet = str(styleSheet, encoding='utf8')
        
        file.close()
 
        QApplication.instance().setStyleSheet(styleSheet)
    
if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = LoadQssDemo()
    window.show()
    sys.exit(app.exec())     

运行结果如下图:

加载QSS文件

本文知识点

  • 可以使用QSS样式表的部件;
  • 在应用中加载一个QSS文件。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多