Flutter框架概覽

Flutter是一款移動應用程序SDK,一份代碼可以同時生成iOS和Android兩個高性能、高保真的應用程序。目標是使開發人員能夠交付在不同平臺上都感覺自然流暢的高性能應用程序

Flutter是什么?

Flutter是一款移動應用程序SDK,一份代碼可以同時生成iOS和Android兩個高性能、高保真的應用程序。

Flutter目標是使開發人員能夠交付在不同平臺上都感覺自然流暢的高性能應用程序。我們兼容滾動行為、排版、圖標等方面的差異。

這是一個來自Gallery的演示應用程序, 您可以在安裝Flutter并設置好環境后運行Flutter示例應用程序。“Shrine”示例擁有高質量的滾動圖片、互動卡片、按鈕、下拉列表和購物車頁面。 要查看這個和更多示例的代碼,請訪問我們的GitHub

無需移動開發經驗即可開始使用。應用程序是用Dart語言編寫的,如果您使用過Java或JavaScript之類的語言,則該應用程序看起來很熟悉。 使用面向對象語言的經驗絕對有幫助,但一些Flutter應用程序甚至是沒有編程經驗的人寫的!

為什么要使用Flutter?

Flutter有什么優勢?它可以幫助你:

  • 提高開發效率
    • 同一份代碼開發iOS和Android
    • 用更少的代碼做更多的事情
    • 輕松迭代
      • 在應用程序運行時更改代碼并重新加載(通過熱重載)
      • 修復崩潰并繼續從應用程序停止的地方進行調試
  • 創建美觀,高度定制的用戶體驗
    • 受益于使用Flutter框架提供的豐富的Material Design和Cupertino(iOS風格)的widget
    • 實現定制、美觀、品牌驅動的設計,而不受原生控件的限制

核心原則

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

一切皆為widget

Widget是Flutter應用程序用戶界面的基本構建塊。每個Widget都是用戶界面一部分的不可變聲明。 與其他將視圖、控制器、布局和其他屬性分離的框架不同,Flutter具有一致的統一對象模型:widget。

Widget可以被定義為:

  • 一個結構元素(如按鈕或菜單)
  • 一個文本樣式元素(如字體或顏色方案)
  • 布局的一個方面(如填充)
  • 等等...

Widget根據布局形成一個層次結構。每個widget嵌入其中,并繼承其父項的屬性。沒有單獨的“應用程序”對象,相反,根widget扮演著這個角色。

您可以通過告訴框架使用另一個widget替換層次結構中的widget來響應事件,例如用戶交互,替換后框架會比較新的和舊的widget,并高效地更新用戶界面。

組合 > 集成

Widget本身通常由許多更小的、單一用途widget組成,這些widget結合起來產生強大的效果。例如,Container是一個常用的widget, 由多個widget組成,這些widget負責布局、繪制、定位和調整大小。具體來說,Container由 LimitedBoxConstrainedBoxAlignPaddingDecoratedBox、 和Transform組成。 您可以用各種方式組合這些以及其他簡單的widget,而不是繼承容器。

類層次結構很淺且很寬,可以最大限度地增加可能的組合數量。

您還可以通過與其他widget組合來控制widget的布局。例如,要將widget居中,可以將其封裝在Center widget中。有填充、對齊、行、列和網格的widget。 這些布局widget沒有自己的可視化表示。相反,他們唯一的目的是控制另一個widget布局的某些方面。要理解widget以某種方式呈現的原因,檢查相鄰widget通常很有幫助。

分層的框架

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

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

這個設計的目標是幫助你用更少的代碼做更多的事情。例如,Material層是通過組合來自Widget層的基本Widget來構建的, 并且Widgets層本身是通過較低級對象渲染層構建的。

層為構建應用程序提供了許多選項。選擇一種自定義的方法來釋放框架的全部表現力,或者使用構件層中的構建塊,或混合搭配。 您可以實現Flutter提供的所有現成的widget,或者使用Flutter團隊用于構建框架的相同工具和技術創建您自己的定制widget。

沒有什么是隱藏的。您可以從高層次,統一的widget概念中獲得開發效率優勢,而不會犧牲您希望深入到下層的能力。

構建widget

您可以通過實現widget的build返回widget樹(或層次結構)來定義widget的獨特特征 。 這棵樹更具體地表示了用戶界面的widget層次。例如,工具欄widget的build函數可能返回一個包含一些文本和各種按鈕的水平布局。 然后,框架遞歸地構建widget,直到該所有widget構建完成,然后framework將他們一起添加到樹中。

widget的構建函數一般沒有副作用。每當它被要求構建時,widget應該返回一個新的widget樹,無論widget以前返回的是什么。 Framework會將之前的構建與當前構建進行比較并確定需要對用戶界面進行哪些修改。

這種自動比較非常有效,可以實現高性能的交互式應用程序。而構建函數的設計則著重于聲明widget是由什么構成的,而不是將用戶界面從一個狀態更新到另一個狀態的(這很復雜性),從而簡化了代碼。

處理用戶交互

如果widget需要根據用戶交互或其他因素進行更改,則該widget是有狀態的。例如,如果一個widget的計數器在用戶點擊一個按鈕時遞增,那么該計數器的值就是該widget的狀態。 當該值發生變化時,需要重新構建widget以更新UI。

這些widget將繼承StatefulWidget(而不是State)并將它們的可變狀態存儲在State的子類中。

每當你改變一個State對象時(例如增加計數器),你必須調用setState()來通知框架,框架會再次調用State的構建方法來更新用戶界面。 有關管理狀態的示例,請參閱創建新Flutter項目時的MyApp 模板

有了獨立的狀態和widget對象,其他widget可以以同樣的方式處理無狀態和有狀態的widget,而不必擔心丟失狀態。 父widget可以自由地創造子widget的新實例且不會失去子widget的狀態,而不是通過持有子widget來維持其狀態。 框架在適當的時候完成查找和重用現有狀態對象的所有工作。

試試!

現在您已經熟悉了Flutter框架的基本結構和原理,以及如何構建應用程序并和其交互,您就可以開始開發和迭代了。

接下來的步驟:

  1. 查看Flutter 環境安裝.
  2. 嘗試在Flutter中構建布局給Flutter App添加交互.
  3. 查看Widget框架概覽.

支持

Flutter是開源的,我們很樂意聽到你的聲音!

我們鼓勵您以各種方式參與并加入對話。


所屬標簽

無標簽

官方入門指南

Flutter官方發布的入門指導,包括了如何在不同的平臺(Windows, Mac, Linux)上搭建開發環境,以及一些入門級的指導,以便您從零開始進入Flutter的世界,同時,一些Flutter的框架API,也是您開發時必不可少的工具書。

從這里進入


25选5玩法中奖