《Qt5 C++ GUI Programming cook book 》笔记 1

一，前言

第一章，使用QT Designer 和QT Quick Designer自定义设计用户界面

第二章，通过增强的状态机框架和动画框架，制作用户界面动画。

第三章，使用QT内建的类绘制矢量和位图。

第四章，整合OpenGl到QT项目，演示如何渲染3d图形。

第五章，创建一个触屏软件，展示QT再触屏设备上的使用。

第六章，分析XML格式的数据，并且结合谷歌API创造一个简单的地址寻找器。

第七章，使用QT内建的类和第三方程序，转换不同类型的变量图片格式和视频格式。

第八章，接入数据库，使用QT连接一个SQL数据库。

第九章，使用QT WEB ENGINE开发一套网络应用。

在 htttp://www.packtpub.com注册并下载本书的案例。

第一章：观察和感受自定义

主题：

      使用QT Designer的样式表

       基本样式表的定义

      使用样式表创建登录界面

      在样式表中调用资源

      自定义属性和子层级控制

      QML中的风格化

      C++引用QML的物体对象

在QT中，我们可以使用一个非常熟悉的方法设计程序用户界面。QT不仅给我们提供了不需要写代码就能设计用户界面的工具-QT Designer,而且还给高级用户提供了一个自定义QT样式表的脚本语言。

在这个例子中，通过使用样式表资源改善我们的项目并且使项目看起来更加的专业。QT提供了一个叫做QT 样式表的语言来装饰用户界面，特别像装饰网页用的css。

1，打开QT Creat 创建一个新项目。第一次使用QT Create 可以点击New Project边上的+号，或者file-new file/new project

2,选择project 窗口下的Application ,然后选择QT WIdgets Application.

3,点解选择按钮，然后会弹出一个填写名字和位置的窗口。

4，填写完成后，点击下一步，并点击完成按钮创建项目。现在都保持默认吧，我们会在未来的某一刻去讨论这个事。弹开的界面中，你会看到左侧成吨的大图标，这个区域叫做选择器模式窗口。

5，在靠近选择器模式组边上罗列着我们的资源。这是我们选择文件并进行编辑的地方，选中mainwindow.ui。

6，双击mainwindow.ui  ，将出现一个完全不同的画面。当QT侦测到你试图打开.UI扩展文件时候，QT自动打开了面向UI的脚本编辑器。

7，模式选择器会从高亮的EDIT转换到Design按钮。你也可以点击上面的按钮切回。

8，让我们回到QT DESIGNER并且看一下mainwindow.ui文件。这是一个默认的最基本的项目主窗口。点击模式选择器底部的绿色RUN按钮，进行编译，当编译完成的时候，你可以看到一个弹出的空窗口。

9，现在，在widgetbox的button分类里面，点击并拖动 pushbutton 项目到程序mainwindow 的UI中。当选中按钮的时候，可以在窗口的右侧属性面板看到pushbutton的属性列表。向下滑动到中间位置，找到一个叫做style sheet的属性。这就是widget应用风格的地方，是不是会继承取决于如何应用样式表。或者，你可以在form编辑器中右键点击ui中的任何部件，在弹出的菜单栏中选择改变样式表选项。

10.可以直接写入脚本，也可以点击旁边的输入框打开编辑样式表窗口，在窗口里可以写入更长的样式表代码。当不记得属性名字的时候，可以使用窗口顶部的比如 add resource,add gradient,add color,add font等按钮。

让我们使用编辑样式表窗口做一些简单的 样式吧！

11，点击add color并选择颜色。

12，在颜色拾取窗口选择一个随机颜色，比如说纯红色。然后点击ok.

13,这时候在样式编辑窗口会出现一条代码，我的是这样的：

color:rgb(255,0,0);

14,点击ok，你会发现按钮上的文字已经成为了红色。 

我们来快速认识一下窗口。

 1，菜单栏：菜单栏提供了一些基本功能，比如创建新项目，保存文件，撤销，重做，复制，粘贴等等。同样也接入了比如编译，调试工具，分析工具等等开发工具。

2，部件盒子：这里存放qt desiger提供的所有不同种类的部件。通过点击并拖动，可以将部件拖动到form editor.

3,模式选择器：这个侧面面板里存放的快捷键可以很容易的接入不同的工具。通过点击Edit 和Design按钮，可以很容易的在script editor和 form editor之间进行切换，在面向多个任务的时候这样很方便。你也可以通过这样的方式在调试器和分析器工具间进行切换。

4，编译快捷键：编译快捷键放置模式编辑器的底部。通过这里的快捷键，可以快速的建立，运行，调试项目。

5，形式编辑器：这是可以编辑程序UI的地方，通过在部件盒子里选中部件，并拖动部件的方式，添加到这个窗口。

6，形式工具栏：通过这个工具栏，可以快速的选择不同的形式进行编辑，前四个是形式的不同切换，后面的工具是对部件的布局起作用。

7，对象检查器：这里列举了UI文件中所有的部件。所有的部件以父子关系的方式存在。可以选择相应的部件查看他的属性。

8，属性编辑器：当选择部件后，这里显示部件的所有属性。

9，动作编辑器和信号槽编辑器：这里包含两个编辑器。动作编辑器和信号槽编辑器在窗口的下面接入。在你的程序ui中，可以在动作编辑器中想菜单栏或者工具栏添加动作。

10，输出面板：输出面板由不同的显示信息和相互出信息窗口组成，都是编译和调试的相关信息。

通过按下带有数字的按钮，比如1-ISSUES,2-Search Results,3-Application Output等等，来切换不同的输出面板。

 QTCreate提供了 script editor和QT designer.一个写代码，一个做界面设计。

Qt Style Sheets与CSS：

CSS: h1{color:red;background-color:white;}
Qt Style Sheets:QLineEdit{color:red;background-color:white;}

都包含选择器和修饰符，每个修饰符包含一个属性和值，冒号分开。

在Qt中，可以通过C++的QObject::setStyleSheet()函数将样式表应用到一个单独的部件上。比如：myPushButton->setStyleSheet("color:blue");  这句代码可以将一个myPushButton变量名的按钮的文字变成蓝色显示。

Qt 样式表支持所有的CSS2选择器，比如统一选择器，类型选择器，类选择器，Id选择器等等。我们可以将样式应用到具体的单独一组部件上。比如：如果我们想要修改一个对象名为 usernameEdit的对象，我们可以使用ID选择器 QLineEdit#usernameEdit{ background-color:blue }

可以参看：http://www.w3.org/TR/REC-CSS2/selector.html

从上面的例子学会了应用样式表到部件。这次让我们更大胆一些，应用到所有的部件。

1，首先，我们移除所有效果，点击样式表旁边的箭头，清空样式表。

2，添加更多的部件：line edit ,combo box, horizontal slider,radio button,check box.

3,为了简化操作，删除menu bar,main toolbar,status bar.在物体列表框，右键单击选择remove.

打开mainwindow主窗口的样式表，输入代码

border: 2px solid gray;
border-radius:10px;
padding:0 8px;
background:yellow;

所有的子层级都受到了影响

 

我们可以修改部分来显示

QPushButton{
border: 2px solid gray;
border-radius:10px;
padding:0 8px;
background:yellow;
}

7

 

 7,我们将效果特指了QPushButton类，所以只有按钮类变成了这样。如果我们再进一步改变，找到其中的一个按钮名字

QPushButton#pushButton{
border: 2px solid gray;
border-radius:10px;
padding:0 8px;
background:yellow;
}

再进一步

 

QPushButton{
border:2px solid red;
}
QPushButton#pushButton{
border: 2px solid gray;
border-radius:10px;
padding:0 8px;
background:yellow;
}
QPushButton#pushButton_2{
border: 2px solid red;
color:red;
border-radius:10px;
padding:0 8px;
background:yellow;
}
QPushButton#pushButton_3{
border-radius:10px;
padding:0 8px;
background:blue;
color:white;
}

 再进一步

*{
   background:qradialgradient(cs:0.3,cy:-0.4,fx:0.3,fy:-o.4,radius:1.35,
                 stop:0 #fff,stop:1 #888);
   color:rgb(255,255,255);
   border:1px solid #ffffff;
}

越具体，影响力越大。

当修改对象名字的时候，记得同样需要修改样式表的名字。