AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

[Qt教程] 第45篇 进阶（五）Qt样式表

2013-11-12 2020
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

[Qt教程] 第45篇 进阶（五）Qt样式表

楼主
  发表于 2013-9-13 15:43:55  | 查看: 329 | 回复: 1
Qt样式表



版权声明
该文章原创于 Qter 开源社区


导语

一个完善的应用程序不仅应该有实用的功能，还要有一个漂亮的外观，这样才能使应用程序更加友善，更加吸引用户。作为一个跨平台的UI开发框架，Qt提供了强大而灵活的界面外观设计机制。
Qt样式表是一个可以自定义部件外观的十分强大的机制。Qt样式表的概念、术语和语法都受到了HTML的层叠样式表（Cascading StyleSheets，CSS）的启发，不过与CSS不同的是，Qt样式表应用于部件的世界。


环境： Windows Xp + Qt 4.8.5+QtCreator2.8.0


目录

一、简介
二、在设计模式使用Qt 样式表
三、在代码中设置Qt 样式表
四、样式表语法



正文


一、简介


要学习Qt样式表，需要对其有一个全面的了解，应该知道它到底有什么用，可以给哪些部件设置样式。为了了解这些内容，我们先在Qt帮助中查看Qt StyleSheets关键字，如下图所示。

01.jpg



这里将所有内容分为了几部分：The Style Sheet Syntax中介绍了Qt样式表的语法，就是一些使用规则；Qt Designer Integration中介绍了如何在设计器中使用Qt样式表；CustomizingQt Widgets Using Style Sheets中介绍了如何使用Qt样式表来定制部件样式；QtStyle Sheets Reference中罗列了Qt中所有可以使用样式表的部件；QtStyle Sheets Examples中列出了常用部件使用样式表的例子，这个是我们后面学习使用时的重要参考。



二、在设计模式使用Qt样式表



1. 新建Qt Gui 应用，项目名称为myStyle ，其他保持默认即可。完成后打开mainwindow.ui 进入设计模式，然后拖入一个Push Button 按钮。



2. 在按钮部件上右击，选择“改变样式表”菜单项，在弹出的编辑样式表对话框中点击“添加颜色”下拉框，然后选择background-color ，我们为其添加背景颜色。如下图所示。


02.jpg



这时会弹出选择颜色按钮，大家可以随便选择一个颜色，这里选择了红色，然后点击确定按钮关闭对话框。添加好的代码如下图所示。这种方法可以快速设置样式表，当然我们也可以自己手动来添加代码。

03.jpg 




3. 完成后大家可能发现按钮的颜色并没有改变，不要着急，这时运行程序，发现已经有效果了。如下图所示。


04.jpg



4. 其实在设计模式还可以很容易地使用背景图片，这个需要使用Qt 资源，大家可以试试，这里就不再介绍。



三、在代码中设置Qt样式表



        既然在设计器中可以使用样式表，那么使用代码就一定可以实现。在代码中可以使用setStyleSheet() 函数来设置样式表，不过用两种设置方法。



1. 设置所有的相同部件都使用相同的样式。我们在mainwindow.cpp 的构造函数中添加如下代码：
setStyleSheet( "QPushButton   {   color:   white   }" );

这时运行程序，效果如下图所示。


05.jpg



可以看到按钮的文本颜色变成了白色，不过这种方式是给所有QPushButton 类对象设置的样式。也就是说，我们再往界面上拖放其他的Push Button ，它的文本颜色也会变成白色。



2. 那么怎样才能只给特定的一个按钮设置样式表呢，这就需要使用第二种方式了。我们接着在mainwindow.cpp 构造函数中添加代码：



ui -> pushButton ->setStyleSheet( "color:   blue " );


这样就是只给先前添加的 pushButton 按钮设置了样式，将文本颜色设置为蓝色。为了有一个对比，大家可以再往界面上拖入一个 Push Button 按钮，然后运行程序，如下图所示。


06.jpg


也许现在又会问了，怎么按钮的背景不是红色的了？这是因为一个部件只能单独设置一个样式表，我们在代码中为 pushButton 设置了样式表就会屏蔽设计器中设置的。这里只是说单独为一个部件同时设置了多个样式表会出现这种情况，如果对其父类进行设置，则只会对其有影响，但是不会屏蔽掉自己的样式表，比如前面按钮的红底白字就是这种情况。


下面我们把代码更改如下：


ui -> pushButton ->setStyleSheet( "background-color:red;   color:   blue" );


再次运行程序，可以发现已经是红底蓝字了。效果如下图所示。


07.jpg



现在大家应该可以了解到，我们前面在设计模式中就是只为指定的pushButton 按钮设置了背景。




四、样式表语法



1.样式规则



样式表包含了一系列的样式规则，一个样式规则由一个选择符（selector）和一个声明（declaration）组成。选择符指定了受该规则影响的部件；声明指定了这个部件上要设置的属性。例如：


QPushButton{color:red}


        在这个样式规则中， QPushButton 是选择符，{color:red}是声明，而color是属性，red是值。这个规则指定了QPushButton和它的子类应该使用红色作为它们的前景色。Qt样式表中一般不区分大小写，例如color、Color、COLOR和COloR表示相同的属性。只有类名，对象名和Qt属性名是区分大小写的。一些选择符可以指定相同的声明，只需要使用逗号隔开，例如：


QPushButton,QLineEdit,QComboBox{color:red}


        一个样式规则的声明部分是一些属性：值对组成的列表，它们包含在大括号中，使用分号隔开。例如：


QPushButton{color:red;background-color:white}



2.子控件（Sub-Controls）



对一些复杂的部件修改样式，可能需要访问它们的子控件，例如QComboBox的下拉按钮，还有QSpinBox的向上和向下的箭头等。选择符可以包含子控件来对部件的特定子控件应用规则，例如：


QComboBox::drop-down{image:url(dropdown.png)}


        这样的规则可以改变所有的QComboBox 部件的下拉按钮的样式。在 Qt Style Sheets Reference 关键字对应的帮助文档的 List of Stylable Widgets 一项中列出了所有可以使用样式表来自定义样式的Qt 部件，在 List of Sub-Controls 一项中列出了所有可用的子控件。



3.伪状态（Pseudo-States）


选择符可以包含伪状态来限制规则在部件的指定的状态上应用。伪状态出现在选择符之后，用冒号隔离，例如：


QPushButton:hover{color:white}


        这个规则表明当鼠标悬停在一个QPushButton 部件上时才被应用。伪状态可以使用感叹号来表示否定，例如要当鼠标没有悬停在一个QRadioButton 上时才应用规则，那么这个规则可以写为：


QRadioButton:!hover{color:red}


        伪状态还可以多个连用，达到逻辑与效果，例如当鼠标悬停在一个被选中的QCheckBox 部件上时才应用规则，那么这个规则可以写为：


QCheckBox:hover:checked{color:white}


        如果有需要，也可以使用逗号来表示逻辑或操作，例如：


QCheckBox:hover,QCheckBox:checked{color:white}


在 Qt Style Sheets Reference关键字对应的帮助文档的 List of Pseudo-States一项中列出了Qt支持的所有的伪状态。



4.例子


        大家可以在Qt Style Sheets Examples 页面找到很多相关的例子来学习，例如，下面是QSpinBox 部件的一段样式表：

QSpinBox {
      padding-right: 15px; /* make room for the arrows */
      border-image: url(:/images/frame.png) 4;
      border-width: 3;
}
QSpinBox::up-button {
      subcontrol-origin: border;
      subcontrol-position: top right; /* position at the top right corner */
      width :   16px ;   /*   16   +   2*1px   border-width   =   15px   padding   +   3px   parent   border   */
      border-image: url(:/images/spinup.png) 1;
      border-width: 1px;
}
QSpinBox::up-button:hover {
      border-image: url(:/images/spinup_hover.png) 1;
}
QSpinBox::up-button:pressed {
      border-image: url(:/images/spinup_pressed.png) 1;
}
QSpinBox::up-arrow {
      image :   url(:/images/up_arrow.png);
      width :   7px ;
      height :   7px ;
}
QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */
     image :   url(:/images/up_arrow_disabled.png);
}
QSpinBox::down-button {
      subcontrol-origin: border;
      subcontrol-position: bottom right; /* position at bottom right corner */
      width :   16px ;
      border-image: url(:/images/spindown.png) 1;
      border-width: 1px;
      border-top-width: 0;
}
QSpinBox::down-button:hover {
      border-image: url(:/images/spindown_hover.png) 1;
}
QSpinBox::down-button:pressed {
      border-image: url(:/images/spindown_pressed.png) 1;
}
QSpinBox::down-arrow {
      image :   url(:/images/down_arrow.png);
      width :   7px ;
      height :   7px ;
}
QSpinBox::down-arrow:disabled,
QSpinBox::down-arrow:off { /* off state when value in min */
     image :   url(:/images/down_arrow_disabled.png);
}


结语
   

要想为软件设计一个漂亮的界面，需要灵活使用Qt样式表，不过这需要一定的CSS功底，还需要有美工经验。这一节只是简单介绍了下Qt中样式表的应用，只为抛砖引玉。大家也可以参考《QtCreator快速入门》第8章的相关内容，里面还涉及到了换肤、透明窗体、不规矩窗体等内容。


涉及到的代码：  myStyle.rar (1.66 KB, 下载次数: 0) 

文章标签：
前端开发
关键词：
Qt教程
Qt样式表
沧海一笑dj
目录
相关文章
花落已飘
|
6月前
|
存储 缓存 自然语言处理
QT基础教程(QMap和QHash)
QT基础教程(QMap和QHash)
花落已飘
610 0
五羟基己醛
|
1月前
|
编译器 区块链 C++
【QT速成】零基础快速入门QT6简明教程之环境配置（一）
QT教程一
五羟基己醛
56 1
【QT速成】零基础快速入门QT6简明教程之环境配置（一）
五羟基己醛
|
1月前
【QT速成】零基础快速入门QT6简明教程之布局管理（五）
QT5
五羟基己醛
83 1
五羟基己醛
|
1月前
【QT速成】零基础快速入门QT6简明教程之菜单栏图标的创建（四）
QT教程4
五羟基己醛
54 1
五羟基己醛
|
1月前
|
前端开发 数据安全/隐私保护 C++
【QT速成】零基础快速入门QT6简明教程之登陆对话框的实现（三）
QT教程3
五羟基己醛
29 1
五羟基己醛
|
1月前
【QT速成】零基础快速入门QT6简明教程之创建第一个窗口程序（二）
QT教程二
五羟基己醛
29 1
游客h2vchmlwqitbk
|
5月前
|
IDE 开发工具 数据安全/隐私保护
【干货】Qt Creator快速下载、安装、使用教程
【干货】Qt Creator快速下载、安装、使用教程
游客h2vchmlwqitbk
991 2
泡沫o0
|
6月前
|
数据可视化 算法 C++
C++ cmake工程引入qt6和Quick 教程
C++ cmake工程引入qt6和Quick 教程
泡沫o0
435 0
花落已飘
|
6月前
|
编译器 C++ 开发者
QT基础教程(QT Creator工程介绍)
QT基础教程(QT Creator工程介绍)
花落已飘
118 1
花落已飘
|
6月前
|
开发框架 IDE 开发工具
QT基础教程(Hello QT)
QT基础教程(Hello QT)
花落已飘
157 1

热门文章

最新文章

  • 1
    Qt Creator编译项目，报错，error: LNK1158: 无法运行“rc.exe”
  • 2
    Qt Creator指定临时文件生成目录(MOC_DIR/RCC_DIR等)和PWD/OUT_PWD/.pro官方文档
  • 3
    Qt核心剖析：信息隐藏(2)
  • 4
    QT刷屏函数
  • 5
    Visual Studio下程序开发: 编译QT程序Debug正常,Release出错
  • 6
    Qt开源作品1-视频流播放ffmpeg内核
  • 7
    使用qt实现简易示波器功能
  • 8
    【Qt 学习笔记】使用QtCreator创建及运行项目 | 项目初始代码解释
  • 9
    Qt实用技巧：自定义窗口标题栏
  • 10
    Qt编写的项目作品25-硬件综合应用(热敏打印+身份证+短信猫)
  • 1
    `pytest-qt` 是一个用于在 Qt 应用程序中进行 GUI 测试的 pytest 插件。
    188
  • 2
    好的资源-----打卡机+Arm+Qt+OpenCV嵌入式项目-基于人脸识别的考勤系统-----B站神经网络与深度学习，商城
    81
  • 3
    QT：基于QMediaPlayer制作的视频播放器(最下方有整合包，可直接运行)
    495
  • 4
    基于QT实现的拷贝文件以及实时进度条(简易版)
    502
  • 5
    【Qt应用开发】复刻经典：基于Qt实现Windows风格计算器（加减乘除、删除、归零功能全解析）
    143
  • 6
    基于QT实现的QQ聊天简易版（UDP通信版）
    105
  • 7
    基于QT实现的词典(附源码)
    90
  • 8
    Qt连接Mysql出现问题（一）：“Driver not loaded Driver not loaded“
    778
  • 9
    Qt问题（二）：无法定位程序输入点于动态链接库
    465
  • 10
    Qt中的网络编程（Tcp和Udp）运用详解以及简单示范案例
    663

    • 相关课程

    更多
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JS零基础入门教程（上册）
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • CSS基础教程

    • 推荐镜像

    更多
  • qt
  • kicad
  • raspberry-pi-os-images
    • 下一篇
    无影云桌面