Qt Creator快速入门 第8章 界面外观.ppt

《Qt Creator快速入门》第2版第8章 界面外观 (1课时）一个完善的应用程序不仅应该有实用的功能，还要有一个漂亮的外观，这样才能使应用程序更加友善，更加吸引用户作为一个跨平台的UI开发框架，Qt提供了强大而灵活的界面外观设计机制这一章将学习在Qt中设计应用程序外观的相关知识，在本章开始会对Qt风格QStyle和调色板QPalette进行简单介绍，然后再对Qt样式表（Qt Style Sheets）进行重点讲解，最后还会涉及不规则窗体和透明窗体的实现方法主 要 内 容n8.1 Qt风格n8.2 Qt样式表n8.3 特殊效果窗体n8.4 小结8.1 Qt风格Qt中的各种风格是一组继承自QStyle的类QStyle类是一个抽象基类，它 封装了一个GUI的外观，Qt的内建（built-in）部件使用它来执行几乎所有的绘 制工作，以确保它们看起来可以像各个平台上的本地部件一样一些风格已经 内置在了Qt中，例如Windows风格和Motif风格；而有些风格只在特定的平台 上才有效，例如Windows XP风格、Windows Vista风格和Mac OS X风格 使用不同风格预览程序首先进入设计模式，可以先修改界面，然后打开“工具”→“界面编辑器”→“预 览于”菜单，这里列出了现在可用的几种风格，比如选择“CDE风格”，预览效 果如下图所示。

使用不同风格运行程序n如果想使用不同的风格来运行程序，那么只需要调用QApplication的setStyle()函数指定要使用的风格即可 例如，在main()函数的“QApplication a(argc, argv);”一行代码后添加如下一行代码：a.setStyle(new QMotifStyle);这时运行程序，便会使用Motif风格 n而如果不想整个应用程序都使用相同的风格，那么可以调用部件的setStyle()函数来指定该部件的风格 调色板调色板QPalette类包含了部件各种状态的颜色组一个调色板包含三种状态 ：激活（Active）、失效（Disabled）和非激活（Inactive）Qt中的所有 部件都包含一个调色板，并且使用各自的调色板来绘制它们自身，这样可以 使用户界面更容易配置，也更容易保持一致调色板中的颜色组包括：n激活颜色组QPalette::Active，用于获得键盘焦点的窗口；n非激活颜色组QPalette::Inactive，用于其他的窗口；n失效颜色组QPalette::Disabled，用于因为一些原因而不可用的部件（不是 窗口）要改变一个应用程序的调色板，可以先使用QApplication::palette()函数来获 取其调色板，然后对其进行更改，最后再使用QApplication::setPalette()函 数来使用该调色板。

更改了应用程序的调色板，会影响到该程序的所有窗口 部件如果要改变一个部件的调色板，可以调用该部件的palette()和 setPalette()函数，这样只会影响该部件及其子部件 示例： // 获取pushButton的调色板 QPalette palette1 = ui->pushButton->palette(); // 设置按钮文本颜色为红色 palette1.setColor(QPalette::ButtonText,Qt::red); // 设置按钮背景色为绿色 palette1.setColor(QPalette::Button,Qt::green); // pushButton使用修改后的调色板 ui->pushButton->setPalette(palette1); // 设置lineEdit不可用 ui->lineEdit->setDisabled(true); QPalette palette2 = ui->lineEdit->palette(); // 设置行编辑器不可用时的背景颜色为蓝色 palette2.setColor(QPalette::Disabled,QPalette::Base,Qt::blue); ui->lineEdit->setPalette(palette2);设置调色板颜色时可以使用setColor()函数，这个函数需要指定颜 色角色（Color Role）。

在QPalette中，颜色角色用来指定该颜 色所起的作用，例如是背景颜色或者是文本颜色等，主要的颜色 角色如下表所示 8.2 Qt样式表Qt样式表是一个可以自定义部件外观的十分强大的机制Qt样式表的 概念、术语和语法都受到了HTML的层叠样式表（Cascading Style Sheets，CSS）的启发，不过与CSS不同的是，Qt样式表应用于部件的世界nQt样式表概述nQt样式表语法n自定义部件外观和换肤Qt样式表概述样式表使用文本描述n可以使用QApplication::setStyleSheet()函数将其设置到整个应用程序上；n也可以使用QWidget::setStyleSheet()函数将其设置到一个指定的部件（还有它的子部件）上n如果在不同的级别都设置了样式表，那么Qt会使用所有有效的样式表，这被称为样式表的层叠 使用代码设置样式表例如： // 设置pushButton的背景为黄色 ui->pushButton->setStyleSheet(“background:yellow“); // 设置horizontalSlider的背景为蓝色 ui->horizontalSlider->setStyleSheet(“background:blue“);这样调用指定部件的setStyleSheet()函数只会对这个部件应用该样式表，如 果想对所有的相同部件都使用相同的样式表，那么可以在它们的父部件上设 置样式表。

比如这里两个部件都在MainWindow上，可以为MainWindow设 置样式表：setStyleSheet(“QPushButton{background:yellow}QSlider{background:blue}“);这样，以后再往主窗口上添加的所有QPushButton部件和QSlider部件的背 景色都会改为这里指定的颜色 在设计模式使用样式表进入设计模式在界面上点击鼠标右键，在弹出的菜单中选择“改变样式表” ，这时会出现编辑样式表对话框，在其中输入如下代码： QPushButton{}注意光标留在第一个大括号后然后点击上面“添加颜色”选项后面的下拉箭 头，在弹出的列表中选择“background-color”一项这时会弹出选择颜色对话框，大家可以随便选择一个颜色，然后点击“确定按 钮”，这时会自动添加代码：QPushButton{background-color: rgb(0, 85, 255);}根据选择的颜色不同，rgb()中的参数的数值也会不同可以看到，在这里设 置样式表不仅很便捷而且很直观，不仅可以设置颜色，还可以使用图片，使 用渐变颜色，或者更改字体相似的，可以再设置QSlider的背景色。

样式表语法样式规则：n样式表包含了一系列的样式规则，一个样式规则由一个选择符（selector）和一个声明 （declaration）组成选择符指定了受该规则影响的部件；声明指定了这个部件上要 设置的属性例如：QPushButton{color:red}在这个样式规则中，QPushButton是选择符，{color:red}是声明，而color是属性， red是值这个规则指定了QPushButton和它的子类应该使用红色作为它们的前景色 nQt样式表中一般不区分大小写，例如color、Color、COLOR和COloR表示相同的属性 只有类名，对象名和Qt属性名是区分大小写的n一些选择符可以指定相同的声明，只需要使用逗号隔开，例如：QPushButton,QLineEdit,QComboBox{color:red}n一个样式规则的声明部分是一些属性：值对组成的列表，它们包含在大括号中，使用 分号隔开例如：QPushButton{color:red;background-color:white}选择符类型Qt样式表支持在CSS2中定义的所有选择符下表列出了最常用的选择符类型 子控件对一些复杂的部件修改样式，可能需要访问它们的子控件，例如QComboBox的下拉按钮，还有QSpinBox的向上和向下的箭头等。

选择符可以包含子控件来对部件的特定子控件应用规则，例如：QComboBox::drop-down{image:url(dropdown.png)}这样的规则可以改变所有的QComboBox部件的下拉按钮的样式 伪状态n选择符可以包含伪状态来限制规则在部件的指定的状态上应用伪状态出现在选 择符之后，用冒号隔离，例如：QPushButton:hover{color:white}n这个规则表明当鼠标悬停在一个QPushButton部件上时才被应用伪状态可以使 用感叹号来表示否定，例如要当鼠标没有悬停在一个QRadioButton上时才应用 规则，那么这个规则可以写为：QRadioButton:!hover{color:red}n伪状态还可以多个连用，达到逻辑与效果，例如当鼠标悬停在一个被选中的 QCheckBox部件上时才应用规则，那么这个规则可以写为：QCheckBox:hover:checked{color:white}n如果有需要，也可以使用逗号来表示逻辑或操作，例如：QCheckBox:hover,QCheckBox:checked{color:white}冲突解决当几个样式规则对相同的属性指定了不同的值时就会产生冲突。

例如：QPushButton#okButton { color: gray }QPushButton { color: red }这样okButton的color属性便产生了冲突解决这个冲突的原则是：特殊的 选择符优先在这里，因为QPushButton#okButton一般代表一个单一的对 象，而不是一个类所有的实例，所以它比QPushButton更特殊，那么这时便 会使用第一个规则，okButton的文本颜色为灰色相似的，有伪状态比没有伪状态优先如果两个选择符的特殊性相同，则后 面出现的比前面的优先Qt样式表使用CSS2规范来确定规则的特殊性层叠样式表可以被设置在QApplication上，或者父部件上，或者子部件上部件有效的样式表是通过部件祖先的样 式表和QApplication上的样式表合并得到的当发生冲突时，部件自己的样式表优先于任何继承的样式表，同样，父部件的样式表优先于祖先的样式表 自定义部件外观当使用样式表时，每一个部件都被看做是拥有四个同心矩形的盒子，如下图 所示这四个矩形分别是内容（content）、填衬（padding）、边框（ border）和边距（margin）。

边距、边框宽度和填衬等属性的默认值都是0 ，这样四个矩形恰好重合 /****************主界面背景*******************/ QMainWindow{ /*背景图片*/ background-image: url(:/image/beijing01.png); } /****************按钮部件*******************/ QPushButton{ /*背景色*/ background-color: rgba(100, 225, 100, 30); /*边框样式*/ border-style: outset; /*边框宽度为4像素*/ border-width: 4px; /*边框圆角半径*/ border-radius: 10px; /*边框颜色*/ border-color: rgba(255, 225, 255, 30); /*字体*/ font: bold 14px; /*字体颜色*/ color:rg。