Flutter 系列文章:初識Flutter

sometime-rock發表於2019-03-19
  • what is flutter

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

  • what is flutter widget

一. 一切皆為widget

Widget是Flutter應用程式使用者介面的基本構建塊。每個Widget都是使用者介面的一部分。 它與其它將檢視、控制器、佈局和其他屬性分離的框架不同,Flutter具有一致的統一物件模型:widget。

二. Widget 怎麼定義

  • 一個結構元素(如按鈕或選單)
  • 一個文字樣式元素(如字型或顏色方案)
  • 佈局的一個方面(如填充) 等等… Widget根據佈局形成一個層次結構。每個widget嵌入其中,並繼承其父項的屬性。沒有單獨的“應用程式”物件,相反,根widget扮演著這個角色。

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

三. Widget 怎麼分類

  • 按是widget是否需要根據使用者互動或其他因素進行更改進行有狀態跟無狀態進行分類

1、有狀態的widget-->StatefulWidget

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

2、無狀態的widget-->StatelessWidget

如果widget不需要根據使用者互動或其他因素進行更改,則該widget是無狀態的
複製程式碼
  • 按控制元件型別進行分類

1. 基礎元件

2. Material Components

實現了Material Design 指南的視覺、效果、motion-rich的widget
複製程式碼

3. Cupertino(iOS風格的widget)

用於當前iOS設計語言的美麗和高保真widget
複製程式碼

4. Layout

排列其它widget的columns、rows、grids和其它的layouts
複製程式碼

5. Text

文字顯示和樣式
複製程式碼

6. Assets、圖片、Icons

管理assets, 顯示圖片和Icon
複製程式碼

7. Input

Material Components 和 Cupertino中獲取使用者輸入的widget
複製程式碼

8. 動畫和Motion

在您的應用中使用動畫。檢視Flutter中的動畫總覽
複製程式碼

9. 互動模型

響應觸控事件並將使用者路由到不同的頁面檢視(View)
複製程式碼

10. 樣式

管理應用的主題,使應用能夠響應式的適應螢幕尺寸或新增填充
複製程式碼

11. 繪製和效果

Widget將視覺效果應用到其子元件,而不改變它們的佈局、大小和位置
複製程式碼

12. Async

Flutter應用的非同步模型
複製程式碼

13. 滾動

滾動一個擁有多個子元件的父元件
複製程式碼

14. 輔助功能

給你的App新增輔助功能(這是一個正在進行的工作)
複製程式碼

相關文章