1. 项目概述从零构建一个桌面端天气应用最近在带几个刚接触C和QT的朋友做项目发现他们总想找一些能串联起网络请求、数据解析、UI设计和事件处理这些核心知识点的综合案例。单纯看控件API文档或者写个“Hello World”窗口总觉得离实际开发有点远。于是我决定带着他们一起用C和QT框架从零开始手搓一个功能完整的桌面天气预报应用。这个项目麻雀虽小五脏俱全。它的核心目标很简单用户输入一个城市名应用能通过网络请求从公开的天气API获取数据解析出温度、湿度、风力、未来几天预报等信息最后在一个我们自己设计的、美观的界面上展示出来。听起来是不是很像你手机里那个天气App的桌面版没错我们要做的就是那个东西。为什么选这个项目因为它几乎覆盖了QT桌面开发的几个关键技能点首先是界面布局与美化你得学会用各种Layout布局管理器把按钮、输入框、标签这些控件安排得明明白白还得用QSSQT样式表让它们看起来不那么“原始”。其次是网络通信这是现代应用的基础我们要用QNetworkAccessManager发起HTTP GET请求和远端的服务器打交道。然后是数据解析服务器返回的通常是JSON格式的数据包我们需要用QJsonDocument、QJsonObject这些类把我们需要的数据像剥洋葱一样一层层取出来。最后是信号与槽这个QT的灵魂机制你得把用户的点击动作比如按下搜索按钮和具体的业务逻辑比如发起网络请求优雅地连接起来。整个项目我会分成上、下两篇来写。上篇也就是本篇我们聚焦在项目的搭建、UI界面的设计与实现。我会详细讲解如何用QT Creator创建项目如何像搭积木一样划分界面区域如何使用样式表美化控件以及如何管理图片等资源。这些都是让应用“有模有样”的基础。下篇我们会深入网络请求、JSON数据解析、动态更新UI以及温度曲线绘制这些“有血有肉”的功能逻辑。文末我会提供本上篇的完整源代码和编译好的可执行文件你可以直接运行看看效果也可以跟着文章一步步实现。无论你是刚学完C语法想找个实战项目练手还是已经有一定基础但没接触过QT想快速上手桌面开发这个项目都会是一个很好的起点。我们用的环境很常见Windows 10/11系统QT 5.8.0或更高版本如5.15.2配套的MinGW编译器以及QT Creator这个官方IDE。放心整个过程我会把每一步为什么这么做、可能会遇到什么坑都讲清楚。2. 开发环境准备与项目创建工欲善其事必先利其器。在开始写代码之前我们需要把“厨房”收拾好。这里我强烈建议使用QT 5.8.0或5.15.2 LTS版本搭配MinGW 32/64位编译器。LTS长期支持版本比较稳定社区资料也多能避开不少新版本的坑。如果你已经安装了更高版本的QT比如QT6原则上也可以但部分API和配置方式可能有细微差别需要你灵活调整。2.1 安装与配置QT环境如果你还没有安装QT可以去QT官网下载在线安装器。安装时记得勾选你需要的QT版本和对应的MinGW编译器套件。安装完成后打开QT Creator我们需要检查一下工具链是否配置正确。进入工具-选项-Kits你应该能看到一个自动检测到的桌面套件Desktop Qt x.x.x MinGW。确保其中的编译器C和C指向的是MinGW下的g.exe和gcc.exe调试器也正常识别。这一步是基础配置不对后面编译会报各种奇怪错误。2.2 创建新项目环境就绪现在开始创建我们的天气预报项目。启动QT Creator点击文件-新建文件或项目。在模板选择中选择Application-Qt Widgets Application然后点击Choose。Widgets应用适合我们这种传统的、控件丰富的桌面程序。给项目起个名字比如WeatherForecast。选择好项目的存放路径注意路径不要有中文或特殊字符这是避免编译问题的好习惯。在构建系统选择页面选择qmake。qmake是QT传统的项目管理工具对于初学者来说比CMake更直观友好。在类信息页面基类选择QMainWindow类名可以保持默认的MainWindow。QMainWindow提供了菜单栏、工具栏、状态栏和中心部件的框架比QWidget功能更全我们用它作为主窗口。后续的翻译文件和版本控制按需选择可以直接点下一步直到完成。项目创建成功后QT Creator会自动生成几个核心文件main.cpp程序入口、mainwindow.h/mainwindow.cpp主窗口的头文件和源文件、mainwindow.uiUI界面文件以及项目配置文件.pro。2.3 项目文件结构初探我们先快速浏览一下生成的文件特别是.pro文件它决定了项目如何被编译。打开WeatherForecast.pro你会看到类似下面的内容QT core gui greaterThan(QT_MAJOR_VERSION, 4): QT widgets CONFIG c11 SOURCES \ main.cpp \ mainwindow.cpp HEADERS \ mainwindow.h FORMS \ mainwindow.uiQT core gui表示我们的项目需要QT的核心模块和GUI模块。greaterThan(QT_MAJOR_VERSION, 4): QT widgets这是一个条件判断如果QT主版本大于4我们用的是5或6就额外添加widgets模块。因为QT5开始GUI控件被移到了独立的Widgets模块。CONFIG c11启用C11标准。我们后续可能会用到一些C11的特性。SOURCES,HEADERS,FORMS分别列出了项目的源文件、头文件和UI表单文件。随着项目进行我们可能会添加网络、图表等功能那时就需要在这里加上对应的模块比如QT network和QT charts用于绘制温度曲线。注意在项目初期就规划好需要的模块并添加到.pro文件中比写到一半发现缺少模块再回头添加要省事得多也能避免一些诡异的编译错误。3. 界面整体布局设计与规划好的UI是成功的一半。在动手拖控件之前我们必须先想清楚界面怎么划分。参考常见的天气应用我们的主界面可以清晰地划分为四个功能区域从上到下依次是搜索区位于顶部包含一个城市输入框、一个搜索按钮以及显示当前日期和星期的标签。今日天气区展示当前城市的核心天气信息如天气图标、当前温度、天气状况晴/雨等、温度范围、城市名称还可以加一个动态的天气效果GIF图。天气指标区以卡片或列表形式展示详细的指数如体感温度、湿度、风速、气压、能见度、日出日落时间等。还可以加入像“感冒指数”、“穿衣指数”这样的生活提示。近期天气区以横向或网格形式展示未来6天或7天的天气预报包括日期、天气图标、最高/最低温度、风向风力等。这个划分逻辑清晰也符合用户从上到下浏览信息的习惯。在QT中我们将使用容器控件和布局管理器来实现这种结构。3.1 使用Widget作为容器QT的布局管理器如QVBoxLayout,QHBoxLayout,QGridLayout不能直接应用于主窗口它们需要有一个“宿主”。这个宿主通常就是QWidget。我们可以把每个功能区都先放到一个独立的QWidget里在这个QWidget内部进行精细的布局。最后再将这四个QWidget用一个大布局管理器组装起来。这样做的好处是高内聚、低耦合。每个区域的控件和布局自成一体互不干扰。当我们需要调整某个区域比如改变指标区的排列方式时只需要修改对应QWidget内部的布局不会影响到其他区域。这就像装修房子先把客厅、卧室、厨房的家具各自摆好最后再确定它们在房子里的位置。3.2 在QT Designer中搭建骨架QT Creator集成了可视化的UI设计工具——QT Designer。我们双击mainwindow.ui文件就能打开它。清空中心区域默认情况下QMainWindow的中心区域可能已经有一个控件。我们选中它按Delete键删除让中心区域变成一个空白的QWidget它通常被自动命名为centralWidget。我们后续的所有布局都将在这个centralWidget中进行。创建功能区容器从左侧的Widget Box中拖拽四个Widget控件到中间的窗体上。不必在意它们的位置和大小。在右侧的Object Inspector中分别将它们重命名为有意义的名称例如widgetSearch、widgetToday、widgetIndices、widgetForecast。良好的命名是优秀代码的开始。应用主垂直布局在窗体空白处点击确保选中了centralWidget然后在顶部工具栏点击垂直布局按钮或者右键选择布局-垂直布局。此时四个Widget会自动从上到下排列。但由于它们内部是空的所以看起来可能是四个细长条。设置布局边距和间距选中centralWidget可以在Object Inspector里点选在右下角的Property Editor中找到layout相关的属性。将layoutLeftMargin、layoutTopMargin等边距属性设置为一个合适的值比如10这样界面边缘就不会紧贴窗口。将layoutSpacing控件间距也设置为10让四个区域之间有适当的呼吸空间。至此我们界面的“骨架”就搭好了。接下来我们要往这四个“房间”里添置“家具”了。4. 搜索区域输入、按钮与美化实战搜索区是我们与程序交互的起点需要兼顾功能性和美观。它主要包含一个QLineEdit用于输入城市名。一个QPushButton点击后触发搜索。两个QLabel一个显示日期如“2023-10-27”一个显示星期如“星期五”。4.1 控件拖放与水平布局打开mainwindow.ui选中之前创建的widgetSearch。从Widget Box拖一个Line Edit、一个Push Button和两个Label到widgetSearch上。在Object Inspector中为它们重命名lineEditCity、pushButtonSearch、labelDate、labelWeek。调整pushButtonSearch的显示文本为“搜索”或一个放大镜图标我们稍后设置图标。调整两个QLabel的显示文本为“日期”和“星期”作为占位符。选中widgetSearch点击工具栏的水平布局按钮。你会发现这些控件都挤到了一行并且宽度可能不均匀。4.2 使用QSS美化QLineEdit和QPushButton默认的灰色边框和方角按钮确实不太好看。QT提供了Qt Style Sheets (QSS)它的语法和Web的CSS非常相似可以让我们轻松地自定义控件外观。美化QLineEdit我们想让输入框有圆角、有内边距、获得焦点时边框变色。在Object Inspector中选中lineEditCity。在Property Editor中找到styleSheet属性点击后面的...按钮打开样式表编辑器。输入以下QSS代码QLineEdit { border: 2px solid #cccccc; /* 默认灰色边框 */ border-radius: 15px; /* 圆角半径 */ padding: 5px 15px; /* 内边距上下5px左右15px */ font-size: 14px; background-color: white; } QLineEdit:focus { border: 2px solid #1E90FF; /* 获得焦点时边框变为道奇蓝 */ }点击OK应用你就能立刻看到输入框变样了。美化QPushButton我们希望按钮有背景色、圆角、无边框并且鼠标悬停和按下时有反馈效果。选中pushButtonSearch同样打开其styleSheet属性。输入以下QSS代码QPushButton { background-color: #4CAF50; /* 绿色背景 */ border: none; /* 无边框 */ border-radius: 15px; /* 圆角 */ color: white; /* 白色文字 */ padding: 8px 20px; font-size: 14px; font-weight: bold; } QPushButton:hover { background-color: #45a049; /* 鼠标悬停时深一点的绿色 */ } QPushButton:pressed { background-color: #3d8b40; /* 按下时更深的绿色 */ padding-top: 9px; /* 轻微下沉效果 */ padding-bottom: 7px; }同样应用后按钮立刻变得生动起来。实操心得QSS的学习方法。QT官方文档里有完整的QSS参考和大量示例。当你不知道某个控件支持哪些样式属性时最好的方法是去帮助文档里搜索“Qt Style Sheets Examples”找到对应控件的例子进行学习和修改。比如搜索“QPushButton Example QSS”就能看到各种状态正常、悬停、按下、禁用的写法。4.3 设置日期与星期标签两个QLabel我们暂时保持默认样式因为它们的核心作用是在后台代码中动态显示从系统获取的日期。为了让它们看起来更协调我们可以设置一下对齐方式和字体。同时选中labelDate和labelWeek按住Ctrl键点选。在Property Editor中找到alignment属性设置为AlignCenter让文字居中显示。找到font属性可以适当将字体调大或加粗。最后别忘了调整一下widgetSearch内部布局的拉伸因子。我们希望输入框占据更多空间按钮和标签固定宽度。可以在Object Inspector中右键widgetSearch-改变布局大小或者在布局的属性里调整layoutStretch。一个常见的比例是给lineEditCity设置拉伸因子为3按钮和标签设为0或1。5. 今日天气区信息聚合与布局嵌套今日天气区是视觉焦点信息元素多布局稍复杂。我们需要展示天气图标大图QLabel当前温度大字号QLabel天气状况描述如“晴”QLabel温度范围如“12℃ ~ 24℃”QLabel城市名称QLabel动态天气效果图如飘雪的GIFQLabel5.1 复杂布局的分解与组合面对这么多控件不要试图用一个布局直接搞定。我们应该采用“分而治之”的策略使用布局嵌套。创建容器确保widgetToday被选中。第一组布局左中右结构拖入三个QLabel分别重命名为labelWeatherIcon图标、labelTempCurr当前温度、labelGif动态图。这将是横向排列的三个主要部分。选中widgetToday先应用一个水平布局。此时三个标签会水平排开。第二组布局温度详情垂直组合当前温度labelTempCurr的右边我们想竖直堆放“天气状况”和“温度范围”。但布局里不能直接嵌套控件。我们需要一个中间容器。从Widget Box拖一个Widget到设计界面上它会自动进入水平布局中重命名为widgetTempDetails。这个Widget将作为容器。在这个widgetTempDetails内部拖入两个QLabel分别重命名为labelWeatherDesc和labelTempRange。选中widgetTempDetails应用一个垂直布局。调整两个标签的对齐方式为居中对齐。调整水平布局结构现在widgetToday的水平布局里有labelWeatherIcon、widgetTempDetails、labelGif。我们需要把labelTempCurr也加进来。实际上更合理的结构是labelWeatherIcon和labelTempCurr作为一组左widgetTempDetails在中间labelGif在右边。但labelTempCurr字号很大单独占一块区域更好看。我们可以再次利用中间容器。删除当前的widgetTempDetails重新规划创建一个Widget命名为widgetLeftGroup内部放入labelWeatherIcon和labelTempCurr并应用垂直布局或水平布局根据你想让图标在温度上方还是左边。创建一个Widget命名为widgetRightGroup内部只放labelGif。那么widgetToday的水平布局里就变成了widgetLeftGroup、labelWeatherDesc和labelTempRange这两个可以直接放不用再套容器了、widgetRightGroup。这听起来有点绕关键在于用Widget容器把需要成组管理的控件包起来在组内进行布局再将各个组用更大的布局组装。多尝试几次拖拽观察Object Inspector的层级关系你会很快掌握。5.2 设置控件属性与占位资源labelTempCurr在属性编辑器中找到font将其pointSize调大如36weight设为Bold。文本可以设为“--℃”作为占位。labelWeatherIcon和labelGif它们需要显示图片。在属性编辑器中找到pixmap点击后面的...可以选择一个本地的图片或GIF文件作为设计期的占位图。关键一步务必勾选属性scaledContents这个属性允许图片随着QLabel的大小自动缩放否则图片可能只显示一部分或者失真。城市名称我们可以在widgetToday的最下方再加一个QLabellabelCity单独占一行并设置居中对齐、加大字体。这需要在widgetToday的顶层布局水平布局外再套一个垂直布局把水平布局和这个城市标签一起装进去。这个过程是UI设计中最需要耐心和技巧的部分。不要怕反复调整通过修改各个布局的layoutSpacing间距、layoutStretch拉伸因子以及控件本身的sizePolicy大小策略最终达到一个平衡、美观的效果。6. 天气指标区卡片化设计与细节把控天气指标区我们打算做成卡片式设计每个指标是一个小卡片包含一个图标和一两行文字说明如“湿度 65%”。多个卡片整齐排列。6.1 使用Widget容器创建卡片卡片本身就是一个有背景色、圆角的QWidget。选中之前创建的widgetIndices。从Widget Box拖一个Widget到widgetIndices上重命名为widgetIndexCard1代表第一个指标卡片。美化卡片QSS选中widgetIndexCard1设置其styleSheetQWidget#widgetIndexCard1 { background-color: rgba(255, 255, 255, 220); /* 半透明白色背景 */ border-radius: 10px; border: 1px solid #e0e0e0; /* 浅灰色边框 */ }注意这里的QWidget#widgetIndexCard1它使用了ID选择器意味着这个样式只应用于对象名为widgetIndexCard1的QWidget不会影响其他同类型控件。这是QSS中精准控制样式的常用技巧。卡片内部布局在widgetIndexCard1内部我们放入一个QLabel作为图标labelIndexIcon1和两个QLabel作为标题和数值labelIndexTitle1,labelIndexValue1。将它们水平或垂直排列好例如图标在左文字在右垂直排列。设置文字标签的居中对齐。复制卡片在QT Designer中你可以选中widgetIndexCard1及其内部所有控件按CtrlC复制再在widgetIndices内按CtrlV粘贴快速创建widgetIndexCard2、widgetIndexCard3等。记得逐一修改它们的对象名和内部子控件的对象名避免重复。6.2 使用网格布局排列卡片当我们有多个卡片比如4个或6个后需要将它们整齐排列在widgetIndices中。QGridLayout网格布局是绝佳选择。选中widgetIndices点击工具栏的栅格布局Grid Layout按钮。默认可能排成一行。我们需要调整网格的行列数。一种方法是直接拖拽卡片到网格的不同位置。另一种方法是先删除现有布局手动排列好卡片的大致位置再应用网格布局QT Designer会尝试自动识别行列。在widgetIndices的布局属性中可以设置layoutHorizontalSpacing和layoutVerticalSpacing来控制卡片之间的水平、垂直间距通常设为10-15像素看起来比较舒服。6.3 圆角样式的进阶技巧你可能注意到我们之前给卡片设置的圆角是border-radius: 10px;这是四个角统一设置。但有时候我们需要对某个角单独设置比如做一个只有上边是圆角的标签。假设我们想在近期天气区做一个标签上半部分是一种颜色显示星期几下半部分是另一种颜色显示日期中间用圆角过渡。我们可以用两个QLabel上下堆叠并分别设置它们的上下圆角。上部分Label的QSSborder-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-color: #87CACA;下部分Label的QSSborder-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: #A8DADC;然后将这两个Label放入一个Widget并设置该Widget的布局间距layoutSpacing为0它们就会严丝合缝地拼接在一起看起来像一个整体标签。这种技巧在制作一些特殊的UI组件时非常有用。7. 近期天气区未来预报与曲线绘制准备近期天气区通常以横向列表形式展示未来多天的天气。为了逻辑清晰我们把每一天的预报也封装成一个QWidget卡片里面包含日期、天气图标、最高/最低温度、风向风力等信息。多个这样的卡片再横向排列。7.1 创建单日预报卡片选中widgetForecast。拖入一个Widget重命名为widgetDay1。在widgetDay1内部我们需要放置labelDayDate1显示日期如“10/28”。labelDayIcon1显示天气图标。labelDayTempHigh1和labelDayTempLow1显示最高温和最低温可以用不同颜色区分。labelDayWind1显示风向风力。对这些内部控件使用垂直布局让它们从上到下排列。调整字体大小、对齐方式居中对齐。同样为widgetDay1设置卡片样式背景色、圆角、边框使其与指标区的卡片风格统一但可能更简约。复制出widgetDay2到widgetDay6并修改对象名和内部子控件名。7.2 使用水平布局排列卡片选中widgetForecast点击水平布局按钮。你会发现6个卡片挤在一行可能因为宽度不够而重叠或变形。关键步骤来了我们需要设置每个widgetDayX的大小策略。选中一个widgetDay1在属性编辑器中找到sizePolicy。将Horizontal Policy和Vertical Policy都设置为Fixed固定。然后在下方的minimumSize和maximumSize中将宽度width设置为一个固定值比如100。高度可以设为Expanding垂直方向可扩展或也固定一个值。对其他5个卡片进行同样的设置。这样每个卡片的宽度就固定了水平布局会根据固定宽度和间距来排列它们不会互相挤压。为了让卡片在水平方向上均匀分布可以设置widgetForecast水平布局的layoutStretch。在widgetForecast的布局属性中将layoutStretch设置为0,0,0,0,0,06个0表示每个卡片都不拉伸然后它们就会靠左排列。如果你希望它们均匀占满宽度可以都设为1。7.3 为温度曲线预留空间在真正的功能实现中下篇内容我们可能会在近期天气区的顶部或底部绘制一条连接每日最高/最低温度的趋势曲线。这需要用到QT的图表模块QtCharts。为了给曲线图预留空间我们可以在widgetForecast的垂直布局中注意我们现在是水平排列卡片widgetForecast本身应该用一个垂直布局顶部放曲线图QChartView底部放那6个卡片的水平布局容器。在widgetForecast中先删除现有的水平布局右键widgetForecast-布局-打破布局。拖入一个Widget重命名为widgetChartContainer作为图表容器。再拖入一个Widget重命名为widgetDaysContainer作为6个卡片的容器。将之前做好的6个卡片widgetDay1...全部剪切粘贴到widgetDaysContainer内部并在widgetDaysContainer内部应用水平布局。最后选中widgetForecast应用垂直布局。这样widgetForecast内部就从上到下依次是widgetChartContainer和widgetDaysContainer。调整widgetChartContainer和widgetDaysContainer在垂直布局中的拉伸因子layoutStretch例如设为3, 1让图表区域占3份高度卡片区域占1份高度。这样我们的UI界面就为下篇要实现的曲线功能预留好了位置。当然你也可以选择把曲线放在卡片上方或另外的区域布局是灵活的。8. 资源文件管理与界面细节打磨当界面上的控件都摆放好后我们需要为它们设置一些默认的图标、图片资源让界面在设计期就看起来更完整。同时也要打磨一些布局细节比如间距、对齐、边距等。8.1 创建与添加资源文件在QT项目中图片、图标等资源通常被编译进可执行文件这样发布时就不需要附带一堆零散的文件了。这是通过.qrc资源文件管理的。创建资源文件在QT Creator项目树中右键项目名 -添加新文件-Qt-Qt Resource File命名为resources.qrc。添加资源前缀双击打开resources.qrc点击添加-添加前缀。前缀类似于虚拟目录例如/icons、/images、/gifs。这有助于分类管理资源。添加文件选中一个前缀如/icons点击添加-添加文件将你准备好的天气图标如sunny.png,cloudy.png、背景图、GIF动画等添加到项目中。在UI中使用资源现在你可以在QT Designer中为QLabel的pixmap属性或QPushButton的icon属性选择资源了。点击属性值后面的...在弹出的资源选择对话框中你就能看到刚才添加的图片选择即可。路径会显示为:/icons/sunny.png这样的格式。注意事项资源文件一旦被修改如添加/删除图片必须重新构建qmake和编译项目更改才会生效。如果只是改了代码有时增量编译可能没问题但动了.qrc文件保险起见最好执行构建-重新构建项目。8.2 精细调整布局属性布局的美观在于细节。以下几个属性需要特别关注layoutMargin边距控制布局与其外部容器边缘的距离。给主窗口的centralWidget布局设置合适的边距如10px能让界面看起来不拥挤。layoutSpacing间距控制布局内部各子控件之间的距离。在搜索区、指标卡片内部、日期标签之间合理的间距如5-8px能提升可读性。sizePolicy大小策略与minimumSize/maximumSize最小/最大尺寸这是控制控件伸缩行为的核心。例如输入框QLineEdit的Horizontal Policy通常设为Expanding使其可以随窗口拉宽而变宽而搜索按钮可以设为Fixed或Minimum保持固定宽度。对于widgetDay1这类卡片如之前所述设置固定宽度能保证布局稳定。alignment对齐对于QLabel经常需要设置Qt::AlignCenter进行水平和垂直居中。对于布局中的某个特定控件可以在其所在布局的属性中找到该控件的对齐属性进行设置。8.3 使用Spacer填充空间有时候我们需要让某些控件靠左、靠右或居中而其他控件占据剩余空间。这时就需要Spacer弹簧了。例如在搜索区我们希望“日期”和“星期”标签靠右显示。我们可以在lineEditCity和pushButtonSearch之后labelDate之前插入一个Horizontal Spacer。在QT Designer的Widget Box中找到Spacers分类拖一个Horizontal Spacer到widgetSearch的布局中放在按钮和日期标签之间。Spacer会像弹簧一样将左侧的控件输入框和按钮推向左边将右侧的控件日期标签推向右边自己则占据所有剩余的水平空间。灵活运用Spacer可以轻松实现各种复杂的对齐需求是QT布局中不可或缺的工具。至此我们天气预报应用的上篇——界面设计与实现就全部完成了。我们已经得到了一个静态的、但布局合理、外观美观的应用程序界面。你可以编译并运行项目看看窗口拉伸时各个部分是如何响应的。这为我们下篇实现动态数据获取和展示打下了坚实的基础。在下篇中我们将让这个界面“活”起来编写代码连接天气API、解析JSON数据、用获取的数据更新界面上的每一个标签和图标并绘制出温度变化曲线。那将是逻辑与数据流动的部分同样充满挑战和乐趣。附本文对应的完整项目源代码及可执行文件已打包。你可以直接运行体验界面效果或导入QT Creator中查看所有布局和样式细节。