zoukankan      html  css  js  c++  java
  • qt--样式表QSS

    使用样式表与调色板(QPalette)相比,样式表更强大,因为使用调色板设置的外观,并不能保证在所有的样式中都可正常的工作,但样式表就不受这样的限制。而且使用样式表可以更方便的设置界面的外观,而不用去子类化 QStyle 类
     
    可使用 QApplication::setStyleSheet()函数设置整个应用程序的样式表,使用QWidget::setStyleSheet()设置部件及其子部件的样式表
    #include "win.h"
    
    #include <QApplication>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        a.setStyleSheet("QPushButton{background-color:red}"); //设置按钮的背景色
        Win w;
        w.show();
        return a.exec();
    }

    使整个应用程序的按钮都是红色

    若直接在部件上设置样式表或针对所有控件类,可忽略选择器及大括号
    #include "win.h"
    
    Win::Win(QWidget *parent)
        : QWidget(parent)
    {
        this->resize(400,300);
        QPushButton* button1=new QPushButton("AAA",this);
        button1->move(10,10);
        button1->resize(100,100);
        QPushButton* button2=new QPushButton("BBB",this);
        button2->move(150,10);
        button2->resize(100,100);
    
        button1->setStyleSheet("background-color:yellow");//省略了选择器(即 QPushButton)和大括号
    
    
    }
    
    Win::~Win()
    {
    }

    样式表语法

    Qt 样式表通常不区分大小写,除了类名、对象名和 Qt 属性名称之外

    基本语法规则

    ①、样式表由选择器(通常是某个控件类)和声明两部分组成,选择器指定了受影响的部件,声明指定了要设置的属性(注意与 Qt 属性的区别)。
    比如QPushButton { color : blue}
    其中 QPushButton 是选择器,{color: blue}是声明,color 是需要设置的属性,blue 是属性的值。
    以上语句表明,QPushButton 及其子类应使用 blue(蓝色)作为其前景色
    ②、指定多个选择器
    可为相同的声明指定多个选择器,选择器之间使用逗号“,”进行分隔,比如QPushButton, QCheckBox, QLineEdit{color: red}
    ③、指定多个属性时
    使用分号分隔,比如QPushButton{color: red; background-color:blue} //按钮前景色为红色,背景色为蓝色
    ④、为含有多个值的属性指定多个值时
    使用空隔分隔,比如QLineEdit{border: 2px solid red} //表示边框线为 2 像素宽的实线,其颜色为红色
    以上语句的属性 border 是一种对属性的简写方法,以上语句相当于以下 3 条语句:
    QLineEdit{ border- 2px;
    border-style:solid;
    border-color:red }

    选择器

    选择器
    示例
    说明
    全局选择器
    匹配所有部件
    类型选择器
    QWidget
    匹配 QWidget 及其子类的实例
    属性选择器
    QPushButton[flat =
    "false"]
    1、匹配 QPushButton 的属性 flat 等于 false 的实例
    2、注意:方括号内的属性是指 Qt 属性(即部件的属性)
    3、此选择器也可用于测试动态属性(setProperty()函数)。 
    4、也可以使用 ~= 代替 = 来测试 QStringList 类型的 Qt 属性
    是否包含给定的 QString
    5、注意:如果 Qt 属性的值在样式表设置后发生更改,则可能
    需要强制重新计算样式表,其方法是取消样式表并重新设置它
    []是用来匹配qt属性的
    类选择器
    .QPushButton
    匹配 QPushButton 但不匹配其子类的实例,这相当于
    *[class~="QPushButton"]
    ID选择器
    QPushButton#AAA
    匹配objectName属性为 AAA 的所有 QPushButton 实
    后代选择器
    QWidget QPushButton
    匹配 QWidget 的后代(子,孙子等)的所有 QPushButton 实例
    子对象选择器
    QWidget > QPushButton
    匹配 QPushButton 实例,它们是 QWidget 的直接子部件

    实例:

        QPushButton *pb1=new QPushButton("AAA",this);
        pb1->move(22,22);
        pb1->resize(111,33);
        QPushButton *pb2=new QPushButton("BBB",this);
        pb2->move(199,22);
         this->setObjectName("www");
        pb1->setObjectName("AAA");
        this->setStyleSheet("QWidget#www > QPushButton#AAA[x="22"][y="22"]{background-color:red}");
        /*把对象名为 www 的 QWidget 的直接子部件QPushButton 的背景色设置为红色,
         其中QPushButton的对象名为AAA,其x属性和y属性(即QPushButton的位置)的值都为22  */

    实例:动态属性的使用

        QPushButton *pb1=new QPushButton("AAA",this);
        pb1->move(22,22);
        pb1->resize(111,33);
         QPushButton *pb2=new QPushButton("BBB",this);
         pb2->move(199,22);
         QCheckBox *pc=new QCheckBox("CCC",this);
         pc->move(22,55);
         QCheckBox *pc1=new QCheckBox("DDD",this);
         pc1->move(99,55);
    
        pb1->setProperty("XXX",true);
        pc1->setProperty("XXX",true);//设置动态属性
        this->setStyleSheet("*[XXX=true]{background-color:red}");
        //把按钮pb1 和 pc1 的背景色设置为红色,匹配所有属性"XXX = true"的部件

    子控件

    复杂控件通常包含一系列子控件,比如QComboBox的下拉按钮就是子控件,还有QSpinBox的向上/向下箭头等。对复杂控件使用样式表设置外观,可能需要访问其子控件。样式表中子控件以“::”符号开头
    注意:QScrollBar、QComboBox 等部件的一个属性或子控件是自定义的,通常还要自定义其他属性和子控件。比如,单独使用 QScrollBar 的子控件不会产生效果,需与滚动条的属性配合使用
     
    子控件
    说明
    滚动条、滑
    块相关
    ::handle
    QScrollBar、QSplitter、QSlider 的手柄(滑块)
    ::groove
    QSlider 的凹槽
    ::corner 
    QAbstractScrollArea 中两个滚动条之间的角落
    ::add-line
    QScrollBar 增加行的按钮,即按下该按钮滚动条增加一行
    ::add-page
    QScrollBar 在手柄(滑块)和增加行之间的区域
    ::sub-line
    QScrollBar 减少行的按钮,即按下该按钮滚动条减少一行
    ::sub-page
    QScrollBar 在手柄(滑块)和减少行之间的区域
    箭头相关
    ::down-arrow
    QComboBox、QHeaderView 排序指示器、QScrollBar、QSpinBox 的向下箭头
    ::down-button
    QScrollBar 或 QSpinBox 的向下按钮
    ::up-arrow
    QHeaderView(排序指示器)、QScrollBar、QSpinBox 的向上箭头
    ::up-button
    QSpinBox 的向上按钮
    ::left-arrow
    QScrollBar 的左箭头
    ::right-arrow
    QMenu 或 QScrollBar 的右箭头
    模型/
    视图
    ::branch
    QTreeView 的分支指示符
    ::section 
    QHearderView 的段
    ::text
    QAbstractItemView 的文本
    其他
    ::chunk
    QProgressBar 的进度块
    ::drop-down
    QComboBox 的下拉按钮
    ::indicator
    QAbstractItemView、QCheckBox、QRadioButton、QMenu(可被选中的)、
    QGroupBox(可被选中的)的指示器
    选项
    卡栏、
    选项
    卡部
    件、
    可停
    靠窗
    ::pane
    QTabWidget 的面板(边框)
    ::right-corner
    QTabWidget 的右角落,此控件可用于控件 QTabWidget 中右角落部件的位置
    ::left-corner
    QTabWidget 的左角落,此控件可用于控件 QTabWidget 中左角落部件的位置
    ::tab-bar
    QTabWidget 的选项卡栏,此子控件仅用于控制 QTabBar 在 QTabWidget 中的位
    置,使用::tab 设置选项卡的样式
    ::tab
    QTabBar 或 QToolBox 的选项卡
    ::tear
    QTabBar 的可分离指示器
    ::close-button
    QTabBar 选项卡或 QDockWidget 上的关闭按钮
    ::float-button
    QDockWidget 的浮动按钮
    ::title
    QDockWidget 或 QGroupBox 的标题
    菜单
    相关
    ::scroller
    QMenu 或 QTabBar 的滚动条
    ::separator
    QMenu 或 QMainWindow 中的分隔符
    ::tearoff
    QMenu 的可分离指示器
    ::item
    QAbstractItemView、QMenuBar、QMenu、QStatusBar 中的一个项
    ::icon
    QAbstractItemView 或 QMenu 的图标
    ::menu-arrow
    带有菜单的 QToolButton 的箭头
    ::menu-button
    QToolButton 的菜单按钮
    ::menu-indicator
    QPushButton 的菜单指示器

    实例:

        this->resize(400,300);
        QSpinBox* sb=new QSpinBox(this);
        sb->move(10,10);
        sb->resize(100,30);
    
        sb->setStyleSheet("QSpinBox::up-button{Subcontrol-Position:left top}");
        //Subcontrol-Position   子控件位置属性

    伪状态

    部件含有一系列的状态,样式表的状态使用“:”符号开头。
    比如QPushButton:hover{…} //表示鼠标悬停在按钮上
    伪状态的规则:
    ①、用感叹号可否定伪状态,比如QPushButton:!hover{…} //表示鼠标未悬停在按钮上
    ②、多个伪状态连用可达到逻辑与(AND)的效果,比如QCheckBox:hover:checked{…} //表示鼠标悬停在按钮上且被选中
    ③、多个伪状态之间使用逗号分隔可表示逻辑或(OR)的效果,比如QCheckBox:hover, QCheckBox:checked{…} //表示鼠标悬停在按钮上或被选中
    ④、伪状态还可以子控件联合使用,比如QComboBox::drop-down:hover{…}
    样式表的伪状态
    常见
    状态
    :active
    部件位于激活窗口中
    :focus
    该项具有输入焦点
    :edit-focus
    该项具有编辑焦点,此状态仅适用于 Qt Extended 应用程序
    :default
    该项是默认值
    :disabled
    该项已被禁用
    :enabled
    该项已启用
    :hover
    鼠标悬停在该项上
    :pressed
    使用鼠标按下该项
    :no-frame
    该项没有边框,比如,无边框的 QLineEdit 等
    :flat 
    该项是平的(flat),比如,一个平的 QPushButton
    :checked
    该项被选中
    :unchecked
    该项未被选中
    :off
    适用于处于“关闭(off)”状态的项
    :on
    适用于处于“开启(on)”状态的项
    :editable
    QComboBox 是可编辑的
    :read-only
    该项为只读,比如,只读的 QLineEdit
    :indeterminate
    该项具有不确定状态,比如,三态的 QCheckBox
    :exclusive
    该项是排他项目组的一部分
    :non-exclusive
    该项是非排他项目组的一部分
    方位
    相关
    :bottom
    该项位于底部
    :top
    该项位于顶部
    :left
    该项位于左侧,比如,QTabBar 的选项卡位于左侧
    :right
    该项位于右侧,比如,QTabBar 的选项卡位于右侧
    :middle
    该项位于中间,比如,不在 QTabBar 开头或结尾的选项卡
    :first
    该项是第一个,比如,QTabBar 中的第一个选项卡
    :last
    该项是最后一个,比如,QTabBar 中的最后一个选项卡
    :horizontal
    该项具有水平方向
    :vertical
    该项具有垂直方向
    其他
    状态
    :maximized
    该项是最大化的,比如,最大化的 QMdiSubWindow
    :minimized
    该项是最小化的,比如,最小化的 QMdiSubWindow
    :floatable
    该项是可浮动的
    :movable
    该项可移动,例如,可移动的 QDockWidget
    :only-one
    该项是唯一的,比如,只有一个选项卡的 QTabBar
    :next-selected
    下一项被选择
    :previous-selected
    上一项被选择
    :selected
    该项被选择
    :window
    部件是一个窗口,即顶级部件
    :closable
    该项可被关闭,例如,可关闭的 QDockWidget
    :closed
    该项处于关闭状态,比如 QTreeView 中的非展开项
    :open
    该项处于打开状态,比如 QTreeView 中的展开项,或带有打开菜单的
    QComboBox 或 QPushButton
    :has-children
    该项具有孩子,比如,QTreeView 中具有子项的项
    :has-siblings
    该项具有兄弟姐妹(即同级的)
    :adjoins-item
    QTreeView 的::branch 与项相邻时设置此状态
    :alternate
    当 QAbstractItemView::alternatingRowColors()被设置为 true 时,为每个交替行设
    置此状态,以绘制 QAbstractItemView 的行
       

    实例--伪状态的使用

        this->resize(400,300);
        QPushButton* pb=new QPushButton("AAA",this);
        pb->move(10,10);
        this->setStyleSheet("QPushButton:hover{background-color:red}"
                            "QPushButton:pressed{background-color:yellow}");
        //注意:多个伪状态时""连用,要写在一个语句里,不能分开

    样式表的属性

    背景色、前景色、所选文本的颜色

    属性
    类型
    说明
    1、background
    Background
    设置背景的简写方法,相当于指定 background-color、
    background-image、background-repeat、background-position。
    以下类支持此属性
    QAbstractItemView 子类,QAbstractSpinBox 子类,
    QCheckBox,QComboBox,QDialog,QFrame,QGroupBox,
    QLabel, QLineEdit, QRadioButton, QSplitter, QTextEdit,
    QToolTip 和 QWidget
    注意:若仅在 QPushButton 上设置背景色,除非把 border 属
    性设置为某个值,否则背景可能不会被显示。
    2、background-color
    Brush
    部件的背景色
    3、background-image
    Url
    设置部件的背景图像,背景图像不会随部件的大小自动缩
    放,比如 QWidget{ background-image: url(F:/1i.png) }
    【QWidget的窗口好像没有效果】
    4、background-repeat
    Repeat
    如何使用背景图像填充背景区域 backgroung-origin,若未指
    定此属性,则在两个方向重复背景图像
    5、background-position
    Alignment
    背景图像在 background-origin 矩形内的位置,默认为 top left
    6、background-attachment
    Attachment 
    确定 QAbstractScrollArea 中的 background-image 是相对于视
    口滚动还是固定,默认值为 scroll,即,使用视口滚动
    7、background-clip
    Origin
     此属性指定 background-color 和
    background-image 的填充矩形,此属性默认值为
    border(即边框矩形)
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,
    QCheckBox,QComboBox,QDialog,QFrame,
    QGroupBox,QLabel,QPushButton,QRadioButton,
    QSplitter,QTextEdit,QToolTip,QWidget
    8、background-origin
    Origin
    背景图片的有效矩形,默认为 padding(即填充矩
    形)
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,
    QCheckBox,QComboBox,QFrame,QGroupBox,
    QLabel,QPushButton,QRadioButton,QSplitter,
    QTextEdit,QToolTip,QWidget,QLineEdit,QMenu,
    QMenuBar(注意:没有 QDialog)
    9、color
    Brush
    渲染文本的颜色,所有遵守 QWidget::palette 的部件都支持此
    属性
    10、
    selection-background-color
    Brush
    所选文本或项的背景色,所有遵守 QWidget::palette 和显示选
    择文本的部件都支持此属性,默认为调色板的
    QPalette::Highlight 角色的值
    11、selection-color
    Brush
    所选文本或项的前景色,所有遵守 QWidget::palette 和显示选
    择文本的部件都支持此属性,默认为调色板的
    QPalette::HighlightedText 角色的值

    实例:

         this->resize(400,300);
        QLabel* label=new QLabel("标签",this);
        label->move(10,10);
        label->resize(350,250);
        label->setStyleSheet(
         "QLabel{background: red url(./a.png);" //背景色为红色,背景图片为a.png
         "background-repeat: repeat-y;" //在 y 轴方向重复图片
         "background-position: right;}"); //背景图片位于部件右侧
        //注意:设置多个属性的语法

    盒子模型及相关属性

    盒子模式

    样式表的边框属性

    样式表的边框属性主要描述的是边框的边界线,包括边界线的颜色、样式(虚线、实线等)、宽度、角落半径和填充边框的图像
    注意:由于边框(border)、填充矩形(padding)、轮廓线(outline)的边界线默认宽度为 0,且样式为 none(即没有线条),因此要使其边界线可见,必须指定边界线的宽度和样式,否则边界线不可见
    ①、边框的简写方法
    1)、border      类型:Border
    设置边框的简写方法,相当于指定 border-color,border-style,border-width
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,QCheckBox,QComboBox,QDialog,QFrame,
    QGroupBox,QLabel,QPushButton,QRadioButton,QSplitter,QTextEdit,QToolTip,QWidget
    2)、border-top          类型:Border
    设置部件顶部边框的简写方法,相当于指定 border-top-color,border-top-style,border-top-width
    3)、border-right         类型:Border
    设置部件右边框的简写方法,相当于指定 border-right-color,border-right-style,border-right-width
    4)、border-bottom      类型:Border
    设置部件底部边框的简写方法,相当于指定 border-bottom-color,border-bottom-style,border-bottom-width
    5)、border-left     类型:Border
    设置部件左边框的简写方法,相当于指定 border-left-color,border-left-style,border-left-width
    ②、边框颜色
    6)、border-color      类型:Box Colors
    边框边界线的颜色,相当于指定 border-top-color,border-bottom-color,border-left-color,border-right-color,默认值为 color(即部件的前景色)  
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,QCheckBox,QComboBox,QFrame,QGroupBox,
    QLabel,QPushButton,QRadioButton,QSplitter,QTextEdit,QToolTip,QWidget,QLineEdit,QMenu,
    QMenuBar(注意:没有 QDialog)
    7)、border-top-color      类型:Brush     //边框顶部边界线的颜色
    8)、border-right-color    类型:Brush    //边框右边界线的颜色
    9)、border-bottom-color    类型:Brush     //边框底部边界线的颜色
    10)、border-left-color       类型:Brush      //边框左边界线的颜色
    ③、边框半径
    11)、border-radius    类型:Radius
    边框角落的半径,等效于指定 border-top-left-radius,border-top-right-radius,border-bottom-left-radius,border-bottom-right-radius,该属性剪切元素的 background(背景),默认为 0。
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,QCheckBox,QComboBox,QFrame,QGroupBox,
    QLabel,QPushButton,QRadioButton,QSplitter,QTextEdit,QToolTip,QLineEdit,QMenu,QMenuBar(注意:没有 QDialog 和 QWidget)
    12)、border-top-left-radius          类型:Radius            //边框左上角的半径
    13)、border-top-right-radius       类型:Radius            //边框右上角的半径
    14)、border-bottom-right-radius    类型:Radius         //边框右下角的半径
    15)、order-bottom-left-radius        类型:Radius         //边框左下角的半径
    ④、边框样式
    16)、border-style        类型:Border Style
    边框边界线的样式(虚线、实线、点划线等),默认为 none
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,QCheckBox,QComboBox,QFrame,QGroupBox,
    QLabel,QPushButton,QRadioButton,QSplitter,QTextEdit,QToolTip,QLineEdit,QMenu,
    QMenuBar(注意:没有 QDialog 和 QWidget)
     
    边框样式种类:

    solid 实线
    dotted 点状边框
    none无边框
    dashed 虚线
    double 双线
    groove 定义3D凹槽边框。其效果取决于border-color的值
    ridge 定义3D垄状边框。其效果取决于 border-color的值
    inset 定义3D inset边框。其效果取决于 border-color的值
    outset 定义3D outset边框。其效果取决于 border-color的值

    17)、border-top-style                类型:Border Style      //边框顶部边界线的样式
    18)、border-right-style              类型:Border Style     //边框右侧边界线的样式
    19)、border-bottom-style          类型:Border Style     //边框底部边界线的样式
    20)、border-left-style                类型:Border Style     //边框左侧边界线的样式
    ⑤、边框宽度
    21)、border-width              类型: Border Lengths
    边框的宽度,等效于指定 border-top-width,border-bottom-width,border-left-width,border-right-width
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,QCheckBox,QComboBox,QFrame,QGroupBox,
    QLabel,QPushButton,QRadioButton,QSplitter,QTextEdit,QToolTip,QLineEdit,QMenu,
    QMenuBar(注意:没有 QDialog 和 QWidget)
    22)、border-top-width               类型:Length       //边框顶部边界线的宽度
    23)、border-right-width             类型:Length       //边框右侧边界线的宽度
    24)、border-bottom-width         类型:Length       //边框底部边界线的宽度
    25)、border-left-width               类型:Length       //边框左侧边界线的宽度
    ⑥、边框图像
    26)、border-image                类型:Border Image
    填充边框的图像,该图像被分割成 9 个部分,并在必要时适当地拉伸
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,QCheckBox,QComboBox,QFrame,QGroupBox,
    QLabel,QPushButton,QRadioButton,QSplitter,QTextEdit,QToolTip,QLineEdit,QMenu,
    QMenuBar(注意:没有 QDialog 和 QWidget)

    样式表的边距属性

    27)、margin   类型:Box Lengths
    部件的边距,等效于指定 margin-top,margin-right,margin-bottom,margin-left,默认为 0
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,QCheckBox,QComboBox,QFrame,QGroupBox,
    QLabel,QPushButton,QRadioButton,QSplitter,QTextEdit,QToolTip,QLineEdit,QMenu,
    QMenuBar(注意:没有 QDialog 和 QWidget)
    28)、margin-top                 类型:Length        //部件的顶部边距
    29)、margin-right               类型:Length        //部件的右侧边距
    30)、margin-bottom           类型:Length        //部件的底部边距
    31)、margin-left                 类型:Length        //部件的左侧边距

    样式表的填充属性

    32)、padding          类型:Box Lengths
    部件的填充矩形,等效于指定 padding-top,padding-right,padding-bottom,padding-left,默认为 0
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,QCheckBox,QComboBox,QFrame,QGroupBox,
    QLabel,QPushButton,QRadioButton,QSplitter,QTextEdit,QToolTip,QLineEdit,QMenu,
    QMenuBar(注意:没有 QDialog 和 QWidget)
    33)、padding-top                        类型:Length         //填充矩形顶部离边框顶部的距离
    34)、padding-right                      类型:Length        //填充矩形右侧离边框右侧的距离
    35)、padding-bottom                  类型:Length        //填充矩形底部离边框底部的距离
    36)、padding-left                        类型:Length        //填充矩形左侧离边框左侧的距离

    样式表的轮廓线属性

    37)、outline                   //绘制在对象边框上的轮廓--内容矩形边框上

    这条轮廓线  有焦点时显示   无焦点时不显示 

    38)、outline-color          类型:Color       //轮廓线的颜色
    39)、outline-offset          类型:Length   //轮廓与部件边框的偏移量
    40)、outline-style          //绘制轮廓的图案(pattern),另见 border-style
    41)、outline-radius        //轮廓的圆角
    42)、outline-bottom-left-radius      类型:Radius       //轮廓左下角的半径
    43)、outline-bottom-right-radius    类型:Radius       //轮廓右下角的半径
    44)、outline-top-left-radius            类型:Radius        //轮廓左上角的半径
    45)、outline-top-right-radius          类型:Radius        //轮廓右上角的半径

    实例:

         this->resize(600,300);
        QPushButton *pb1=new QPushButton("BBB",this);
        pb1->move(433,33);
        QLabel* label=new QLabel("标签",this);
        label->move(433,233);
        QPushButton *pb=new QPushButton("AAA",this);
        pb->move(33,33); pb->resize(333,222);
        this->setStyleSheet(
         "QPushButton{"
         "background: red url(./a.png);"
         "background-repeat: repeat-y;"
         "background-position: left;"
    
        "border: 11px solid rgb(0,0,250);"  //绘制一个11像素宽的红色实线边框线,注意值的顺序
         "margin:22px;" //部件的边距为22像素
         "padding:22px;" //部件填充距离为22像素
         "background-clip:margin;" //背景色填充整个边距矩形
         "background-origin:margin;" //背景图片的原点位于边界矩形
         "outline:11 dashed rgb(250,250,0);}" //绘制一个 11 像素宽的黄色虚线轮廓线
         "QPushButton:pressed {" //当按钮按下时的样式
         "background-color: blue;" //背景色为蓝色
         "background-clip:border;" //背景色填充边界矩形
         "background-origin:content;}" //背景图片的有效矩形为内容矩形
         );

    工程下载:链接:https://pan.baidu.com/s/1E5G9-xTkRoonyJ5zlUVB_w   提取码:6666    

    边框图像(border-image)原理

    1)、如上图,边框图像被 4 条虚线划分为 3*3 的小格,从而把图像分为 9 个区域
    2)、当使用边框图像填充部件背景时,4 个角(即格子①、③、⑦、⑨)保持不变,其他 5个格子被拉伸或重复(即平铺)
    3)、边框图像的设计原则如下:
    4 条虚线分别使用从上、右、下、左边缘的距离设置,如图中 top、right、bottom、left 所示
    使用边框图像还必须明确的设置边框的宽度(即 border-width 属性),通常把边框宽度设置为与 4 条虚线的值相一致,否则,4 个角的图像将被适当的拉伸或压缩以适应边框的大小
    4)、边框图像(border-image)与背景图像(background-image)的显著区别是,背景图像不会随窗口部件的大小而缩放
    5)、若同时指定了边框图像和背景图像,则边框图像会绘制在背景图像之上

    实例

         this->resize(400,300);
        QPushButton *pb=new QPushButton("AAA",this);
        pb->move(10,10); pb->resize(270,270);
        this->setStyleSheet(
         "QPushButton{"
        /*设置边框图像,其上、右、下、左的边缘距离分别为 90 90 90 90,除 4 个角外,
         中间块的处理方式:stretch  拉伸     round  平铺      repeat 重复*/
         "border-image:url(./b.png) 90 90 90 90 repeat;"
         "background-color: blue;"
         "border-90;}" //必须设置边框宽度
         );

    工程下载:链接:https://pan.baidu.com/s/1HiEF75er3fO_6jMSmDo2Og   提取码:6666    

    与子部件位置、大小有关的属性

    1、subcontrol-origin           类型:Origin     //子控件的原点矩形,默认为 padding
    2、subcontrol-position      类型:Alignment      子控件在 subcontrol-origin 属性指定的矩形内的对齐方式,默认值取决于子控件
    3、position                      类型:relative | absolute      使用 left、right、top、bottom 属性的偏移是相对坐标还是绝对坐标。默认为 relative(相对的)
    4、spacing      类型:Length
    部件的内部间距(比如复选按钮和文本之间的距离),默认值取决于当前样式
    以下类支持此属性:QCheckBox,可选中的 QGroupBox,QRadioButton,QMenuBar
    5、bottom      类型:Length
          left           类型:Length
         top           类型:Length
         right        类型:Length
         以 bootom 属性为例(其余属性类似),若 position 属性是 relative(相对的,默认值),则将子控件向上移动一偏移量,若 position 是 absolute(绝对的),则 bottom 属性是指与子控件的下边缘的距离,该距离与subcontrol-origin 属性有关。此属性默认值为 0。
    6、height      类型:Length
         width       类型:Length
         子控件的高度/宽度,默认值取决于当前样式,注意:除非另有规定,否则在部件上设置此属性无效,若想要部件有一个固定的高度,应把 min-height 和 max-height 设置为相同的值,宽度类似
    7、max-height     类型:Length
         max-width       类型:Length
    部件或子控件的最大高度/宽度,以上值相对于盒子模型的内容矩形
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,QCheckBox,QComboBox,QFrame,QGroupBox,
    QLabel,QPushButton,QRadioButton,QSizeGrip,QSpinBox,QSplitter,QStatusBar,QTextEdit,
    QToolTip,QLineEdit,QMenu,QMenuBar,(注意:没有 QDialog 和 QWidget)
    8、min-height            类型:Length
         min-width             类型:Length
    部件或子控件的最小高度/宽度,默认值依赖于部件的内容和样式,该值相对于盒子模型的内容矩形
    以下类支持此属性:
    QAbstractItemView 子类,QAbstractSpinBox 子类,QCheckBox,QComboBox,QFrame,QGroupBox,
    QLabel,QPushButton,QRadioButton,QSizeGrip,QSpinBox,QSplitter,QStatusBar,QTextEdit,
    QToolTip,QLineEdit,QMenu,QMenuBar,(注意:没有 QDialog 和 QWidget)

    实例

         this->resize(400,300);
        QSpinBox *pb=new QSpinBox(this); pb->move(33,33);
         pb->resize(300,200); //为使效果比较明显,把按钮设置得相对大一点
         this->setStyleSheet(
          "QSpinBox::down-button{" //设置微调按钮的向下按钮
          "subcontrol-origin:content;" //子控件的原点矩形
          "subcontrol-position:right bottom;" //子控件相对于原点矩形的对齐方式
          "height:22px;" "22px;" //设置子控件(即向下按钮)的大小(即宽度和高度)
         //设置向下按钮的位置使用绝对坐标指定,若要使用相对坐标,只需把 absolute 修改为 relative 即可
          "position:absolute;"  //绝对坐标
          "bottom:22px;" "right:11px;"
          "margin:11px;" //设置向下按钮的边距
          "background-color:red;" //使用红色填充子控件(向下按钮)背景
          "background-clip:margin" //填充背景的区域为边距矩形(margin)范围
          "}"
           );

    字体、文本、图标、图像、不透明度属性

    属性
    类型
    说明
    1、icon-size
    Length
    部件中图标的宽度和高度,可设置以下部件的图标大小:
    QCheckBox,QListView,QPushButton,QRadioButton,QTabBar,
    QToolBar,QToolBox,QTreeView
    2、text-align
    Alignment
    部件中文本的对齐方式,默认值取决于样式
    3、text-decoration
    none没有线
    underline下划线
    overline上划线
    line-through删除线
    附加的文本的效果
    4、font
    Font
    设置文本字体的简写方法,相当于指定 font-family,font-size,font-style,
    font-weight,所有遵守 QWidget::font 属性的部件都支持此属性。默认
    为 QWidget::font 属性
    5、font-family
    String
    字体系列(字体族)
    6、font-size
    Font Size
    字体的大小,仅支持 pt 和 px(像素)
    7、font-style
    Font Style
    字体的样式(比如是否倾斜)
    8、font-weight
    Font Weight
    字体的重量(即字体的粗细)
    9、image
    Url
    绘制在子控件内容矩形(content)中的图像
    绘制的图像使用与 QIcon 相同的算法,即图像不会放大,但在必
    要时会缩小
    在子控件上设置该属性,会隐式设置子控件的宽度和高度(除非
    使用 svg 图像)
    Qt4.3 之后可使用 image-position 来设置图像在矩形内的对齐方
    此属性仅用于子控件,不支持其他元素
    若指定了 svg,则图像将被缩放到内容矩形的大小,注意:svg需使用 svg 插件
     
    若还同时设置了背景图像(background-image)和边框图像
    (border-image),则 image 绘制在 border-image 之上,border-image
    绘制在 background-image 之上
    10、image-position
    Alignment 
    图像的位置(对齐方式)
    11、opacity
    Number
    部件的不透明度,其值为 0(透明)到 255(不透明),目前仅支持工具提
    示。默认值为当前样式 QStyle::SH_ToolTipLabel_Opacity 指定的值

    实例

         this->resize(400,300);
        QPushButton *pb1=new QPushButton("AAA",this);
        pb1->move(22,22);
        pb1->setIcon(QIcon("./aa.jpg")); //添加一个图标
        pb1->resize(333,133); //为使效果比较明显,把按钮设置得相对大一点
        this->setStyleSheet(
         "QPushButton{"
         "text-align:top right;" //文本对齐方式
         "icon-size:30px;" //注意:此处必须带上单位(px 表示像素)
    
         "text-decoration:underline;" //为文本添加下划线
        /*设置字体,以下属性需按照字体度量、样式、大小、字体族的顺序排列,且字体大小必须带上单位,
        否则属性将不起作用。*/
         "font:900 italic 55px Times New Roman;}"
         );

     工程下载:链接:https://pan.baidu.com/s/1v3o8spefdNmTAojTp6BSXA    提取码:6666   

    其他属性

    1、button-layout     类型:Number
    QDialogButtonBox 或 QMessageBox 中按钮的布局,可取值为 0,1,2,3,5,其意义如下:
    0:QDialogButtonBox::WinLayout,
    1:QDialogButtonBox::MacLqyout,
    2:QDialogButtonBox::KdeLayout,
    3:QDialogButtonBox::GnomeLayout),
    5:QDialogButtonBox::AndroidLayout,
    默认值为 QStyle::SH_DialogButtonLayout 的值
    2、dialogbuttonbox-buttons-have-icons       类型:Boolean //QDialogButtonBox 中的按钮是否显示图标
    3、lineedit-password-character          类型:Number
    QLineEdit 的密码字符(使用 unicode 数字),比如:*{lineedit-password-character:9679}
    默认为 QStyle::SH_LineEdit_PasswordCharacter 的值
    4、lineedit-password-mask-delay      类型:Number     //qt5.4
    QLineEdit 在显示密码字符之前的延迟时间(毫秒),默认为 QStyle::SH_LineEdit_PasswordMaskDelay 的值
    5、messagebox-text-interaction-flags       类型:Number
    消息框中与文本的交互行为,可取值基于 Qt::TextInteractionFlags 标志,比如
    QMessageBox{messagebox-text-interaction-flags:5}; //即 Qt::LinksAccessibleByMouse(值为 4)与
    Qt::TextSelectableByMouse(值为 1)的按位或。
    默认值为 QStyle::SH_MessageBox_TextInteractionFlags 的值
    6、titlebar-show-tooltips-on-buttons        类型:bool       //是否在工具栏按钮上显示工具提示
    7、widget-animation-duration      类型:Number       //qt5.10
    动画的持续时间(毫秒),0 意味着禁用动画,默认值为 QStyle::SH_Widget_Animation_Duration 的值
    8、alternate-background-color       类型:Brush
    QAbstractItemView 的交替背景色,若未设置此属性则使用 QPalette::AlternateBase 角色的颜色
    9、paint-alternating-row-colors-for-empty-area        类型:bool
    QTreeView 是否为空区域(即没有项的区域)绘制交替行颜色
    10、show-decoration-selected       类型:Boolean
    在 QListView 中选择是覆盖整行还是仅覆盖文本,默认为 QStyle::SH_ItemView_ShowDecorationSelected的值
    11、gridline-color    类型:Color
    QTableView 中网格线的颜色,默认为 QStyle::SH_Table_GridLineColor 的值

    属性类型

    1、各符号的含义
    |   分隔符,比如 0 | 1,表示 0 或者 1
    *   表示 0 或更多
    +  表示 1 或更多
    ?   选择0个或1个,比如(on | off)?,表示可取 on 或 off 之一,或一个都不取
    {0,4}    表示 0 到 4,比如 Length{0 , 4},表示 0 到 4 个 Length 的值
     
    示例:
    ①、{top | bottom | left | right | center}* //表示可取大括号中任意值的组合比如 top left 表示左上
    ②、(Font Style | Font Weight){0, 2} Font Size String
    以上语法表示,其值的格式必须按照如下顺序指定(若顺序不正确,则取值无效):
    “Font Style 或 Font Weight 的值之一或无,字体大小,一个字符串”,
    假设 Font Style 属性类型可取值为 italic,Font Weight 属性类型可取值为一整数,Font Size 属性类型可
    取值为一像素值,String 为一字符串,则以下值是有效的取值
    italic 55px "Calibri" //斜体,字的大小为 55 像素,字体族为 Calibri
    900 55px "Calibri" //字体粗细为 900,大小为 55 像素,字体族为 Calibri
    900 italic 55px "Calibri" 或 italic 900 55px "Calibri" //Font Style 和 Font Weight 的位置无关紧要
    以下为无效的取值 900 55px italic "Calibri" //Font Size 和 Font Style 的顺序不对
    55px italic "Calibri" //原因同上
    2、Alignment       值:{top | bottom | left | right | center}*   对齐方式
    比如 QPushButton{background-position:top right} //右上角对齐
    3、Url       值:url(filiename)     其中的 filename 是本地磁盘或 Qt 资源系统的文件的名称
    比如    QPushButton{background-image:url(F:/1i.png)} //读取文件 F:/1i.png 作为背景图像
    4、Attachment     值:{scroll | fixed}*
    滚动或固定,属性 background-attachment 使用该类型,以用于 QAbstractScrollArea
    5、Background      值:{Brush | Url | Repeat | Alignment}* //参见各属性类型的取值
    6、Boolean    值:0 | 1 //布尔值,取 0 或 1
    7、Border     值:{Border Style | Length | Brush}* //参见各属性类型的取值
    8、Border Image     值:none | Url Number{4} (stretch | repeat) {0, 2}
    该值用于指定边框图像(border-image),注意值的格式,比如
    QPushButton{
     
    border-image:url(F:/1x.png) 15 25 15 25 repeat;
    border-55;} //指定边框图像还需设置边框宽度
    9、Border Style      值:dashed | dot-dash | dot-dot-dash | dotted | double | grovve | inset | outset | ridge | solid | none
    该属性类型用于指定边界线的样式,比如 dashed 表示虚线,dotted 表示点线等
    10、Box Colors     值:Brush{1, 4}
    1 到 4 个 Brush 值,分别指定盒子的 top、right、bottom、left 边界线,若未指定 left,则将与 right 相同,
    若未指定 bottom,则与 top 相同,若未指定正确的颜色,则与 top 的相同,下面为示例:
    QLabel{border-color:yellow} //四条边界线都为黄色
    QLabel{border-color:yellow red} //top、bottom 为黄色,left 和 right 为红色
    QLabel{border-color:yellow red blue} //top 为黄色,right 和 left 为红色,bottom 为蓝色
    QLabel{border-color:yellow red blue green} //top 为黄色,right 为红色,bottom 为蓝色,left 为绿色
    11、Box Lengths    值:Length{1, 4}
    1 到 4 个 Length 值,分别指定盒子的 top、right、bottom、left 边界线,其原理与 Box Colos 相同。
    12、Brush    值:Color | Gradient | PaletteRole
    具体可参见各属性类型的取值,注意:Brush 属性类型还可指定渐变色(即 Gradient 属性类型)
    13、Color    值:rgb(r, g, b) | rgba(r, g, b, a) | hsv(h, s, v) | hsva(h, s, v, a) | #rrggbb | Color Name
    指定颜色,从其值可看到,颜色可使用 6 种方式指定,其中 rgb()和 rgba()可取 0~255 之间的值,或一个百分比值,hsv()或 hsva 中的 s 和 v 必须是 0~255 之间的值,h 的值是 0~359 之间的值,
    比如QLabel{border-color: rgba(111,11,11, 70%);
    14、Font     值:(Font Style | Font Weight){0, 2} Font Size String
    字体属性,对该属性取值的讲解
    15、Font Size
    值:Length //字体的大小
    16、Font Style
    值:normal | italic | oblique
    //字体的样式
    17、Font Weight
    值:normal | bold | 100 | 200 | … | 900
    //字体的重量(即粗细)
    18、Length
    值:Number(px | pt | em |ex )?
    数字后跟一个测量单位(比如像素),在 Qt 中,必须指定测量单位,为了早期的 Qt 版本兼容,大多数情况
    下,若未指定测量单位,则被视为像素,支持的单位如下:
    px:像素
    pt:点(即 1/72 英寸)
    em:字体的 em 宽度,即字母 M 的宽度
    ex:字体的 ex 宽度,即字母 X 的宽度
    19、Number
    值:一个 10 进制整数和实数,比如 18, 23.46 等
    20、Origin
    值:margin | border | padding | content
    指定盒子模型中的 4 个矩形,详见盒子模型原理(前文)
    21、PaletteRole
    值:alternate-base | base | bright-text | button | button-text | dark | highlight | highlighted-text | light | link |
    link-visited | mid | midlight | shadow | text | window | window-text
    该属性类型的取值对应于 QPalette::ColorRole 枚举。
    22、Radius
    值:Length{1,2}
    1 到 2 个 Length,若只指定了一个 Length,则表示角的 1/4 圆的半径,若指定两个长度,则第一个长度
    是 1/4 椭圆的水平半径,第二个长度是垂直半径
    23、Repeat
    值:repeat-x | repeat-y | repeat | no-repeat
    表示重复性质(可实现图像的平铺),其中 repeat-x 表示水平方向重复,repeat-y 表示垂直方向重复,repeat
    表示水平和垂直方向重复,no-repeat 表示没有重复。
    24、Icon    值:(Url (disabled | active | normal | selected)?(on | off) ?) *       指定图标(图标属性见下表),示例
    QMessageBox {
    dialogbuttonbox-buttons-have-icons: true; //显示图标
    dialog-ok-icon: url(ok.svg); //ok 按钮的图标
    dialog-cancel-icon: url(cancel.png), //cancel 按钮的图标
    url(grayed_cancel.png) disabled; } //禁用时 cancel 的图标

    渐变色 

    25、Gradient     值:qlineargradient | qradialgradient | qconicalgradient     指定渐变填充
    其中 qlinearGradient 表示线性渐变,qradialgradient 表示径向渐变,qconicalgradient 表示圆锥渐变

    实例: 线性渐变

        this->resize(400,300);
        QPushButton *pb1=new QPushButton("AAA",this);
        pb1->move(22,22);
        pb1->resize(333,133); //为使效果比较明显,把按钮设置得相对大一点
        this->setStyleSheet(
         "QPushButton {"
                    "background: qlineargradient(" //设置线性渐变背景
                    "x1:0, y1:0, x2:1, y2:1,"   //渐变范围从左上角(0,0),到右下角(1,1),也决定了渐变方向
                    "stop:0 red, stop: 0.5 yellow, stop:1 blue)" //起点颜色为红色,中点位置颜色为黄色,终点颜色为蓝色
                    "}"
         );

    实例:圆锥渐变(角度渐变)

        this->resize(400,300);
        QPushButton *pb1=new QPushButton("AAA",this);
        pb1->move(22,22);
        pb1->resize(333,133); //为使效果比较明显,把按钮设置得相对大一点
        this->setStyleSheet(
         "QPushButton {"
                    "background: qconicalgradient(" //圆锥渐变
                    "cx:0.5, cy:0.5,"   // 圆心位置
                    "angle:30,"  //起始角度
                    "stop:0 red, stop:0.5 yellow,stop:1 blue"  //指定渐变颜色
                    ")"
                    "}"
         );

    实例:径向渐变(辐射渐变)

    以圆心为中心显示渐变。(cx, cy)是中点,半径(radius)是以中点为圆心的圆的半径,(fx, fy)是渐变的起点

        this->resize(400,300);
        QPushButton *pb1=new QPushButton("AAA",this);
        pb1->move(22,22);
        pb1->resize(333,133); //为使效果比较明显,把按钮设置得相对大一点
        this->setStyleSheet(
         "QPushButton {"
                    "background: qradialgradient(" //径向渐变
                    "cx:0, cy:0,"   // 圆心位置
                    "radius: 1,"  //半径
                    "fx:0.5, fy:0.5,"  //渐变的起点
                    " stop:0 red,stop:0.5 yellow, stop:1 green" //指定渐变颜色
                    ")"
                    "}"
         );

                  

  • 相关阅读:
    c19---指针和字符串
    c18---数组和指针
    c17---指针
    c16---字符串
    c15--二位数组
    Android -- Properties使用
    四种更新UI的方法
    Android 使用开源库StickyGridHeaders来实现带sections和headers的GridView显示本地图片效果
    Android 性能优化之使用MAT分析内存泄露
    android中PopupMenu的使用
  • 原文地址:https://www.cnblogs.com/liming19680104/p/13929838.html
Copyright © 2011-2022 走看看