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

【正文开始】

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

        关于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的：QML实现的天气预报-C++文档类资源-CSDN下载

        Github的：https://github.com/mengps/Weather