QML实现的天气预报，包含很多东西

小咪咪 2022-05-13 03:44 148阅读 0赞

### **【正文开始】** ###

还是老样子，先上效果图，我用的手机，电脑上效果基本一致：

![70][]

关于qt c++部分，比较有用的有：

1、QGeoPositionInfoSource 的使用(位置信息，可以当做是gps)

关于qml部分，比较有用的有：

1、ChartView 的使用(基本就是 QChartView 的qml实现，但有一些地方要注意)

2、提供下拉刷新的实现方法

其他部分就比较的简单，可以自己看源码了解，我就不多说了。。

先讲讲 QGeoPositionInfoSource 的使用，代码片段及解释如下：

//静态函数createDefaultSource(QObject *parent)返回一个默认的位置源，如果没有则返回0，android需打开GPS位置服务
    m_geoPosSrc = QGeoPositionInfoSource::createDefaultSource(this);
    //调用startUpdates()会定时发出positionUpdated()信号，或者调用requestUpdate()也会发出此信号，比如：GPS开启时
    connect(m_geoPosSrc, &QGeoPositionInfoSource::positionUpdated, this, &MyModel::updatePosition);
        .
        .
        .
    void MyModel::updatePosition(QGeoPositionInfo gpsPos)
    {
        if (gpsPos.isValid())
        {
            //QGeoPositionInfo gpsPos包含经过定位获取到的准确信息，包括经纬度，时间戳等等
            //gpsPos.coordinate().longitude()提取经度，gpsPos.coordinate().latitude()提取纬度
            QString pos = QString("%1,%2").arg(gpsPos.coordinate().longitude()).arg(gpsPos.coordinate().latitude());
            .
            .
            .
        }
    }

然后是 ChartView 的使用，代码片段及解释如下：

Connections
    {
        target: myModel
        onReadyChanged:
        {
            if (myModel.ready)
            {
                refreshAnimation.restart();
                //加入折线数据，先清空之前的
                maxSeries.clear();
                minSeries.clear();
                for (var i = 0; i < 4; i++)
                {
                    maxSeries.append(i + 1, myModel.weatherData[i].maxTemperature);
                    minSeries.append(i + 1, myModel.weatherData[i].minTemperature);
                }
            }
        }
    }
    
    ChartView
    {
        id: futureChart
        width: parent.width
        height: 200
        legend.font.family: "方正"
        legend.font.pointSize: 10
        y: futureWeather.y + 190
        anchors.horizontalCenter: futureWeather.horizontalCenter
        antialiasing: true
        backgroundColor: "transparent"            //这两行去掉所有背景
        plotAreaColor: "transparent"
        Component.onCompleted:
        {
            //去掉xy轴
            futureChart.axisX().visible = false;    //这里要注意，xy轴并不能直接访问，必须以这种方法进行修改
            futureChart.axisY().visible = false;
        }
    
        ValueAxis
        {
            //设置x轴的范围，供两条线使用
            id: axisX
            min: 0.5
            max: 4.5
        }
    
        ValueAxis
        {
            //设置y轴的范围，供两条线使用
            id: axisY
            min: -5
            max: 40
        }
    
        LineSeries
        {
            id: maxSeries
            name: "最高温"
            pointLabelsFont.family: "方正"
            pointLabelsFont.pointSize: 10
            pointLabelsVisible: true
            pointLabelsFormat: "@yPoint °"  //更改label的格式，@xpoint和@yPoint代表了横纵坐标
            color: "red"
            width: 2
            axisX: axisX
            axisY: axisY
        }
    
        LineSeries
        {
            id: minSeries
            name: "最低温"
            pointLabelsFont.family: "方正"
            pointLabelsFont.pointSize: 10
            pointLabelsVisible: true
            pointLabelsFormat: "@yPoint °"
            color: "#8080FF"
            width: 2
            axisX: axisX
            axisY: axisY
        }
    }

最后是下拉刷新实现方法。

我的思路是：当页面下拉到某个地方时，进入刷新状态，然后保持当时的坐标，直到刷新结束，最后还原坐标，具体实现如下：

property int pullHeight: 64
    
    states: [
        State {
            id: downRefreshState
            name: "downRefresh"
            //下拉到一定位置时，进入此状态，向下为负
            when: page.contentY < -page.pullHeight
            StateChangeScript
            {
                script:
                {
                    print("下拉刷新")
                    page.y = page.pullHeight    //固定page的坐标，视觉上就像暂停了一样
                    myModel.downRefresh();      //开始刷新
                }
            }
        }
    ]

--------------------

### **【结语】** ###

比较重要的大概就这些，具体代码里面还有一些其他的东西，附上项目地址：

CSDN的：[https://download.csdn.net/download/u011283226/10656668][https_download.csdn.net_download_u011283226_10656668]

Github的：[https://github.com/mengps/Weather][https_github.com_mengps_Weather]

[70]: /images/20220513/49f117320e744f889d9ca1b9c7505d99.png
[https_download.csdn.net_download_u011283226_10656668]: https://download.csdn.net/download/u011283226/10656668
[https_github.com_mengps_Weather]: https://github.com/mengps/Weather