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(').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_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學習內容
詳情瞭解就看這裡