Flutter 學習 - 開篇

什麼是Flutter

Flutter是谷歌的移動UI框架,一款移動應用程序SDK,一份代碼可以同時生成iOS和Android兩個高性能、高保真的應用程序,也可以與現有的代碼一起工作。Flutter的目標是使開發人員能夠交付在不同平臺上都感覺自然流暢的高性能應用程序,兼容滾動行爲、排版、圖標等方面的差異。在全世界,Flutter正在被越來越多的開發者和組織使用,並且Flutter是完全免費、開源的。

爲什麼學習flutter

記得當初學習Java後面接觸Android,有向Java方向和Android方向的機會,後面選擇了Android,只是因爲喜歡前端的開發,現在依然是抱着這個思想,無論是自學Html還是現在學習Flutter,都想與用戶進行最直接的交互,想着一套代碼能在多個平臺上使用,想想都讓人興奮

Flutter的優勢

  • 提高開發效率

1.同一份代碼開發IOS和Android

2.毫秒級的熱重載,修改後應用界面會立即更新

  • 創建美觀,高度定製的用戶體驗

1.Flutter包含了許多核心的widget(Android:Material Design,IOS:Cupertino),如滾動、導航、圖標和字體等,這些都可以在IOS和Android上達到原生應用一樣的性能

2.分層的架構允許完全自定義,實現定製、美觀、品牌驅動的設計,而不受原生控件的限制,從而實現難以置信的快速渲染和富有表現力靈活的設計

  • 允許訪問本地功能和SDK

Flutter允許您複用現有的Java、Swift或ObjC代碼,訪問iOS和Android上的原生系統功能和系統SDK,通過平臺相關的API、第三方SDK和原生代碼讓您的應用變得強大易用

  • 統一的應用開發體驗

Flutter擁有豐富的工具和庫,可以幫助您輕鬆地同時在iOS和Android系統中實現您的想法和創意。 如果您沒有任何移動端開發體驗,Flutter是一種輕鬆快捷的方式來構建漂亮的移動應用程序。 如果您是一位經驗豐富的iOS或Android開發人員,則可以使用Flutter作爲視圖(View)層, 並可以使用已經用Java / ObjC / Swift完成的部分(Flutter支持混合開發)。

核心原則

Flutter包括一個現代的響應式框架、一個2D渲染引擎、現成的widget和開發工具。這些組件可以幫助您快速地設計、構建、測試和調試應用程序。

  • 一切皆爲widget

Widget是Flutter應用程序用戶界面的基本構建塊,根據佈局形成一個層次結構,每個widget嵌入其中,並繼承其父項的屬性

flutter_widget_層級.png

由上圖可以看出widget的層次結構很淺且很寬,可以最大限度的增加可能的組合數量

Flutter框架是一個分層的結構,每個層都建立在前一層之上。

Flutter  System overview .png

上圖顯示了框架的上層,它比下層的使用頻率更高。有關構成Flutter分層框架的完整庫,請參閱Flutter的API文檔

  • 構建widget

在Flutter中你所能看到的所有內容都是widget,我們通過實現widget的[build](https://docs.flutter.io/flutter/widgets/StatelessWidget/build.html)
返回widget層次結構來定義widget的獨特特徵。例如我們如果想要實現一個水平佈局,會選擇使用Row 類,其本身也是一個widget,然後向其children屬性中依次添加widget,代碼如下

Row(
  children: <Widget>[
    Expanded(
      child: Text('Deliver features faster', textAlign: TextAlign.center),
    ),
    Expanded(
      child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)

每當widget被要求構建時,widget都會返回一個新的層次結構,不管之前是什麼,Framwork層會將之前的和現在的做比較,確定需要對用戶界面進行哪些修改,這種比較就比較有效,可以實現高性能對交互式應用程序,也就是我們能夠及時看到自己所修改的部分。

  • 處理用戶交互

Flutter 中的widget包括兩種,一種是StatefulWidget,另一種是StatelessWidget,區別在於一個狀態可變,一個不可變。如果widget需要根據用戶交互或其他因素進行更改,則該widget是有狀態的,換句話說就是如果你的widget需要在某個時間有更新數據,則你的widget必須是StatefulWidget,如果你的widget在後續使用過程中不需要更改數據或者狀態,則使用StatelessWidget。StatefulWidget的可變狀態是存儲在State的子類當中。如下圖:

statefulwidget_state.png

每當我們改變一個State對象時,我們需要調用setState()方法來通知框架,框架會再次調用State的構建方法來更新用戶界面。

下面推薦幾個網站

後記:關於Flutter在實際項目中需要用到的技術和框架都會在我的開源項目中體現出來,目前已完成基本框架的搭建,ButtomNavigation + Pageview,後續還會有更多實用功能推出,感謝支持
項目地址:Flutter_Wheel

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章