文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Flutter多平台适配机制的示例分析

2023-06-04 22:45

关注

小编给大家分享一下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请求为例,看一下他的内部逻辑:

Flutter多平台适配机制的示例分析

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,在编译期间,差异化导包,从而可以实现平台适配。

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

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多平台适配机制的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯