Flutter 技术入门与实战 (22):开启 Flutter 之旅 2.6

阅读数:4 2019 年 12 月 15 日 18:48

Flutter技术入门与实战(22):开启Flutter之旅 2.6

(Http 请求)

内容简介
第 1 章介绍 Flutter 的基本概念,并搭建第 yi 个 Flutter 程序,来感受一下 Flutter 之美。
第 2 章介绍几个重要知识点,如入口程序、Material Design、Flutter 主题、无状态组件和有状态组件、使用包资源、Http 请求。
第 3 章简单介绍 Dart 语言。Dart 语言是 Flutter SDK 指定的语言,我们很有必要补充一下它的基础知识,包括语法特性、基本语句、面向对象等。
第 4 章介绍常用组件。Flutter 里有一个非常重要的核心理念:一切皆为组件,本章主要讲解开发中用得 * 频繁的组件,如容器组件、图片组件、文本组件、图标组件和表单组件等。
第 5 章介绍 Material Design 风格的组件,Material Design 风格是一种非常有质感的设计风格,并提供一些默认的交互动画。本章将分类介绍这些组件。
第 6 章介绍 Cupertino 风格的组件,这是一类 iOS 风格的组件,如 CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView 等。
第 7 章介绍页面布局的基础知识和技巧,如基础布局处理、宽高尺寸处理、列表及表格布局等,* 后通过一个综合布局示例来演示如何编写复杂的页面。
第 8 章介绍如何处理手势,如轻击、拖动和缩放等。Flutter 中提供 GestureDetector 进行手势检测,并为手势检测提供了相应的监听。
第 9 章介绍如何加载、处理、展示资源和图片,如添加资源和图片、自定义字体等。
第 10 章介绍路由及导航是如何处理的,包括页面的渲染以及数据传递。
第 11 章介绍组件装饰和视觉效果的处理,如 Opacity(透明度处理)、DecoratedBox(装饰盒子)、RotatedBox(旋转盒子)、Clip(剪裁处理)和 CustomPainter(自定义画板)。
第 12 章介绍动画效果的制作,包含两个动画组件的使用:用 AnimatedOpacity 实现渐变效果、用 Hero 实现页面切换动画。
第 13 章介绍 Flutter 插件开发的入门知识。Flutter 插件可以和原生程序打交道,比如调用蓝牙、启用 WIFI、打开手电筒,等等。
第 14 章介绍开发工具及使用技巧,介绍几款常用的 IDE 工具,从代码的编写、辅助功能、程序调试、性能分析等多方面讲解工具及使用技巧。
第 15 章介绍测试与发布应用,包括:测试应用、发布 Android 版和 iOS 版 App。
第 16 章通过一个综合案例介绍如何使用 Flutter 实现即时通讯 App 的界面。

HTTP 协议通常用于做前后端的数据交互。Flutter 请求网络有两种方法,一种是用 Http 请求,另一种是用 HttpClient 请求。

1. Http 请求方式

在使用 Http 方式请求网络时,需要导入 http 包。如下所示:

复制代码
import 'package:http/http.dart' as http;

请看下面的完整示例代码,示例中发起了一个 http 的 get 请求,并将返回的结果信息打印到控制台里:

复制代码
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'http 请求示例',
home: new Scaffold(
appBar: new AppBar(
title: new Text('http 请求示例'),
),
body: new Center(
child: new RaisedButton(
onPressed: () {
var url = 'http://httpbin.org/';
// 向 http://httpbin.org/ 发送 get 请求
http.get(url).then((response) {
print(" 状态: ${response.statusCode}");
print(" 正文: ${response.body}");
});
},
child: new Text('发起 http 请求'),
),
),
),
);
}
}

请求界面如图 2-8 所示。

Flutter技术入门与实战(22):开启Flutter之旅 2.6

图 2-8 Http 请求示例效果图

点击“发起 http 请求”按钮,程序开始请求指定的 url,如果服务器正常返回数据,则状态码为 200。控制台输出内容如下:

复制代码
Performing hot reload...
Syncing files to device iPhone X...
Reloaded 1 of 509 libraries in 452ms.
flutter: 状态: 200
flutter: 正文: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>httpbin.org</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Source+Code+Pro:300,600|Titillium+Web:400,600,700"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/flasgger_static/swagger-ui.css">
<link rel="icon" type="image/png" href="/static/favicon.ico" sizes="64x64 32x32 16x16" />
<style>
html {
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
background: #fafafa;
}
</style>
</head>

注意 服务器返回状态 200,同时返回正文。完整的正文远不只这些内容,你可以自己测试此示例,并查看控制台的输出消息。

2. HttpClient 请求方式

在使用 HttpClient 方式请求网络时,需要导入 io 及 convert 包,如下所示:

复制代码
import 'dart:convert';
import 'dart:io';

请看下面的完整示例代码,示例中使用 HttpClient 请求了一条天气数据,并将返回的结果信息打印到控制台里。具体请求步骤看代码注释即可。

复制代码
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// 获取天气数据
void getWeatherData() async {
try {
// 实例化一个 HttpClient 对象
HttpClient httpClient = new HttpClient();
// 发起请求
HttpClientRequest request = await httpClient.getUrl(
Uri.parse("http://t.weather.sojson.com/api/weather/city/101030100"));
// 等待服务器返回数据
HttpClientResponse response = await request.close();
// 使用 utf8.decoder 从 response 里解析数据
var result = await response.transform(utf8.decoder).join();
// 输出响应头
print(result);
//httpClient 关闭
httpClient.close();
} catch (e) {
print(" 请求失败:$e");
} finally {
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'httpclient 请求',
home: Scaffold(
appBar: AppBar(
title: Text('httpclient 请求'),
),
body: Center(
child: RaisedButton(
child: Text(" 获取天气数据 "),
onPressed: getWeatherData,
),
),
),
);
}
}

请求界面如图 2-9 所示。

Flutter技术入门与实战(22):开启Flutter之旅 2.6

图 2-9 HttpClient 请求示例效果图

点击“获取天气数据”按钮,程序开始请求指定的 url,如果服务器正常返回数据,则状态码为 200。控制台输出内容如下:

复制代码
Performing hot reload...
Syncing files to device iPhone X...
Reloaded 1 of 419 libraries in 412ms.
flutter: {"time":"2018-11-30 08:09:00","cityInfo":{"city":" 天津市 ","cityId":
"101030100","parent":" 天津 ","updateTime":"07:56"},"date":"20181130","message":
"Success!", "status":200,"data":{"shidu":"84%","pm25":30.0,"pm10":79.0,"quality":" 良 ","wendu":"1","ganmao":" 极少数敏感人群应减少户外活动 ","yesterday":{"date":"29 日星期四 ","sunrise":"07:08","high":" 高温 9.0℃","low":" 低温 0.0℃","sunset":"16:50","aqi":86.0,"fx":" 东风 ","fl":"<3 级 ","type":" 晴 ","notice":" 愿你拥有比阳光明媚的心情 "}, "forecast": [{"date":"30 日星期五 ","sunrise":"07:09","high":" 高温 10.0℃","low":" 低温 1.0℃","sunset":"16:50","aqi":53.0,"fx":" 西风 ","fl":"<3 级 ","type":" 晴 ","notice":" 愿你拥有比阳光明媚的心情 "},{"date":"01 日星期六 ","sunrise":"07:10","high":" 高温 10.0℃","low":" 低温 4.0℃", "sunset":"16:49","aqi":94.0,"fx":" 东风 ","fl":"<3 级 ","type":" 阴 ","notice":" 不要被阴云遮挡住好心情 "},{"date":"02 日星期日 ","sunrise":"07:11","high":" 高温 1<…>

注意 返回的数据是 JSON 格式,所以后续还需要做 JSON 处理。另外还需要使用 utf8.decoder 从 response 里解析数据。

如果请求里需要带参数,可以在 URI 里增加查询参数,具体的请求地址和参数要根据实际需要编写,代码如下所示:

复制代码
Uri uri=Uri(scheme: "https", host: "t.weather.sojson.com", queryParameters: {
"_id": 26,
"city_code": "101030100",// 接口需要的 city_code
"city_name": " 天津 "
});

Flutter技术入门与实战(22):开启Flutter之旅 2.6

购书地址 https://item.jd.com/12526484.html?dist=jd

评论

发布