溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么制作Flutter應用

發(fā)布時間:2021-12-22 13:57:59 來源:億速云 閱讀:122 作者:小新 欄目:移動開發(fā)

這篇文章主要介紹怎么制作Flutter應用,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

1. Flutter 是什么?

Flutter 是 Google 開源的 UI 工具包,幫助開發(fā)者通過一套代碼庫高效構建多平臺精美應用,支持移動、Web ([early access][])、桌面和嵌入式平臺。

Flutter 旨在幫助開發(fā)者創(chuàng)作媲美原生的高性能應用,并遵從了各個平臺不同的滾動行為、排版布局、圖標樣式等。這是一個名為 Gallery 的示例應用, Gallery 是一個在安裝完 Flutter 并配置好環(huán)境后可以立即運行的 Flutter 示例應用集合。

Shrine 有高質(zhì)量的滾動圖片、交互式卡片、按鈕、下拉列表以及一個購物車頁面。開始開發(fā)之前無需移動開發(fā)經(jīng)驗。應用使用 Dart 開發(fā),如果你曾使用過 Java 或者 JavaScript 語言,那么 Dart 看上去會很熟悉。

面向?qū)ο缶幊痰慕?jīng)驗對開發(fā)毫無疑問會有幫助,但即便不是程序員也可以制作 Flutter 應用!

2. 為什么使用 Flutter?

Flutter 的優(yōu)勢是什么?它能夠幫你:

高效率
  • 在應用運行時嘗試修改代碼并重載(通過熱重載)

  • 修復崩潰并從應用停止的地方開始繼續(xù)調(diào)試

  • 利用單一代碼庫開發(fā) iOS 與 Android 應用

  • 即便在單一操作系統(tǒng)上,也可以通過使用現(xiàn)代、富有表現(xiàn)力的語言以及聲明式方法,寫更少代碼做更多事

  • 原型與輕松迭代

生成美觀、高度定制化的用戶體驗
  • 受益于用 Flutter 框架構建的豐富的 Material Design 以及 Cupertino (iOS 風格) widget

  • 實現(xiàn)定制、美觀、品牌驅(qū)動的設計,不受 OEM widget 集合的限制

3. 核心原則

Flutter 包含一個現(xiàn)代響應式框架,一個 2D 渲染引擎,現(xiàn)成的 widget 以及開發(fā)工具。這些組件協(xié)同工作以幫助你設計、構建、測試和調(diào)試應用。所有這一切都圍繞幾個核心原則進行組織。

3.1 一切皆 Widget**

Widget 是 Flutter 應用用戶界面的基本構建單元,每個 widget 都與最終的用戶界面的展示緊密相關。不同于其他框架和平臺 —— 將視圖 (views)、視圖控制器 (view controllers)、布局 (layouts) 等其他屬性分開, Flutter 擁有統(tǒng)一的對象模型:widget。一個 widget 可以定義:

  • 一個結構元素(比如一個按鈕或者菜單)

  • 一個風格元素(比如一個字體或者配色方案)

  • 布局的一個方面(比如 padding)

  • 等等……

Widget 通過組合形成一個層次結構,每個 widget 嵌套其中,從其父節(jié)點繼承屬性。Flutter 中沒有單獨的“application”對象,與之相對應的功能由 root widgets 承擔。

你可以通過告訴框架將層次結構中的一個 widget 替換為另一個來響應事件,如用戶交互??蚣軐Ρ刃屡f widget 并及時更新用戶界面。

3.1.1 組合大于繼承

Widgets 本身往往是由許多小的、具有單一用途的 widget 組成,它們組合在一起可以產(chǎn)生強大的效果。比如,Container 是一個常用的 widget,由負責布局、繪制、定位和尺寸的幾個 widget 組成。

具體來說,Container 是由 LimitedBox、ConstrainedBox、AlignPadding、 DecoratedBox 和 Transform widgets 組成的。

你可以將這些與其它小而簡單的 widgets 用新穎的方式組合,而不是子類化 Container 以生成自定義效果。類層次結構是淺而廣的,以支持盡可能多的組合。

你也可以通過組合其它 widgets 以達到控制一個 widget 的布局。例如,為了居中一個 widget,你可以把它包裹在一個 Center widget 中。還有用于設置間距、對齊、行、列以及網(wǎng)格的 widgets,這些布局 widgets 本身并沒有視覺表現(xiàn)。

反之,他們唯一的目的是在某些方面上控制另一個 widget 的布局。要了解一個 widget 以某種方式呈現(xiàn)的原因,查看其鄰近 widgets 通常很有幫助。

3.1.2 層次蛋糕非常美味

Flutter 框架由一系列層結構組成,每一層都建立在前一層之上。

怎么制作Flutter應用

框架上層會比下層使用的更頻繁。

這樣做的目的是為了幫助你用更少的代碼完成更多工作。
例如,通過在 widgets 層組合基礎 widgets 來構建 Material 層,而 widgets 層本身則是通過對來自 Rendering 層的低層次對象組合而來。這些層次為構建應用程序提供了許多選項。選擇一種自定義方法來釋放框架的全部表現(xiàn)力,或使用 widgets 層中的構建塊,或混合搭配。

你可以組合 Flutter 提供的現(xiàn)成 widgets 或使用 Flutter 團隊在構建框架時所使用的相同工具和技術來構建你的自定義 widgets。沒有任何內(nèi)容可以逃離你的視線,因此可以在生產(chǎn)力上從高級別、統(tǒng)一的 widget 概念中獲益,且不會犧牲你想深入更底層時的能力。

3.2 構建 widget

可以通過完善 build() 函數(shù)來定義一個 widget 擁有的特性,該函數(shù)返回一個 widget 樹(或者層次結構)。該樹通過更具體的方式來表示用戶界面上的 widget 部分。

例如,一個 toolbar widget 可能會有一個返回一些 水平布局 文本 和 各種 按鈕 的構建函數(shù)。

框架會遞歸地去構建這些 widget 直到達到最底層 完全具象的 widgets,然后將它們拼接成一棵樹。一個 widget 的構建函數(shù)應該沒有副作用。

不論何時調(diào)用,widget 總應該返回一顆新的 widgets 樹,不論其之前返回了什么??蚣軙⑾惹皹嫿ㄅc當前構建仔細進行比較,并確定需要對用戶界面做哪些修改。

這種自動比較非常有效,可實現(xiàn)高性能的交互式應用。構建函數(shù)在設計上通過專注聲明 widget 的構成,而不是處理更新用戶界面狀態(tài)的復雜性,來達到簡化代碼的目的。

3.3 處理用戶交互

如果一個 widget 的特性需要根據(jù)用戶交互或其他因素改變,那么這個 widget 是有狀態(tài)的。例如,如果一個 widget 包含一個隨用戶點擊按鈕而遞增的計數(shù)器,則計數(shù)器的值便是 widget 的狀態(tài)。

當該值更改時,則需要重新構建 widget 以更新 UI。這些 widget 繼承自 StatefulWidget(而不是 StatelessWidget)并將它們可變的狀態(tài)存儲在 State 的一個子類中。

不論何時你操作一個 State 對象(例如,遞增計數(shù)器),你必須調(diào)用 setState() 方法來通知框架通過重新調(diào)用 State 的構建函數(shù),以此達到更新用戶界面的目的。

有關狀態(tài)管理的示例,可以查看隨著任何一個新 Flutter 項目生成的 MyApp 模版。將狀態(tài)與 widgets 對象分開可以讓其他 widgets 以相同的方式處理無狀態(tài)和有狀態(tài)的 widget,而不用擔心丟失狀態(tài)。不同于通過維持一個子節(jié)點來保留狀態(tài),父節(jié)點可以自由地創(chuàng)建子節(jié)點實例,而不會丟失子節(jié)點的持久狀態(tài)??蚣軙谶m當?shù)臅r候做完查找和重用現(xiàn)有狀態(tài)對象的所有工作。

以上是“怎么制作Flutter應用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI