Flutter 入門 --- 內部分享

阿新 • • 發佈：2020-02-10

八月部門給分配的分享任務，由於專案太趕，推遲一個月。

選 Flutter 這個主題，是因為現在它慢慢流行起來了，而我卻不瞭解，故而藉此契機，上手試試。

簡介

Flutter 是 Google 推出的跨平臺開發框架。

⽬前⽀支援 iOS, Android 開發，對web 端和桌面端支援還在開發中。

2017 年年 5 月，Flutter 釋出第一個版本。

2018 年年 12 月，第一個穩定版本， 1.0 發布。

Flutter 的開發語言是 Dart 。

Flutter 實現了一整套的跨平臺 UI 框架，包括控制元件，佈局，渲染和開發語言。

Flutter Engine 依靠跨平臺的 Skia 進行渲染，只依賴系統的圖形繪製介面，因此能夠很大程度地抹除不同平臺的體驗差異。

採⽤的 Dart 語言，效能優於其他跨平臺框架所使⽤的 JavaScript 。

再加上 Google 的⽀持，Flutter 最近⼀年多發展迅速。

Flutter ⽀持 macOS, Windows 和 Linux 作為開發環境。IDE 有 Android Studio, IntelliJ 和 Visual Studio Code。

Stack Overflow Trends 對比

圖表連結 https://insights.stackoverflow.com/trends?tags=react-native,flutter,ionic,cordova,xamarin

Dart 簡介

☸ OOP
☸ 強型別
☸ 專門為客戶端優化
☸ 跨平臺 (iOS, Android)
☸ 可移植 (ARM/x86)
☸ JIT 和 AOT 執行模式

Language Tour:https://dart.dev/guides/language/language-tour
Dart 第三⽅庫: https://pub.dev/packages

Flutter 分層架構

由底至上，Framework 層組成部分為：

☆ Foundation: 封裝的⼯具類和方法;
☆ Animation: 動畫相關;
☆ Painting: 封裝了 Engine 提供的繪製介面;
☆ Gestures: 觸控事件處理，⼿勢識別器;
☆ Rendering: 渲染庫;
☆ Widgets: 元件庫;
☆ Material: Material Design ⻛格元件庫;
☆ Cupertino: iOS ⻛格的元件庫;

Flutter 專案結構

☸ lib: 寫 Dart 程式碼的地方
☸ ios, android: 原生的宿主項⽬目
☸ build: 執行的中間產物
☸ test: 單元測試
☸ pubspec.yaml: 第三方庫以及資源管理檔案
☸ External Libraries: 庫⽂件
(images 是手動建立的⽬錄)

用 widgets 構建界⾯

它們的作用分別為：

Widget: 存放渲染內容和佈局資訊
RenderObjectElement: 存放上下文，持有 Widget 和 RenderObject
RenderObject: 佈局和繪製

StatelessWidget 和 StatefulWidget

StatelessWidget: 靜態展示
StatefulWidget: 動態展示(隨外部事件改變)

與原⽣互動

Flutter 提供了 Platform Channels 機制來實現與原生的互動。

詳細可參考 https://flutter.dev/docs/development/platform-integration/platform-channels

參考

● https://flutter.dev/docs
● https://dart.dev
● https://www.yuque.com/xytech/flutter
● https://juejin.im/post/5d728d376fb9a06b051811f4#heading-23

PDF 講稿和 demo 可訪問 Git

Flutter 入門 --- 內部分享