资源描述
1Qt Creator快速入门快速入门第第2版版第第8 8章章 界面外观界面外观(1课时）2 一个完善的应用程序不仅应该有实用的功能，还要有一个完善的应用程序不仅应该有实用的功能，还要有一个漂亮的外观，这样才能使应用程序更加友善，更加吸一个漂亮的外观，这样才能使应用程序更加友善，更加吸引用户。引用户。作为一个跨平台的作为一个跨平台的UI开发框架，开发框架，Qt提供了强大而灵活提供了强大而灵活的界面外观设计机制。这一章将学习在的界面外观设计机制。这一章将学习在Qt中设计应用程序中设计应用程序外观的相关知识，在本章开始会对外观的相关知识，在本章开始会对Qt风格风格QStyle和调色和调色板板QPalette进行简单介绍，然后再对进行简单介绍，然后再对Qt样式表（样式表（Qt Style Sheets）进行重点讲解，最后还会涉及不规则窗体和透）进行重点讲解，最后还会涉及不规则窗体和透明窗体的实现方法。明窗体的实现方法。3主主 要要 内内 容容n8.1 Qt风格风格n8.2 Qt样式表样式表n8.3 特殊效果窗体特殊效果窗体n8.4 小结小结48.1 Qt风格风格 Qt中的各种风格是一组继承自中的各种风格是一组继承自QStyle的类。的类。QStyle类是一个抽象基类，它类是一个抽象基类，它封装了一个封装了一个GUI的外观，的外观，Qt的内建（的内建（built-in）部件使用它来执行几乎所有的绘）部件使用它来执行几乎所有的绘制工作，以确保它们看起来可以像各个平台上的本地部件一样。一些风格已经制工作，以确保它们看起来可以像各个平台上的本地部件一样。一些风格已经内置在了内置在了Qt中，例如中，例如Windows风格和风格和Motif风格；而有些风格只在特定的平台风格；而有些风格只在特定的平台上才有效，例如上才有效，例如Windows XP风格、风格、Windows Vista风格和风格和Mac OS X风格。风格。5使用不同风格预览程序使用不同风格预览程序 首先进入设计模式，可以先修改界面，然后打开首先进入设计模式，可以先修改界面，然后打开“工具工具”“界面编辑界面编辑器器”“预览于预览于”菜单，这里列出了现在可用的几种风格，比如选择菜单，这里列出了现在可用的几种风格，比如选择“CDE风格风格”，预览效果如下图所示。，预览效果如下图所示。6使用不同风格运行程序使用不同风格运行程序n如果想使用不同的风格来运行程序，那么只需要调用如果想使用不同的风格来运行程序，那么只需要调用QApplication的的setStyle()函数指定要使用的风格即可。函数指定要使用的风格即可。例如，在例如，在main()函数的函数的“QApplication a(argc,argv);”一行代码后添加一行代码后添加如下一行代码：如下一行代码：a.setStyle(new QMotifStyle);这时运行程序，便会使用这时运行程序，便会使用Motif风格。风格。n而如果不想整个应用程序都使用相同的风格，那么可以调用部件的而如果不想整个应用程序都使用相同的风格，那么可以调用部件的setStyle()函数来指定该部件的风格。函数来指定该部件的风格。7调色板调色板 调色板调色板QPalette类包含了部件各种状态的颜色组。一个调色板包含三种状态：类包含了部件各种状态的颜色组。一个调色板包含三种状态：激活（激活（Active）、失效（）、失效（Disabled）和非激活（）和非激活（Inactive）。）。Qt中的所有部中的所有部件都包含一个调色板，并且使用各自的调色板来绘制它们自身，这样可以使件都包含一个调色板，并且使用各自的调色板来绘制它们自身，这样可以使用户界面更容易配置，也更容易保持一致。调色板中的颜色组包括：用户界面更容易配置，也更容易保持一致。调色板中的颜色组包括：n激活颜色组激活颜色组QPalette:Active，用于获得键盘焦点的窗口；，用于获得键盘焦点的窗口；n非激活颜色组非激活颜色组QPalette:Inactive，用于其他的窗口；，用于其他的窗口；n失效颜色组失效颜色组QPalette:Disabled，用于因为一些原因而不可用的部件（不是，用于因为一些原因而不可用的部件（不是窗口）。窗口）。要改变一个应用程序的调色板，可以先使用要改变一个应用程序的调色板，可以先使用QApplication:palette()函数来函数来获取其调色板，然后对其进行更改，最后再使用获取其调色板，然后对其进行更改，最后再使用QApplication:setPalette()函数来使用该调色板。更改了应用程序的调色板，会影响到该程序的所有窗函数来使用该调色板。更改了应用程序的调色板，会影响到该程序的所有窗口部件。如果要改变一个部件的调色板，可以调用该部件的口部件。如果要改变一个部件的调色板，可以调用该部件的palette()和和setPalette()函数，这样只会影响该部件及其子部件。函数，这样只会影响该部件及其子部件。8示例：示例：/获取获取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中，颜色角色用来指定该颜中，颜色角色用来指定该颜色所起的作用，例如是背景颜色或者是文本颜色等，主要的颜色色所起的作用，例如是背景颜色或者是文本颜色等，主要的颜色角色如下表所示。角色如下表所示。98.2 Qt样式表样式表Qt样式表是一个可以自定义部件外观的十分强大的机制。样式表是一个可以自定义部件外观的十分强大的机制。Qt样式表的样式表的概念、术语和语法都受到了概念、术语和语法都受到了HTML的层叠样式表（的层叠样式表（Cascading Style Sheets，CSS）的启发，不过与）的启发，不过与CSS不同的是，不同的是，Qt样式表应用于部样式表应用于部件的世界。件的世界。nQt样式表概述样式表概述nQt样式表语法样式表语法n自定义部件外观和换肤自定义部件外观和换肤10Qt样式表概述样式表概述 样式表使用文本描述。样式表使用文本描述。n可以使用可以使用QApplication:setStyleSheet()函数将其设置到函数将其设置到整个应用程序上；整个应用程序上；n也可以使用也可以使用QWidget:setStyleSheet()函数将其设置到一函数将其设置到一个指定的部件（还有它的子部件）上。个指定的部件（还有它的子部件）上。n如果在不同的级别都设置了样式表，那么如果在不同的级别都设置了样式表，那么Qt会使用所有有会使用所有有效的样式表，这被称为样式表的层叠。效的样式表，这被称为样式表的层叠。11使用代码设置样式表使用代码设置样式表例如：例如：/设置设置pushButton的背景为黄色的背景为黄色ui-pushButton-setStyleSheet(background:yellow);/设置设置horizontalSlider的背景为蓝色的背景为蓝色ui-horizontalSlider-setStyleSheet(background:blue);这样调用指定部件的这样调用指定部件的setStyleSheet()函数只会对这个部件应用该样式表，如函数只会对这个部件应用该样式表，如果想对所有的相同部件都使用相同的样式表，那么可以在它们的父部件上设果想对所有的相同部件都使用相同的样式表，那么可以在它们的父部件上设置样式表。比如这里两个部件都在置样式表。比如这里两个部件都在MainWindow上，可以为上，可以为MainWindow设设置样式表：置样式表：setStyleSheet(QPushButtonbackground:yellowQSliderbackground:blue);这样，以后再往主窗口上添加的所有这样，以后再往主窗口上添加的所有QPushButton部件和部件和QSlider部件的背部件的背景色都会改为这里指定的颜色。景色都会改为这里指定的颜色。12在设计模式使用样式表在设计模式使用样式表 进入设计模式。在界面上点击鼠标右键，在弹出的菜单中选择进入设计模式。在界面上点击鼠标右键，在弹出的菜单中选择“改变样式改变样式表表”，这时会出现编辑样式表对话框，在其中输入如下代码：，这时会出现编辑样式表对话框，在其中输入如下代码：QPushButton 注意光标留在第一个大括号后。然后点击上面注意光标留在第一个大括号后。然后点击上面“添加颜色添加颜色”选项后面的下拉选项后面的下拉箭头，在弹出的列表中选择箭头，在弹出的列表中选择“background-color”一项。一项。这时会弹出选择颜色对话框，大家可以随便选择一个颜色，然后点击这时会弹出选择颜色对话框，大家可以随便选择一个颜色，然后点击“确定确定按钮按钮”，这时会自动添加代码：，这时会自动添加代码：QPushButtonbackground-color:rgb(0,85,255);根据选择的颜色不同，根据选择的颜色不同，rgb()中的参数的数值也会不同。可以看到，在这里设中的参数的数值也会不同。可以看到，在这里设置样式表不仅很便捷而且很直观，不仅可以设置颜色，还可以使用图片，使置样式表不仅很便捷而且很直观，不仅可以设置颜色，还可以使用图片，使用渐变颜色，或者更改字体。相似的，可以再设置用渐变颜色，或者更改字体。相似的，可以再设置QSlider的背景色。的背景色。13样式表语法样式表语法样式规则：样式规则：n样式表包含了一系列的样式规则，一个样式规则由一个选择符（样式表包含了一系列的样式规则，一个样式规则由一个选择符（selector）和一个声）和一个声明（明（declaration）组成。选择符指定了受该规则影响的部件；声明指定了这个部件上）组成。选择符指定了受该规则影响的部件；声明指定了这个部件上要设置的属性。例如：要设置的属性。例如：QPushButtoncolor:red在这个样式规则中，在这个样式规则中，QPushButton是是选择符选择符，color:red是是声明声明，而，而color是是属性属性，red是是值值。这个规则指定了。这个规则指定了QPushButton和它的子类应该使用红色作为它们的前景色。和它的子类应该使用红色作为它们的前景色。nQt样式表中一般不区分大小写，例如样式表中一般不区分大小写，例如color、Color、COLOR和和COloR表示相同的属表示相同的属性。只有类名，对象名和性。只有类名，对象名和Qt属性名是区分大小写的。属性名是区分大小写的。n一些选择符可以指定相同的声明，只需要使用逗号隔开，例如：一些选择符可以指定相同的声明，只需要使用逗号隔开，例如：QPushButton,QLineEdit,QComboBoxcolor:redn一个样式规则的声明部分是一些属性：值对组成的列表，它们包含在大括号中，使用一个样式规则的声明部分是一些属性：值对组成的列表，它们包含在大括号中，使用分号隔开。例如：分号隔开。例如：QPushButtoncolor:red;background-color:white14选择符类型选择符类型Qt样式表支持在样式表支持在CSS2中定义的所有选择符。下表列出了最常用的选择符类型。中定义的所有选择符。下表列出了最常用的选择符类型。15子控件子控件 对一些复杂的部件修改样式，可能需要访问它们的子控件，例如对一些复杂的部件修改样式，可能需要访问它们的子控件，例如QComboBox的下拉按钮，还有的下拉按钮，还有QSpinBox的向上和向下的箭头等。的向上和向下的箭头等。选择符可以包含子控件来对部件的特定子控件应用规则，例如：选择符可以包含子控件来对部件的特定子控件应用规则，例如：QComboBox:drop-downimage:url(dropdown.png)这样的规则可以改变所有的这样的规则可以改变所有的QComboBox部件的下拉按钮的样式。部件的下拉按钮的样式。16伪状态伪状态n选择符可以包含伪状态来限制规则在部件的指定的状态上应用。伪状态出现在选选择符可以包含伪状态来限制规则在部件的指定的状态上应用。伪状态出现在选择符之后，用冒号隔离，例如：择符之后，用冒号隔离，例如：QPushButton:hovercolor:whiten这个规则表明当鼠标悬停在一个这个规则表明当鼠标悬停在一个QPushButton部件上时才被应用。伪状态可以使部件上时才被应用。伪状态可以使用感叹号来表示否定，例如要当鼠标没有悬停在一个用感叹号来表示否定，例如要当鼠标没有悬停在一个QRadioButton上时才应用上时才应用规则，那么这个规则可以写为：规则，那么这个规则可以写为：QRadioButton:!hovercolor:redn伪状态还可以多个连用，达到逻辑与效果，例如当鼠标悬停在一个被选中的伪状态还可以多个连用，达到逻辑与效果，例如当鼠标悬停在一个被选中的QCheckBox部件上时才应用规则，那么这个规则可以写为：部件上时才应用规则，那么这个规则可以写为：QCheckBox:hover:checkedcolor:whiten如果有需要，也可以使用逗号来表示逻辑或操作，例如：如果有需要，也可以使用逗号来表示逻辑或操作，例如：QCheckBox:hover,QCheckBox:checkedcolor:white17冲突解决冲突解决 当几个样式规则对相同的属性指定了不同的值时就会产生冲突。例如：当几个样式规则对相同的属性指定了不同的值时就会产生冲突。例如：QPushButton#okButton color:gray QPushButton color:red 这样这样okButton的的color属性便产生了冲突。解决这个冲突的原则是：特殊的属性便产生了冲突。解决这个冲突的原则是：特殊的选择符优先。在这里，因为选择符优先。在这里，因为QPushButton#okButton一般代表一个单一的对一般代表一个单一的对象，而不是一个类所有的实例，所以它比象，而不是一个类所有的实例，所以它比QPushButton更特殊，那么这时便更特殊，那么这时便会使用第一个规则，会使用第一个规则，okButton的文本颜色为灰色。的文本颜色为灰色。相似的，有伪状态比没有伪状态优先。如果两个选择符的特殊性相同，则后相似的，有伪状态比没有伪状态优先。如果两个选择符的特殊性相同，则后面出现的比前面的优先。面出现的比前面的优先。Qt样式表使用样式表使用CSS2规范来确定规则的特殊性。规范来确定规则的特殊性。18层叠层叠 样式表可以被设置在样式表可以被设置在QApplication上，或者父部件上，上，或者父部件上，或者子部件上。部件有效的样式表是通过部件祖先的样式或者子部件上。部件有效的样式表是通过部件祖先的样式表和表和QApplication上的样式表合并得到的。上的样式表合并得到的。当发生冲突时，部件自己的样式表优先于任何继承的当发生冲突时，部件自己的样式表优先于任何继承的样式表，同样，父部件的样式表优先于祖先的样式表。样式表，同样，父部件的样式表优先于祖先的样式表。19自定义部件外观自定义部件外观 当使用样式表时，每一个部件都被看做是拥有四个同心矩形的盒子，如下图当使用样式表时，每一个部件都被看做是拥有四个同心矩形的盒子，如下图所示。这四个矩形分别是内容（所示。这四个矩形分别是内容（content）、填衬（）、填衬（padding）、边框）、边框（border）和边距（）和边距（margin）。边距、边框宽度和填衬等属性的默认值都是）。边距、边框宽度和填衬等属性的默认值都是0，这样四个矩形恰好重合。，这样四个矩形恰好重合。20/*主界面背景主界面背景*/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:rgba(0,0,0,100);/*填衬填衬*/padding:6px;21/*鼠标悬停在按钮上时鼠标悬停在按钮上时*/QPushButton:hover background-color:rgba(100,255,100,100);border-color:rgba(255,225,255,200);color:rgba(0,0,0,200);/*按钮被按下时按钮被按下时*/QPushButton:pressed background-color:rgba(100,255,100,200);border-color:rgba(255,225,255,30);border-style:inset;color:rgba(0,0,0,100);/*滑块部件滑块部件*/*水平滑块的手柄水平滑块的手柄*/QSlider:handle:horizontal image:url(:/image/sliderHandle.png);/*水平滑块手柄以前的部分水平滑块手柄以前的部分*/QSlider:sub-page:horizontal /*边框图片边框图片*/border-image:url(:/image/slider.png);22实现换肤功能实现换肤功能 Qt样式表可以存放在一个以样式表可以存放在一个以.qss为后缀的文件中，这样我们就可以在为后缀的文件中，这样我们就可以在程序中调用不同的程序中调用不同的.qss文件来实现换肤的功能。文件来实现换肤的功能。例如通过下面的代码使用样式表：例如通过下面的代码使用样式表：QFile file(:/qss/my.qss);/只读方式打开该文件只读方式打开该文件file.open(QFile:ReadOnly);/读取文件全部内容，使用读取文件全部内容，使用tr()函数将其转换为函数将其转换为QString类型类型QString styleSheet=tr(file.readAll();/为为QApplication设置样式表设置样式表qApp-setStyleSheet(styleSheet);这里读取了这里读取了Qt样式表文件中的内容，然后为应用程序设置了样式表。样式表文件中的内容，然后为应用程序设置了样式表。在换肤按钮中这样设置：在换肤按钮中这样设置：void MainWindow:on_pushButton_clicked()QFile file(:/qss/my1.qss);file.open(QFile:ReadOnly);QString styleSheet=tr(file.readAll();qApp-setStyleSheet(styleSheet);现在可以运行程序了，当大家按下按钮后，便会更改界面的外观，这现在可以运行程序了，当大家按下按钮后，便会更改界面的外观，这样就实现了换肤功能。样就实现了换肤功能。238.3 特殊效果窗体特殊效果窗体n不规则窗体不规则窗体n透明窗体透明窗体24不规则窗体不规则窗体 Qt中提供了部件遮罩（中提供了部件遮罩（mask）来实现不规则窗体。例如：）来实现不规则窗体。例如：n先在构造函数中添加如下代码：先在构造函数中添加如下代码：QPixmap pix;pix.load(:/image/yafeilinux.png);/加载图片加载图片resize(pix.size();/设置窗口大小为图片大小设置窗口大小为图片大小setMask(pix.mask();/为窗口设置遮罩为窗口设置遮罩n然后在然后在paintEvent()函数中将图片绘制在窗口上：函数中将图片绘制在窗口上：void Widget:paintEvent(QPaintEvent*)QPainter painter(this);/从窗口左上角开始绘制图片从窗口左上角开始绘制图片 painter.drawPixmap(0,0,QPixmap(:/image/yafeilinux.png);25透明窗体透明窗体方式一：使用方式一：使用setWindowOpacity()函数。例如：函数。例如：构造函数里添加一行代码：构造函数里添加一行代码：setWindowOpacity(0.3);使用使用setWindowOpacity()函数就可以实现窗口的透明效果，它的参数取值范函数就可以实现窗口的透明效果，它的参数取值范围为围为0.0-1.0，当取值为，当取值为0.0时完全透明，取值为时完全透明，取值为1.0时完全不透明。时完全不透明。26方式二：使用方式二：使用setAttribute()函数。例如：函数。例如：在构造函数中下面两行代码：在构造函数中下面两行代码：setWindowFlags(Qt:FramelessWindowHint);setAttribute(Qt:WA_TranslucentBackground);这里使用了这里使用了setAttribute()函数指定窗口的函数指定窗口的Qt:WA_TranslucentBackground属属性，它可以使窗体背景透明，而其中的部件不受影响。不过在性，它可以使窗体背景透明，而其中的部件不受影响。不过在Windows下，还下，还要使用要使用setWindowFlags()函数指定函数指定Qt:FramelessWindowHint标志，这样才标志，这样才能实现透明效果。能实现透明效果。27方式三：在方式二的基础上修改重绘事件。例如：方式三：在方式二的基础上修改重绘事件。例如：进行进行paintEvent()函数的定义：函数的定义：void Widget:paintEvent(QPaintEvent*)QPainter painter(this);painter.fillRect(rect(),QColor(255,255,255,100);这里先使用这里先使用rect()函数获取窗口的内部矩形，它不包含任何边框。然函数获取窗口的内部矩形，它不包含任何边框。然后使用半透明的白色对这个矩形进行填充。后使用半透明的白色对这个矩形进行填充。288.4 小结小结 本章要掌握最基本的更改部件样式的方法。通本章要掌握最基本的更改部件样式的方法。通过综合使用本章讲到的这些知识，应该可以实过综合使用本章讲到的这些知识，应该可以实现一些简单的界面效果。重点掌握现一些简单的界面效果。重点掌握Qt样式表的样式表的用法。用法。n如何使用如何使用Qt调色板？调色板？nQt样式表语法主要包含哪几部分？样式表语法主要包含哪几部分？nQt样式表中的盒子模型？样式表中的盒子模型？n在在Qt中如何实现不规则窗体？中如何实现不规则窗体？
展开阅读全文