Qt个人项目——世界天气预报，内带QListWidget自定义组件，支持全球城市天气

10Eugene

已于 2023-11-25 09:27:37 修改

阅读量657

点赞数

文章标签： qt 开发语言 c++

于 2023-06-03 18:08:49 首次发布

本文链接：https://blog.csdn.net/EEEugene/article/details/131023958

版权

本文介绍了一个适合Qt初学者的项目，开发者构建了一个天气预报应用，使用Qt5.12在Ubuntu22.02LTS环境下。项目从气象API获取JSON数据，展示天气信息，包括城市列表、温度曲线、各种指数和未来预报。应用具有自定义列表视图，可跟随鼠标移动，以及右键退出功能。

摘要由CSDN通过智能技术生成

总体介绍：

个人项目，自己制作了一个天气预报，还有选择城市列表，列表分大洲区域选择，具体选择后再进行选择城市，可以更新城市数据，自定义了QListWidget，总体来说完成度比较高，难度也不大，适合Qt新手入门进行学习的一个小项目。

开发环境：

乌班图22.02LTS，Qt版本5.12；

技术点：

该项目从国家气象局提供的 API 接口中获取 JSON 数据，使用 QT 提供的类来解析 JSON 数据并显示在项目上；发送 HTTP 请求，获得天气数据；自行绘制温度曲线和查看当前天气，所有天气图表都有显示；可以搜索中国所有城市天气预报；查看感冒指数、空气质量、未来6天空气、风力风向和最高最低温度；无边框窗口；重写了鼠标移动事件，窗口可跟随鼠标移动；右键菜单退出功能；自制自定义列表，可以显示天气更多参数；传递参数到具体天气界面中；

项目预览图：

自定义列表：

该项目重写了鼠标移动事件进行操作，制作无边框窗口，对于QListWidget中的列表项目的话，选中也有不同的hover和selected效果，这部分使用样式表进行渐变色处理，如上图所示

自定义列表代码如下：

        cityWithTemp* pItemWidget = new cityWithTemp(this);
        pItemWidget->SetData(city, temp, pic);
        QListWidgetItem* pItem = new QListWidgetItem();
        pItem->setData(Qt::UserRole,city);
        pItem->setSizeHint(QSize(30, 55));
        ui->listWidget->addItem(pItem);
        ui->listWidget->setItemWidget(pItem, pItemWidget);

列表选中样式处理：


QListView 
{
      show-decoration-selected: 1; 
}

 
QListView::item:selected 
{
      border: 1px solid #6a6ea9;
}
 
QListView::item:selected:!active 
{
      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #ABAFE5, stop: 1 #8588B2);
}
 
QListView::item:selected:active
{
      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #6a6ea9, stop: 1 #888dd9);
	  border-left: 3px solid black;
}
 
QListView::item:hover
{
      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #FAFBFE, stop: 1 #DCDEF1);
	  border-left: 3px solid rgb(130, 130, 130);
}

鼠标移动事件代码：

void MainWindow::mousePressEvent(QMouseEvent *event)
{
    mOffset = event->globalPos() - this->pos();
}

void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
    this->move(event->globalPos() - mOffset);
}

获取天气API数据：

void MainWindow::getWeatherInfo(QString cityName)
{
    QString cityCode = WeatherTool::getCityCode(cityName);
    if(cityCode.isEmpty()){
        QMessageBox::warning(this,"提示","请检查城市名是否输错，该页面只支持国内。",QMessageBox::Ok);
        return;
    }
    QUrl url("http://t.weather.itboy.net/api/weather/city/" + cityCode);
    mNetAccessManager->get(QNetworkRequest(url));
}

关于自定义列表的参数传递使用，可以使用Userrole进行保存，或者直接使用点击事件进行传输，上传了一个练习的demo，有需要的朋友们可以自取：Qt自定义ListWidget传递参数https://download.csdn.net/download/EEEugene/87732062