Flutter多平台适配机制的示例分析-创新互联

小编给大家分享一下Flutter多平台适配机制的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

站在用户的角度思考问题，与客户深入沟通，找到垫江网站设计与垫江网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、网站设计、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网络空间、企业邮箱。业务覆盖垫江地区。

Flutter网络请求

在开发Flutter的时候可以使用 http核心库。也可以使用社区的其他封装类库，比如dio。两者的底层实现都是 http_parser

如果开发者不小心在flutter中直接使用了平台相关的类库，则会导致扩平台运行出错，比如使用io包下的http在浏览器下执行肯定会报错。

http核心库已经为我们做好了平台适配，下面看一下他是怎么做的适配：

import 'package:flutter/cupertino.dart';import 'package:http/http.dart' as http;void hello(){
  print('a.dart => hello');
  http.get('http://127.0.0.1:8080').then((response){
    debugPrint('response => ${response.statusCode} ${response.body}');
  });
}

这段代码可以跑在移动设备，也可以跑在浏览器设备，得到一致的输出效果。

http核心库

现在我们以get请求为例，看一下他的内部逻辑：

image

在http接口类中，最终会执行_withClient来选用Client的实现类，类似静态代理效果。

具体来说，在编译为web使用时，最终导包使用的是src/browser_client.dart, 其底层实现是，dart:html下的HttpRequest, 最终用的是前端的ajax技术：XMLHttpRequests。

/// Used from conditional imports, matches the definition in `client_stub.dart`.BaseClient createClient() => BrowserClient();/// A `dart:html`-based HTTP client that runs in the browser and is backed by/// XMLHttpRequests.////// This client inherits some of the limitations of XMLHttpRequest. It ignores/// the [BaseRequest.contentLength], [BaseRequest.persistentConnection],/// [BaseRequest.followRedirects], and [BaseRequest.maxRedirects] fields. It is/// also unable to stream requests or responses; a request will only be sent and/// a response will only be returned once all the data is available.class BrowserClient extends BaseClient

针对非浏览器使用的是io类库，src/io_client.dart, 其底层实现是dart:io下的HttpClient

/// Used from conditional imports, matches the definition in `client_stub.dart`.BaseClient createClient() => IOClient();/// A `dart:io`-based HTTP client.////// This is the default client when running on the command line.class IOClient extends BaseClient

条件导包

这里有个比较有意思的语法：

http核心库是如何做到的的平台差异？

通过观察src/client.dart的导包情况，可以看到如下代码：

// ignore: uri_does_not_existimport 'client_stub.dart'
    // ignore: uri_does_not_exist
    if (dart.library.html) 'browser_client.dart'
    // ignore: uri_does_not_exist
    if (dart.library.io) 'io_client.dart';

这里实际上使用的dart中的特殊语法: 条件导包。 相关详情可以查阅dart文档。

简单来说就是利用有条件的import/export，在编译期间，差异化导包，从而可以实现平台适配。

使用条件导包的具体做法如下：

• 首先定义一个接口，用于多端实现；

• 接口类中利用import/export按需导入，导出对应的实现类库

export 'src/hw_none.dart' // Stub implementation
    if (dart.library.io) 'src/hw_io.dart' // dart:io implementation
    if (dart.library.html) 'src/hw_html.dart'; // dart:html implementation

运用场景

利用该机制可以方便的进行多平台适配。类似的dio也有一段导包差异逻辑src/dio.dart。

import 'entry_stub.dart'// ignore: uri_does_not_exist
    if (dart.library.html) 'entry/dio_for_browser.dart'// ignore: uri_does_not_exist
    if (dart.library.io) 'entry/dio_for_native.dart';

顺便看下dio和http的依赖情况。dio是一个http上传的封装库，提供了较多便捷的api，当然相对的也带了学习成本，具体是否采用就看项目的实际需要。

|-- dio 3.0.7
|   |-- http_parser 3.1.3
|   |   |-- charcode...|   |   |-- collection...
|   |   |-- source_span...|   |   |-- string_scanner...
|   |   '-- typed_data...
|   '-- path...
|-- http 0.12.0+2
|   |-- async...
|   |-- http_parser...
|   |-- path...
|   '-- pedantic...

以上是“Flutter多平台适配机制的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联-成都网站建设公司行业资讯频道！

当前文章：Flutter多平台适配机制的示例分析-创新互联
网址分享：http://cxhlcq.com/article/gheoo.html