一、项目概述

本项目是一个基于QT框架实现的天气预报应用，通过向天气API平台发送HTTP请求得到近七日天气JSON数据包并进行解析，最终以精美的界面显示给用户天气数据。通过学习本项目读者能够了解如何通过布局管理，将各类控件层次分明，有序美观的组织起来；能够使用QNetworkAccessManager类发起HTTP请求，并熟练进行JSON数据包解析。本项目实现的核心功能如下：

1. HTTP请求与数据解析
2. 更新UI界面图像及文本
3. 根据城市名搜索天气
4. 天气温度曲线绘制

项目视频演示

二、开发环境与工具

在本次 串口调试项目开发过程中，所使用的开发环境与工具如下：

1. 操作系统：Windows 10
2. QT 版本：QT 5.8.0
3. 编译器：MinGW_32bit
4. 开发工具：QT Creator 4.2.1（Community）

三、界面设计与布局

1. 界面分区与布局

如上图所示，应用整体布局分为4个区域，分别是搜索区、今日天气区、天气指标区和近期天气区，各区域内容后文详细介绍。现在重点介绍整体界面布局，在进行UI布局时一般首先根据功能将项目分为不同的区，如本项目就分为4个区域，每个区域分配一个Widget容器，这样便于我们后续进行布局管理。对于近期天气区，又有不同的区域，同样，我们将该区域分为6个子区域，每个子区域分配一个Widget，就像我们写文章一样，需要按照层级关系去设置目录，同样UI布局也是如此。

对每一个区域使用Widget进行管理的好处是当我们进行整体布局时，各个子Widget中的控件不会乱跑，我们只需要管理好各个区域的子布局，然后对各个区域选择合适的布局即可。如本项目将4个区域直接应用垂直布局，这样各个Widget就竖直分布了。

2. 搜索区

如上图所示，搜索区域主要包括行文本编辑区(QLineEdit)、按钮(QPushButton)、时间标签(QLabel)、星期标签(QLabel)。其中行文本编辑区和按钮使用到了QSS美化，下面就通过QT的帮助文档来学习如何美化控件：
Qt Style Sheet（简称 QSS）是 Qt 框架中用于美化界面的样式表技术，其语法设计借鉴了 Web 前端的CSS（Cascading Style Sheets），但针对 Qt 的控件体系做了专门适配。通过 QSS，我们无需修改控件的 C++ 代码，即可快速定制控件的外观（如颜色、字体、边框、布局等），实现界面与逻辑的解耦，大幅提升 Qt 应用的视觉表现力。

（1）QLineEdit
首先，在QT的帮助文档中搜索Qt Style Sheet (QSS)，点击Qt Style Sheets Examples查看使用示例，其中记录了各个控件的使用例子，我们从示例中学习。

如下图所示，找到QLineEdit,我们重点关注这个例子程序：

/* 为所有QLineEdit及其子类控件设置样式 */
QLineEdit {
    /* 设置边框：2px宽的实线，灰色 */
    border: 2px solid gray;
    /* 设置边框圆角半径为10px（使输入框呈现圆角效果） */
    border-radius: 10px;
    /* 设置内边距：上下0px，左右8px（控制输入文本与边框的距离） */
    padding: 0 8px;
    /* 设置输入框背景色为黄色 */
    background: yellow;
    /* 设置选中文本时的背景色为深灰色 */
    selection-background-color: darkgray;
}

我们简单修改示例代码并应用到QLineEdit中，如图所示

（2）QPushButton

对于搜索按钮的美化，我们有两种方案，一种是使用QLabel控件，并填充按钮图片资源文件，对于信号与槽机制，我们新建一个类，并继承QLabel重写鼠标点击事件，在该事件触发时发送clicked信号，然后将QLabel提升为我们新建的类即可。第二种方案，是使用QSS进行美化，只需要填充QPushButton中的icon为我们指定的资源文件即可。

此时我们的按钮样式如下：

显然很不美观，这时我们需要去掉背景的灰色，这只需给按钮设置任意大小的圆角样式即可，如下图：

3. 今日天气区

如上图所示，今日天气区主要分为6个控件，分别是天气图标（QLabel）、当前温度（QLabel）、今日天气（QLabel）、温度范围（QLabel）、城市信息（QLabel）、GIF动图（QLabel）。该部分都是QLabel类型控件，也并没有美化需求，读者需重点留意该部分布局，首先对于3、4控件，我们使用水平分布，此时可以将3、4看作一个整体；然后将2和3、4进行垂直布局，此时2、3、4可以看着一个垂直分布的整体，接着和1进行水平布局，然后整个widget2控件进行网格布局。注意：布局的方式有很多，只需要保证简洁美观即可。

4. 天气指标区

该区域主要分为感冒指数和一个Qwidget容器，包括4个天气指标。其中每一个天气指标由一个Icon和两个QLabel标签组成。其中QLabel标签竖直分布然后与Icon水平分布。值得注意的是，这两个标签被配置为文本内容水平和垂直方向居中对齐，如下图所示：

对于容纳天气指标的QWidget容器，我们设置了背景色和圆角样式，如下图所示：

此外就是简单的布局了，这里便不再阐述。

5. 近期天气区

该区域主要分为6大部分，其中每个部分为一个QWidget容器，分别用来显示日期、天气状况、空气质量、最高温度曲线、最低温度曲线以及风向和风力。

这里需要注意的是日期、天气状况和风向风力这些标签并不是“一”个标签，而是由“两”个标签组成的，这主要是为了便于UI控件的更新，即每个控件只负责一个信息的显示。

如上图所示，这些标签都是由一个具有上圆角的QLabel和一个具有下圆角的QLabel组合而成的。其中我们需要在样式表中配置如下即可：

background-color: rgb(135, 202, 202);//配置标签的背景颜色
border-top-left-radius:8px;//配置标签左上圆角大小
border-top-right-radius:8px;//配置标签右上圆角大小

与之对应的是：

background-color: rgb(135, 202, 202);//配置标签的背景颜色
border-bottom-left-radius:8px;//配置标签左下圆角大小
border-bottom-right-radius:8px;//配置标签右下圆角大小

留意以上圆角的配置方式区别于：border-radius: 5px;，这种方式是配置整个矩形的所有圆角，而以上方式用来配置各个圆角的大小。

四、界面布局细节

1. 图片资源文件添加

在将各个标签位置设置好后，需要给他们添加资源文件，这样才能使得界面更贴近最终的实现效果，在后续代码中，我们只需要解析HTTP数据并更新不同的资源文件到这些标签上即可。那么接下来就介绍一下如何给标签添加资源文件。

如上图所示，给pixmap属性添加默认图片，此外还要勾选scaledContents，这个属性用于控制标签中显示的内容是否随标签的尺寸自动缩放，只有勾选了这个选项图片才能完整的显示在标签中。

2. 布局边距设置

对于每一种布局，其都有相应控制间距的属性可以配置，这里以竖直布局为例，如下所示为可以配置的属性，下面分别介绍各个属性的含义：

• layoutLeftMargin：布局的左外边距，值为 3。表示布局与左侧相邻元素或容器边界之间的距离为 3 个单位（通常是像素），控制布局在水平方向左侧的留白。
• layoutTopMargin：布局的上外边距，值为 3。即布局与上方相邻元素或容器顶部边界之间的距离为 3 个单位，控制布局在垂直方向上方的留白。
  - layoutRightMargin：布局的右外边距，值为 3。是布局与右侧相邻元素或容器边界之间的距离为 3 个单位，控制布局在水平方向右侧的留白。
• layoutBottomMargin：布局的下外边距，值为 3。指布局与下方相邻元素或容器底部边界之间的距离为 3 个单位，控制布局在垂直方向下方的留白。
• layoutSpacing：布局内部元素之间的间距，值为 3。表示布局中各个子部件（比如按钮、标签等）之间的间隔为 3 个单位，用于控制子部件之间的距离，使布局更美观、层次更清晰。
• layoutStretch：布局中子部件的拉伸因子，值为 1,3,3,8。拉伸因子用于在布局调整大小时，分配额外的空间。例如在垂直布局中，各个子部件会按照 1:3:3:8 的比例来分配多余的垂直空间，拉伸因子大的子部件会获得更多的扩展空间。

例如在如下近期天气中的标签时，我们可以对这两个QLabel应用垂直布局，并给设置他们的layoutSpacing属性为0，即各个控件之间的垂直距离为0，这样他们就可以紧挨着，实现看起来像一个标签的效果了。

五、天气预报项目（下）

天气预报项目（下）