Qt编程入门（2）：窗口和布局（2）

窗口和布局是Qt主要的组成部分，Qt为此封装了至少几百个Class，要全部掌握这些Class是不现实的，也是不明智的。本章重点介绍几个常用的窗口和布局管理器的基本用法，只帮助起到一个引领入门的作用。对于更多的功能，还需要在实践中自己动手翻阅帮助文档。前面我们已经实现了一个全部为手写代码的窗口，这一章节就来学些Qt设计师快速窗口设计的强大功能。

本章将实现一个较为复杂的窗口，也是比较常见的窗口：配置管理窗口。这里只介绍窗口UI的实现，功能实现在此省略，有兴趣的同学可以自己下去作为练习来实现。先看效果图：

整个界面分上中下3个部分：
1、顶部为标题栏，实现图标、标题和退出按钮，我们自定义实现外观框架；
2、中间部分又分为左右两块，左边为导航按钮，右边为设置页面，为简单起见，只做了3个页面；
3、底部是操作按键，包含确定，取消和应用。这里不实现其功能，请大家下来后自行实现。

整体布局

打开Qt设计师，第一步我们应当做一个整体的规划设计。如下图，我已经做好了这样一个UI框架：

这里我建议将每个区域都使用QFrame容器来先行填充，就好比我们修房子一样，总得先画个草图吧。为什么不使用Layout呢？因为Layout在实际设计界面时不如QFrame拖动那么方便，多做几个这样的界面你就会深有体会。再看看类的关系：

Widget对象已经使用垂直布局管理器将三个QFrame窗口包含进来，并设置margin和space属性为0，这里的上下QFrame都设置了固定的高度，这样中间的区域就可以自由拉伸。

标题栏实现

图标
图标使用QLabel实现，设置相关属性如下：
最大尺寸和最小尺寸为24px;
pixmap设置图标图片；
scaleContent允许图片自动缩放以适应窗口大小。

标题文本
同样使用QLabel实现，分别设置字体和颜色。颜色在QWidget属性的styleSheet中设置color属性为白色字体。

退出按钮
采用QPushbutton类，设置相关属性如下：
最大和最小尺寸都限制在24px;
设置icon图标资源路径并限制大小为24px，同按钮一样大小；
设置styleSheet属性为background-color: transparent;，即设置背景透明，只显示图片；

标题栏
给标题栏设置一个不一样的背景颜色，在styleSheet属性中设置background-color: rgb(0, 85, 127);固定高度设置为28px。

布局管理
在标题文字和退出按钮中间加入一个“弹簧”按钮，当窗口尺寸变化的时候，它能保证退出按钮只会出现在最右边，标题文字只会在最左边紧靠图标的位置。当一切控件都“摆好”位置之后，选中titlebar窗口，选择水平布局。然后再次点击titlebar窗口，会发现多了一栏布局属性：

将这里的属性全部设置为0。
此时我们的标题栏已经有了，但是程序默认的标题栏还在，我们还需要额外加入点代码，去掉程序默认的标题栏，并将退出按钮和程序退出事件关联起来。在主程序的构造函数中，加入代码：

    setWindowFlags(windowFlags() | Qt::FramelessWindowHint);connect(ui->btnExit, SIGNAL(clicked(bool)), this, SLOT(close()));

第一行设置窗口为无边框窗口，第2行正如前面学习过的，将按钮的点击信号和主窗口的关闭槽关联，从而实现点击退出按钮时关闭程序。因为只有一个主窗口，所有当主窗口关闭时，Qt就会通知app自动退出。这里的connect也可以直接在Qt设计师界面中进行，首先我们需要切换设计模式到信号槽设计：

如上图，Qt设计师有4种设计模式，分别为窗口编辑，信号槽设计，伙伴窗口设计和窗口顺序设计，默认都是第一种窗口设计模式。我们切换到第2种信号槽模式。当鼠标在其中移动的时候，对应的窗口会被红色外边框包围，选择退出按钮并按住鼠标，拖动鼠标到设计窗口的外部再释放，出现信号连接配置窗口：

勾选“显示从QWidget继承的信号和槽”，会将QWidget的槽函数一并显示。这里我们选择btnExit按钮的clicked()信号，再选择Widget窗口的close()槽函数，点击确定就完成信号到槽函数的关联。
我们也可以在另外一个窗口中来增加或删除这些关联，见下图：

现在先运行一下程序，并点击关闭按钮试试看效果吧（也可以在设计器界面按下Alt+Shift+R进行预览）。
这个标题栏并不完善，至少还应该实现拖动功能，我们将在后面的章节实现标题栏的拖动功能。
题外话：作为一个开发者，总要时常给予自己一些奖励，当完成一个小功能时，运行并验收下成果，再赞美下自己勤劳的双手和聪明的大脑，算作给自己的鼓励。我们没有漂亮的程序员鼓励师，只能靠自己不停的安慰自己，相信付出总会有收获！

中间区域

中间区域包括两部分：左边导航和右边属性页。

导航
这里我采用QListWidget控件实现。拖动控件到左边区域，双击控件会弹出子项设置框。先添加3项并设置对应的图标。返回到QListWidget控件并设置好下列属性值：
设置spacing属性，给每项增加一个间隔4px;
设置iconSize属性为32*32，字体设置为新宋体12号，这样图标就变的比较合适；
设置currentRow属性为0，默认选择第一项。

属性页
拖动QStackedWidget控件到右边作为属性页的框架。QStackedWidget控件是一个控件容器，它实现了分页显示属性页面的效果。这里只需要实现3个属性页即可，默认Qt设计师已经为我们创建了两个属性页，在控件上点击鼠标右键，选择插入页创建第3个属性页。请分别在3个属性页上设计一个配置管理界面，关于拖动控件设计界面实在太简单，它不是我们这个入门课程应该讲解的内容。

此处省略1000字…

设置好属性页面后，将QListWidget属性currentIndex设置为0，默认选择第一项，使得显示和QListWidget一致。切换到信号槽模式，点击QListWidget控件按住鼠标并拖动到QStackedWidget控件上，在弹出的设置界面中将currentRowChanged(int)和setCurrentIndex(int)槽关联，此时点击QListWidget控件将触发currentRowChanged()信号，然后调用QStackedWidget的setCurrentIndex()函数，切换属性页面。

此时还剩下最后一步，将中间区域所在的QFrame设置为左右布局，然后按下Alt+Shift+R看看效果吧！

控制栏区域

控制区域包含3个按钮控件，分别拖入到底部的QFrame容器中。
如果觉得字体太小，可以设置font属性改变字体。如果需要将3个控件的字体设置一样，没有必要对每个按钮都分别进行设置，只需要将父窗口QFrame的字体改变就可以。3个按钮应该摆放在右边，左边拖入一个水平“弹簧”控件，占用多余的空间，然后对父窗口QFrame进行水平布局，并微调布局管理器。设置属性如下：

只保留右边的margin为6px，其余都设置为0。设置Spacing为12px增大控件之间的间隔。
至此，一个稍微有点复杂的界面总算大功告成了，准备犒劳犒劳自己吧！

好吧，应该停下来喝口茶了，作为一个程序员，养成常喝茶水是一个不错的习惯，能帮助我们的身体排出一些长时间坐在电脑面前产生的垃圾物。

编译运行一下程序，看看效果如何。