如何使用Qt-QML与V-Player来获取REST服务：天气服务示例

原文链接

REST与RESTful web services是从网络获取数据的最常用的方法。
Qt和V-Player提供了简单的方法来通过REST来获取数据。
这篇文章将告诉你创建App与连接到REST服务的重要步骤。另外，也将会提供一些有用的代码。

Spoiler:V-Player简单的REST例子

在我们进入到创建整个示例App的细节之前，让我们先看一个小型App的代码。
函数#getIp()展示了一个对REST service基础请求的函数的样子–使用XMLHttpRequest

import VPlayApps 1.0
import QtQuick 2.0
App {
  // This signal handler is called when the app is created, like a constructor
  //这个信号处理器当App启动时被调用，就像一个构造函数一样。
  Component.onCompleted: getIp()

  NavigationStack {
    Page {
      AppText {
        id: ipText
        anchors.centerIn: parent
      }
    }
  }
  function getIp() {
   
    // Create the XMLHttpRequest object
    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest

    // Listen to the readyStateChanged signal
    // 监听readyStateChanged信号
    xhr.onreadystatechange = function() {
   
      // If the state changed to DONE, we can parse the response
      // 如果状态变为DONE，我们可以开始解析服务器的回应
      if (xhr.readyState === XMLHttpRequest.DONE) {
        // The responseText looks like this {"ip":"xxx.xxx.xxx.xxx"}
        // Parse the responseText string to JSON format
        // 服务器的回应文本像是这样{"ip":"xxx.xxx.xxx.xxx"}
        // 将回应文本解析成JSON
        var responseJSON = JSON.parse(xhr.responseText)
        // Read the ip property of the response
        // 从重度去ip属性
        var ip = responseJSON.ip
        // Display the ip in the AppText item
        // 在AppText中显示ip
        ipText.text = "IP: " + ip
      }
    }

    // Define the target of your request
    // 设置你的请求方式及服务器地址
    xhr.open("GET", "https://api.ipify.org?format=json")
    // Execute the request
    // 执行请求
    xhr.send()
  }
}

真实的简单项目

我们将构建一个现实中有用的Qt 程序。它将获取网络上最流行之一的天气服务。当然，这也很容易将它适配到其他的REST service：因为处理的过程是一样的。你只需要改变一个服务器地址并且正确的解析返回数据。

示例代码在这里

程序结构

这个程序包含两个文件：
- **Main.qml:包含UI和REST的逻辑
- **DataModel.qml:存储并缓存从REST service获取并解析后的数据

REST 客户端的基本UI

首先，我们创建一个用户界面：在“Main.qml”中的QML元素。我们使用了V-Play APIs。他们适配了各种平台的风格（桌面，Android，IOS）。以下三个元素经常在每一个Qt/QML程序中出现：
1. App 组件通常是QML文件中的顶层元素。他在标准的Qt类中添加了有多有用的布局。两个机制非常重要。
设备无关像素（Device-independent pixels）简称为dp，是为长短定制的单位，缩放无关像素（scale-independent pixels）简称为sp，是为字体定制的单位。
2. 最开始的时候，我们的REST客户端程序只有一个页面。但添加一个NavigationStack元素作为他的孩子也是一个好主意。
后面他可以处理前方详细页面的转跳。而目前呢，NavigationStack确保顶部导航栏是可见的。
3. 第三个item是Page。他是我们自动标题栏和可见的QML元素的容器。设备相关的主题由它自动处理。

可视的UI

在通用的UI元素之后，我们应该定制一个程序相关的专门的洁面。用户在SearchBar输入城市名称。下面的AppText元素将显示解析到的数据或者错误信息。

QML页面布局

我们将垂直地安放UI元素。QM的ColumnLayout在这个场景是很棒的选择。他的说明文档很短，可以简单的认为他是只有一列的GridLayout。
QML还提供了另一个，乍一看非常像ColumnLayout的类：Column。这两者有什么区别呢？
- Column是一个位置指示器（Positioner），他是固定的形式安放QML元素（比如放在谁的下面）。Column的孩子节点࿰