Flutter:手拉手帶你極速構建漂亮的跨平臺(iOS/Android)移動應用 ✿ 初識

子木_lsy發表於2018-11-06

最近,學習了一些 Flutter 相關的知識,做了如下的小移動應用,當然是一套程式碼即可在 iOS 平臺執行,也可以在 Android 執行。

文章詳情可查閱我的部落格:h.lishaoy.net ,歡迎大家訪問。

下面我將手拉手帶您快速構建出漂亮的移動應用介面(如下?小視訊)

初識 Flutter

Flutter 是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生使用者介面。

Google 推出 Flutter 移動應用框架已經有三年,直到今年的 Google I/O 開發大會才正式介紹 Flutter 且釋出 Beta 版本, Flutter Google I/O 視訊 這個是 Flutter 在油管(YouTube)的 Google I/O 開發者大會的視訊,請自行觀看。

再來看看更加生動的視訊介紹,加速您的初識 Flutter

Google 的廣告應用 Adwords,阿里的閒魚 App 都是基於 Flutter 框架開發的。

以下是阿里巴巴用 Flutter 打造了5000多萬使用者閒魚 App (Flutter Developer Story) 的故事視訊

Flutter 作為谷歌推出的跨平臺開發框架,一經推出便吸引了不少注意,在 GitHub 上的 Star 數已超過 4W+

CMTC全球大前端技術大會 ㄧ Flutter視訊 這是 Google中國在 bilibili 上釋出的視訊,請自行觀看。

Flutter 特性

通過以上的視訊,對於 Flutter 已有所認識,下面再來看看 Flutter 的以下特性

熱過載

當你修改了程式碼 - S ,可立刻看到效果,而且可以保持介面狀態不變(如文字框輸入的資訊不會改變),如圖:

no-shadow
Hot reload

設計

Flutter 自帶 Google 推行的設計系統:Material Design ,它提供了豐富的 Material Design 風格的元件(比如:按鈕、輸入框、對話方塊、導航欄、邊欄等),而且也提供了豐富的 iOS(Cupertino) 風格的元件,利用這些風格的元件能夠快速的構建應用,如圖

no-shadow
Material Design

widget

widgetFlutter 應用程式基本構建塊, Flutter 既不使用 WebView,也不使用作業系統的原生控制元件,相反 Flutter 使用自己的高效能渲染引擎來繪製widgetFlutter 的中心思想是用 widget 構建你的 UI(一切皆為 widget) ,如圖是官網給出的框架圖:

no-shadow
widget

在這個架構裡,你可以實現 Flutter 提供的所有現成的 widget ,也可以建立自己定製的 widget ,每個 widget 都是公開的,你可以從高層次且統一的 widget 中獲得開發效率優勢,這個設計的目標是為了用更少的程式碼做更多的事情。

語言

Flutter 使用 C、C ++、Dart 和 Skia(2D渲染引擎)技術構建,如上圖,底層(engine)是用 C ++ ,框架是用 Dart ,當然我們開發使用的也是 Dart。

Dart 是 Google 釋出的一種高效、簡潔、擁有完整型別系統的 結構化的Web程式設計 語言, Flutter 官方給出為什麼選擇 Dart 作為開發語言的原因,如下

  • 開發人員的效率
  • 物件導向
  • 可預測,高效能
  • 快速記憶體分配

對於開發者(語言使用者)來說,不必太擔心,Dart 和 Java 、 JavaScript 比較類似,有一些程式語言基礎,便可拿來即用(不清楚的看看語法、關鍵字、型別即可)。

現在想必您對 Flutter 已經有了一定的認識,在之後的篇幅了會手拉手帶你極速構如文頭小視訊的小應用。

相關文章