软件层系统功能模块——系统程序窗口

books项目中使用的是对话框程序，对话框程序是Windows平台下比较常见的应用程序，本节中我将完成对话框的GUI设计工作。

对话框开发

在Qt Creator编辑窗口左侧单击"界面文件"，然后双击打开"dialog.ui"，进入对话框编辑界面，在这个页面中我们可以将控件直接拖入界面编辑区域中。根据books项目的需求，该项目的应用程序界面是一个登陆界面，同时如果有项目的最新资源可用时可完成程序的升级工作。所以在整个对话框编辑界面中，需要拖入两个Label组件用于显示"用户名"和"密码"文字说明(Label是存放静态文字的组件，适合作界面的文字说明)；在这两个组件右侧需要分别拖入一个Line Edit组件，用作输入(Line Edit组件与Text Edit、Plain Text Edit组件不同，它只接受单行纯文本格式的输入)；最后需要拖入一个Push Button按钮，用于表示确认登陆的按钮。因为该登陆界面中还需要完成程序的升级工作，所以需要拖入一个Label组件，只不过与前两个Label组件不同，它的内部文字已被清空，它需要根据升级文件和版本号状态为用户提示不同的升级信息，所以它的内容由代码动态确定；然后再添加一个"升级"按钮；最后加入Progress Bar进度条，将其Value的属性设为0。在对话框编辑界面中，可以拖动鼠标将各个组件排列整齐，也可以使用Layouts和Spacers组件来帮助对齐组件，它们分别表示组件布局和组件间隔。对话框的编辑界面如图1.1所示。在图1.1中需要特别注意红色框内部的"对象"那一列的内容，因为在使用代码对各个组件进行操作时，需要利用"对象"那一列的内容进行操作；在蓝色框内部可以对拖入到界面编辑区域内的组件进行更加详细的参数修改与设计。单击"运行"按钮或Ctrl+R快捷键，即可获得界面设计程序运行的结果。

图1.1 对话框编辑界面

资源管理

在Qt项目中添加的资源包括音频、视频、图片和图标资源等。图片和图标资源可以美化对话框，所以本项目中所要添加的资源即为图片和图标资源。

首先创建并引入资源。在Qt Creator运行界面中选择"新建文件或项目"菜单项，然后在"文件和类"列表框中选择Qt，接着选择Qt Resource File，确定后自行命名文件(如：resource)，完成后Qt Creator对话框中的"books项目"列表中将增加"资源"。右击resource.qrc，在弹出的快捷菜单中选择"添加现有文件"，然后选择images下面的所有文件，单击"确定"按钮，结果如图1.2所示。在资源文件images中可获得books项目中使用到的图片和图标资源。该资源包括1个logo图片；1个logo图标；2个程序运行状态图标，分别表示程序正常运行状态和故障状态。

图1.2 资源导入结果

接下来需要将导入的资源引入到对话框中。在Qt中，Label组件即可承载图片，从而将图片加入到对话框中。首先在对话框的顶部加入一个Label组件，并调整组件大小，删除组件中的内容，然后右击该Label组件，在弹出的快捷菜单中选择"改变样式表"，然后选择"添加资源"——"logo.png"，Logo图片即以url的形式出现在"编辑样式表"的对话框中，最后在url前加入代码"background:"，此时即完成了Logo图片的设置。Logo图片会直接显示到对话框中。

Qt为在界面设计方面的程序开发提供了多种可选的方式，允许使用css样式表优化界面，这是Qt在各种开发平台中所独有的特色。在登陆对话框空白处右击(注意，不要单击界面内的任何组件)，在弹出的快捷菜单中选择"改变样式表"，在编辑栏内输入css样式表，代码如下：

QLineEdit{
    border-style:solid;
    border-width:1px;
    border-radius:4px;
}
QDialog{
    background-color:white;
}

Qt支持针对每种组件进行css样式设计，例如：上述css代码即实现对QLineEdit进行边线和圆角化处理，将QDialog背景改为白色。我们可以利用css尝试制定个性化界面。

系统程序窗口设计完成后，程序的运行效果图如图1.3所示。

图1.3 样式处理后的程序界面

注：Qt原则上支持包括PNG、JPG等多种格式的图片，但对PNG格式的图片支持得最好，且没有任何附加要求。如果程序中使用JPG等其他格式的图片，则程序打包发布时要加上相应的DLL，否则图片在开发人员的计算机上可以正常显示，但在用户的计算机上则不能显示。