Flutter多平台适配机制就是这么简单

我们都知道到Flutter在表现层做到了多端一致性,通过Android、iOS各自平台下的渲染实现了一致的UI效果。 那么如果你只是要开发一个适配Android, iOS, Web的三方库,有什么好的简单思路?

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请求为例,看一下他的内部逻辑:

在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_exist
import ‘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...

原文地址:https://blog.51cto.com/14606040/2460814

时间: 2024-11-10 07:54:59

Flutter多平台适配机制就是这么简单的相关文章

Windows-消息映射机制原理和简单的绘图技术

Windows-消息映射机制原理和简单的绘图技术 1.MFC消息映射机制 众所周知,Windows程序是基于消息编程的,但是在MFC中已经为我们封装好了这个框架的消息机制,我们需要了解它的实现原理,才能深入的学习和精通Visual C++. **(1).消息映射机制的原理: MFC消息映射机制的具体实现方法是,在每个能接收和处理消息的类中,定义一个消息和消息函数静态对照表,即消息映射表.在消息映射表中,消息与对应的消息处理函数指针是成对出现的.某个类能处理的所有消息及其对应的消息处理函数的地址都

【玩转微信公众平台之七】 PHP语法简单介绍

经过多篇的努力,我们终于成为了微信公众平台的开发者.但是别高兴的太早,就跟修真小说一样:修炼多年武破虚空,飞升到仙界后本以为成为了天仙即可跳出三界外,不在五行中.可实际到了仙界才发现,成仙只是修行的第一步......没错,成为开发者也才只是第一步,因为现在你的微信公众平台还没有任何功能,说难听点就是小白,说好听点就是白马王子,说可爱点就是小白白,说黄色点就是洗白白,说...----------------要想在微信公众平台添加功能,那就需要写代码:既然说到写代码,那么肯定是要用php(如果用AS

[转]微信公众平台开发(四) 简单回复功能开发

本文转自:http://www.cnblogs.com/mchina/p/3155072.html 一.简介 微信公众平台可以根据用户发送的信息进行判断,然后给出对应的回复,具有良好的交互性.下文将模拟简单的回复功能,根据这个案例,开发者也可以基本理解微信交互的原理,进行更深层次的开发. 二.思路分析 用户发送过来的文本信息,我们可以提取关键字,通过简单的 if...elseif...else... 实现. 关键代码如下: if($keyword=="你好"){ $contentStr

微信公众平台开发(四) 简单回复功能开发

原文地址:http://www.cnblogs.com/mchina/p/3155072.html 一.简介 微信公众平台可以根据用户发送的信息进行判断,然后给出对应的回复,具有良好的交互性.下文将模拟简单的回复功能,根据这个案例,开发者也可以基本理解微信交互的原理,进行更深层次的开发. 二.思路分析 用户发送过来的文本信息,我们可以提取关键字,通过简单的 if...elseif...else... 实现. 关键代码如下: if($keyword=="你好"){ $contentStr

第一节 垃圾收集机制简介以及简单配置

垃圾收集机制(GC)是JVM用于释放那些不再使用的对象所占用内存的程序和算法.GC并没有写入在java语言定制的标准中,因此并不是所有的JVM都有GC.GC的主要目的就是清除不再使用的对象. 垃圾回收的两种方法: 1.引用计数 引用计数表示一个对象被引用的所有次数,当引用计数为0时,则表示该对象没有被引用,可以将其删除. 2.对象引用树 目前比较常用的垃圾收集机制是对象引用树,即将对像的引用关系构建成一棵树,从一组根对象开始,对所有对象进行查找,通过递归查找若在该树中找到相应的对象,则将该对象标

多平台适配的代码设计

一个成功的软件系统,往往需要根据需求在不同的系统平台上运行,为了解决系统在多个平台的移植带来的风险,业务架构往往会设计相应的平台适配层来隔离不同平台的差异,如何设计一个易于扩展的平台适配层,是软件设计人员需要考虑的问题. 设计1: 1: 提供平台接口文件os.h 2:定义如下: #ifdef OS1 #define OS_Fun OS1_Fun #endif #ifdef OS2 #define OS_Fun OS2_Fun #endif void OS_Fun(); 3:通过定义不同的系统宏,

部分 垃圾回收机制简短,简单的配置

垃圾回收机制(GC)它是JVM程序和算法对这些对象的释放不再使用的内存密集型. GC没有写java自定义标准语言,因此,不是所有的JVM有着GC. GC的主要目的就是清除不再使用的对象. 垃圾回收的两种方法: 1.引用计数 引用计数表示一个对象被引用的全部次数,当引用计数为0时,则表示该对象没有被引用,能够将其删除. 2.对象引用树 眼下比較经常使用的垃圾收集机制是对象引用树,即将对像的引用关系构建成一棵树,从一组根对象開始.对全部对象进行查找,通过递归查找若在该树中找到对应的对象,则将该对象标

【JAVASE】JAVA内存模式和类加载机制,GC简单原理

先介绍一下类加载的过程: 我们编写的是源码文件java,通过jdk bin下面的javac工具,编译为class字节码文件,然后通过bin下面的java命令调用jvm解析class文件运行. java实际运行的时候依靠的是字节码,之所以说java跨平台就是因为jvm能够跨平台,只要有jvm的地方,java都可以运行. JVM装在Class文件的过程: 装载,准备,解析. JVM通过类加载器完成类的装载过程,具体如图所示 1.先通过 启动类加载器,完成基础类的加载 lib下面的  rt.jar(c

从mediaserver入手快速理解binder机制(最简单理解binder)【转】

本文转载自;https://blog.csdn.net/u010164190/article/details/53015194 Android的binder机制提供一种进程间通信的方法,使一个进程可以以类似远程过程调用的形式调用另一个进程所提供的功能.binder机制在Java环境和C/C++环境都有提供. android的代码中,与C/C++的binder包括一些类型和接口的定义和实现,相关的代码在下面这几个文件中: frameworks\base\include\utils\IInterfa