Flutter 是 Google 推出并開源的移動應(yīng)用開發(fā)框架，一個新的用于構(gòu)建跨平臺的手機(jī) App 的 SDK，支持插件和 Package，可以通過豐富的插件和 Pakage 實(shí)現(xiàn)更多的功能，例如調(diào)用 GPS 和相機(jī)等等，主打跨平臺、高保真、高性能，可以快速在 iOS 和 Android 上構(gòu)建高質(zhì)量的原生用戶界面。

01 與其他跨平臺技術(shù)的比較

● 原生 App

開發(fā)人員直接調(diào)用平臺 SDK 進(jìn)行 UI 開發(fā)。由于語言及 SDK 的不同，所以開發(fā)人員必須為兩個平臺分別開發(fā) App。

圖1 原生 App 簡單架構(gòu)

● WebViews

UI 通過 WebView 來顯示 html 代碼，系統(tǒng)服務(wù)則通過一個中間層橋接到 JaveScript 中去。

圖2 WebViews 架構(gòu)

● React Native

RN 不僅橋接系統(tǒng)服務(wù)，也將系統(tǒng) UI 也橋接到了 JaveScript 中，這樣寫出來的 UI 最終也會渲染成原生的控件。如圖3這樣，UI 的渲染是很頻繁的，要使 UI 不卡頓，必須達(dá)到60Fps。但是橋接會花費(fèi)一定的時間。所以這樣的架構(gòu)有時候會有性能問題。

圖3 React Native 架構(gòu)

● Flutter

Flutter 使用 Dart 語言開發(fā)，Dart 可以被編譯（AOT）成不同平臺的本地代碼，讓 Flutter 可以直接和平臺通訊而不需要一個中間的橋接過程，從而提高了性能。

Flutter 與用于構(gòu)建移動應(yīng)用程序的其他多數(shù)框架不同，因?yàn)?Flutter 既不使用 WebView，也不使用操作系統(tǒng)的原生控件。相反，F(xiàn)lutter 使用自己的高性能渲染引擎來繪制 widget。這樣不僅可以保證 Android 和 iOS 的 UI 一致性，而且也可以避免對原生控件依賴而帶來的限制和高昂的維護(hù)成本。

圖4 Flutter 架構(gòu)

02 Flutter 框架結(jié)構(gòu)

Flutter 框架由許多抽象的層級組成，層級越高，封裝度越高，我們使用越方便，然后層級越低使用起來可能更加自由，控制粒度更精細(xì)，當(dāng)然也會更加復(fù)雜。

圖5 Flutter 框架結(jié)構(gòu)

Flutter Framework

Framework 的底下兩層在 Google 的一些視頻中被合并為一個 dart UI 層，對應(yīng)的是 Flutter 中的 dart:ui 包，它是 Flutter 引擎暴露的底層 UI 庫，提供動畫、手勢及繪制能力。Flutter 框架基于這一層來構(gòu)建應(yīng)用程序，比如輸入驅(qū)動、繪制文字、布局和渲染系統(tǒng)等。Rendering 層簡化了布局和繪制過程。它負(fù)責(zé)處理與 Flutter Engine 的通信。Widgets 層是 Flutter 提供的一套基礎(chǔ)組件庫。這層給我們提供了可以直接使用的 UI 組件（布局相關(guān)、繪制相關(guān)、手勢檢測相關(guān)）。Material 和 Cupertino 層的 Widget 是 Widgets 層的封裝，只不過是實(shí)現(xiàn)了 Material 和 Cupetino 風(fēng)格的 Widget 提供給我們使用。

Flutter Engine

這是一個純 C++實(shí)現(xiàn)的 SDK，其中包括了 Skia 引擎、Dart 運(yùn)行時、文字排版引擎等。在代碼調(diào)用 dart:ui 庫時，調(diào)用最終會走到 Engine 層，然后實(shí)現(xiàn)真正的繪制邏輯。Flutter 框架基于這一層來構(gòu)建應(yīng)用程序，比如輸入驅(qū)動，繪制文字，布局和渲染系統(tǒng)等。

Embedder

對接平臺嵌入層，是操作系統(tǒng)適配層，實(shí)現(xiàn)了渲染 Surface 設(shè)置，線程設(shè)置，以及平臺插件等平臺相關(guān)特性的適配。

Flutter 之所以能夠在原生層面上做到跨平臺，是因?yàn)樗ㄟ^在底層使用通用的圖形繪制庫 Skia，封裝了一套全新的、獨(dú)立的 UI 框架，即 Flutter。

03 Flutter 與平臺的通信機(jī)制

Flutter 與平臺之間可以有方法調(diào)用，例如下面例子中，F(xiàn)lutter 中使用 methodChannel 的 invokeMethod 方法和 Android 之間定義了三個方法調(diào)用：inspectionGPS、openGPS 和 getDate；Android 調(diào)用 MethodCallHandler 方法，判斷 Flutter 調(diào)用的是哪一個方法，然后去調(diào)用 Android 底層的接口：

flutter: lib/main.dart ///Flutter 調(diào)用原生 Start//
static const MethodChannel methodChannel=
MethodChannel('samples.flutter.io/gps');
Future

Flutter 提供了安卓上的 flutterActivity，類似于其他的 Activity，添加到安卓的 AndroidManifest.xml 中即可顯示 Flutter 的 UI，例如：

android:name="io.flutter.embedding.android.FlutterActivity"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout
|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
/>
import io.flutter.embedding.android.FlutterActivity;myButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
startActivity(
FlutterActivity.createDefaultIntent(currentActivity)
);
}});

04 在優(yōu)麒麟上安裝 Flutter

4.1 直接安裝 Flutter

在優(yōu)麒麟上開發(fā) Flutter 應(yīng)用程序，推薦使用 Visual Studio code 作為 IDE，只需要在終端上執(zhí)行以下操作：

$ snap install --classic flutter
$ snap install --classic code
$ code --install-extension dart-code.flutter

在優(yōu)麒麟上安裝了 Flutter SDK 之后，要構(gòu)建桌面應(yīng)用程序，需要訪問 Flutter dev（or the master）頻道并啟用 UKUI 桌面支持：

$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-linux-desktop

當(dāng)創(chuàng)建一個新的 Flutter 項(xiàng)目時，將得到一個子目錄，它將能夠在機(jī)器上作為桌面應(yīng)用程序運(yùn)行：

$ flutter create counter
$ cd counter
$ flutter run -d linux

將得到一個新的應(yīng)用程序，它是運(yùn)行 Flutter 構(gòu)建的。

圖6 程序運(yùn)行示意圖

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Hello Ubuntu Kylin'),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, children: [
const Text(
'HELLO UKUI', style:TextStyle(fontSize:100,
color:Colors.red,
), ),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods. );}}

4.2 在優(yōu)麒麟啟動現(xiàn)有 Flutter 項(xiàng)目

如果您有一個現(xiàn)有的 Flutter 項(xiàng)目，您想在啟用優(yōu)麒麟之后向其中添加支持，那么可以添加子文件夾，如下所示：

$ cd my_flutter_app
$ flutter create

這將創(chuàng)建帶有 runner 項(xiàng)目的子文件夾，您需要在桌面上構(gòu)建和運(yùn)行 Flutter 應(yīng)用程序。有了 Flutter 的項(xiàng)目，并對項(xiàng)目進(jìn)行運(yùn)行時首先先用：

$ flutter devices

確認(rèn)我們的設(shè)備是可被識別的，然后使用：

$ flutter run

可以直接運(yùn)行在我們的開發(fā)機(jī)上。編譯時使用：

$ flutter build linux

可編譯出對應(yīng)的版本，存放在“build/對應(yīng)平臺/release”目錄下，注意只能編譯和開發(fā)機(jī)同平臺的版本。優(yōu)麒麟平臺編譯出的為一個可執(zhí)行文件。

此前小優(yōu)在 B 站也分享過構(gòu)建 Flutter 的視頻教程，點(diǎn)擊下方快速觀看：

以上就是有關(guān)跨平臺應(yīng)用框架 Flutter 的全部內(nèi)容，如果你想了解更多細(xì)節(jié)，歡迎留言告訴我們哦！