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多平臺適配機制的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！