跳至主要內容

Qt

Qt

目录

.qss 样式文件 & 样式

qss代码

  • qss与css
    • qss文件：全称 Qt Style Sheets，简写 qss，翻译 qt样式表
    • 类比css：全称Cascading Style Sheets，简写css，翻译层叠样式表
    • qss是一种从HTML CSS（层叠样式表）获得灵感的机制，两者相似又略有不同

使用

片段qss

  • 简概

    • 推荐：易于使用
    • 与css接近，功能强大且减少学习成本

  • 使用流程

    • 可以通过setStyleSheets代码直接设置qss

      QPushButton* myPushButton; 
myPushButton->setStyleSheet("* { color: blue }"); 
myPushButton->setStyleSheet("color: blue");

    • 设置样式

      QLineEdit {						/*选择器*/
	background-color:yellow;
}

    • 指定样式

      qApp->setStyleSheet("QLineEdit{background-color:yellow;}");
/* setStyleSheet(const QString &styleSheet); */
/* 可以为整个应用程序设置，也可以为单独一个控件设置 */

  • 常用属性

    • 常用属性

      color
background-color
width
height
spacing	/* 字距 */
:hover
:checked
:!checked
padding

.qss文件

添加方法

.qss样式文件不可用直接添加，像jpg、png等资源文件一样，需要添加到.qrc资源文件当中

使用

举例

/** 加载样式*/
void MainWindow::style(){
    QFile file(":/Assets/style.qss");
    file.open(QFile::ReadOnly);
    QString styleSheet = QLatin1String(file.readAll());
    qApp->setStyleSheet(styleSheet);
    file.close();
}

qss高级

qss中使用qrc资源

border-image: url(:/img/check_orange.png);

高级用法

多个一起设置（同CSS）

QCheckBox, QComboBox, QLineEdit, QListView, QRadioButton, QSpinBox{
    color: #050505;
    background-color:yellow;
}

样式表选择器（选择器，与CSS略有不同）

选择器实例可以匹配的窗口部件
全局对象*任意窗口部件
类型QDial给定类的实例，包括子类
类.QDial给定类的实例，不包括子类（而不是class）
标识QDial#ageDial给定对象名称的窗口部件（而不是id）
Qt属性QDial[y="0"]为某些属性赋值的窗口部件
子对象QFrame > QDial给定窗口部件的 直接子窗口部件
子孙对象QFrame QDial给定窗口部件的 子孙窗口部件

伪类选择器（同CSS，窗口部件中一些可以访问样式表的状态）

状态说明
:disabled禁用窗口部件
:enabled启用窗口部件
:focus窗口部件有输入焦点
:hover鼠标在窗口部件上悬停
:pressed鼠标按键单击窗口部件
:checked按钮已被选用
:unchecked按钮未被选用
indeterminate按钮被部分选中
:open窗口部件位于打开或扩展状态
:closed窗口部件位于关闭或销毁状态
:on窗口部件的状态是 on
:off窗口部件的状态是 off

自定义辅助控制器（常见的）

辅助控制器说明
::indicator复选框、单选框、可选菜单栏、可选群组框 的指示器
::menu-indicator按钮 的菜单指示器
::item菜单、菜单栏、状态栏项 --
::up-button微调框、滚动条 的向上按钮
::down-button微调框、滚动条 的向下按钮
::up-arrow微调框、滚动条、标题视图 的向上箭头
::down-arrow微调框、滚动条、标题视图、组合框 的向下箭头
::drop-down组合框 的下拉箭头
::title群组框 的标题

多种颜色定义方式（同CSS）

QLineEidt {
    color: #050505; 											/* 16进制 */
	color: rgb(0,88,152);										/* RGB */
	color: rgba(95%, 80%, 9%, 50%);								/* RGBA */
	color:palette(Base);										/* 调色板 */
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1,	/* 线性渐变 */
    			stop:0 white, stop:0.4 gray, stop:1 green);
    /**三种渐变类型
     * qlineargradient()	线性渐变
     * qradialgradient()	辐射渐变
     * qconicalgradient()	圆锥渐变
     */
}

实战 —— Candy风格

直译是 “糖果风格”，具体特征应该是大圆角、扁平或上下渐变背景

示例：略

其他样式方法

三种自定义外观方法

有三种方法可以重新定义Qt内置窗口部件的外观

  • 子类化个别窗口部件类

    • 并且重新实现它的绘制和鼠标事件处理器

  • 子类化QStyle、或者一个预定义的风格

    • 例如QWindowSytle（Qt5不再支持QWindowsStyle、QWindowsXPStyle、QWindowsVistaStyle）
    • 这种方法很好用，Qt本身也是用这种方法为它所支持的不同平台提供基于平台的外观

  • Qt样式表（从Qt4.2开始）

    • 这是一种从HTML CSS（层叠样式表）获得灵感的机制

下面的示例中会展示两种自定义风格

  • Candy风格。它通过样式表定义
  • Bronze风格。它通过QStyle的子类实现

子类化QStyle

比较起上一种方法，这种方法挺繁琐的......

但如果是使用QStylePlugin风格化插件的话，对应的是QStyle这种自定义样式方式

简概

  • 简概

    • QStyle提供了一种包装应用程序外观的方法，这些类为Qt运行的平台和桌面系统实现了外观

  • Qt内置样式的继承树

  • 补充

    • 灰色为Qt5不再支持。即Qt5不再支持QWindowsStyle、QWindowsXPStyle、QWindowsVistaStyle

      为此，可以从QProxyStyle派生出所需风格

使用流程

一个举例（捋清窗口部件和样式之间的关系）

void MyPushButton:paintEvent(QPaintEvent * /*event*/)					// 绘图事件
{
    QPainter painter(this);												// 绘图类
    QStyleOptionButton option;											// QStyleOption
    option.initFrom(this);
    if(isFlat())
        option.features |= QStyleOptionButton::Flat;
    option.text = text();
    style()->drawControl(QStyle::CE_PushButton, &option, &painter, this);// drawControl()函数被各种QStyle子类重新实现
}

定义QStyle类

class BronzeStyle: public QWindowsStyle
{
    Q_OBJECT
    public:
    	// ...
    public slots:
    	// ...
    private:
    	// ...
}

使用QStyle类

链接到当前文件 0
没有文件链接到当前文件