摘要：而在中，我們可以將看做是，但它與并不是完全等價的。中包含有狀態(tài)和無狀態(tài)，分別用和表示。在中，由于是不可變的，沒有與等價的功能函數(shù)。在中，要是先透明需要使用透明的包裝一下才能實(shí)現(xiàn)。近似于中的，的工作機(jī)制和中的一致。

文章概述

本人之前主要從事iOS開發(fā)工作，剛好Flutter文檔中有一篇Flutter for iOS developers的文檔，之前兩篇文章，我們大致上體驗(yàn)了Flutter，這篇文中我將從iOS開發(fā)者的角度來學(xué)習(xí)Flutter，與官方文檔不同的是，這篇文章會更注重實(shí)踐。由于文檔很長，我將用兩篇文章講解。這是第一篇。通過閱讀本篇文章，你講學(xué)習(xí)到如下內(nèi)容：

Widget與UIView的區(qū)別。

導(dǎo)航，如何在頁面間跳轉(zhuǎn)

Widget與UIView

對于我們iOS開發(fā)者來講，UIView再熟悉不過，它是我們構(gòu)建界面的必備元素。而在Flutter中，我們可以將Widget看做是UIView，但它與UIView并不是完全等價的。

對于Widget而言，它是不可變的，當(dāng)Widget所描述的界面需要改變的時候，F(xiàn)lutter是重新構(gòu)建一個Widget實(shí)現(xiàn)的。對于UIView而言，界面改變的時候并不是去重新繪制(除非調(diào)用setNeedsDisplay()方法)，而是屬性的改變。

更確切的說，Widget更輕量級，因?yàn)樗遣豢勺兊摹Ｋ皇荱I的描述，是對下層真實(shí)視圖對象的描述，而不是視圖本身，也不會去繪制任何東西。

Flutter包含 Material Components組件庫。這是一個遵循 Material Design guidelines 規(guī)范實(shí)現(xiàn)的控件，這是一個非常靈活的設(shè)計系統(tǒng)，并針對所有的系統(tǒng)進(jìn)行了優(yōu)化，包含iOS系統(tǒng)。

我們可以使用 Cupertino widgets 組件來實(shí)現(xiàn)遵循 Apple’s iOS design language 的界面。

如何更新Widgets

Flutter中更新widgets需要去操作它的state，不向UIView一樣，直接修改對象的屬性即可。Flutter中包含有狀態(tài)Widgets和無狀態(tài)Widgets，分別用StatefulWidget和 StatelessWidget 表示。

舉例來說：如果你只需要展示一個圖標(biāo)，并且它不會被改變，這時使用StatelessWidget 即可完成，但如果你需要根據(jù)網(wǎng)絡(luò)請求返回的結(jié)果來動態(tài)的設(shè)置圖片就需要使用StatefulWidget來完成了。

StatefulWidget和 StatelessWidget的最大區(qū)別是，StatefulWidget擁有一個存儲狀態(tài)數(shù)據(jù)的State對象，并且在整個Widget Tree構(gòu)建的過程中一直攜帶者它，永不丟失。

有一個簡單的記法：如果一個Widget在它的build方法之外改變，它就是有狀態(tài)的，如果在第一次構(gòu)建之后永不改變，它就是無狀態(tài)的。一個有狀態(tài)的Widget的父控件可以是無狀態(tài)的，只要父控件不受子控件狀態(tài)的影響即可。如Text就是一個無狀態(tài)的Widget組件。

// class Text extends StatelessWidget
Text(
  I like Flutter!,
  style: TextStyle(fontWeight: FontWeight.bold),
);

不難發(fā)現(xiàn)Text沒有攜帶任何狀態(tài)信息，只有通過構(gòu)造函數(shù)傳遞的信息。

如果要實(shí)現(xiàn)通過點(diǎn)擊事件來改變Text的文本信息，需要通過將Text用StatefulWidget包裹一下來實(shí)現(xiàn)，

代碼如下：

效果如下：

如何對Widget布局

In iOS, you might use a Storyboard file to organize your views and set constraints, or you might set your constraints programmatically in your view controllers. In Flutter, declare your layout in code by composing a widget tree.

The following example shows how to display a simple widget with padding:

在編寫iOS代碼的時候，你可以用Storyboard來構(gòu)建視圖和設(shè)置約束，或者在viewContoller中編寫約束代碼。在Flutter中，我們將布局代碼寫在Widget樹種。

下面的例子展示了一個使用padding的Widget：

代碼效果如下：


你可以對任何一個Widget使用padding屬性，它模擬了iOS中的約束功能。

widget layout這篇文章詳細(xì)介紹了Flutter所提供的布局功能。

如何從布局中添加或者刪除一個組件

在iOS中，我們可以調(diào)用父視圖的addSubview() 方法為父視圖添加可以子視圖，或者調(diào)用子視圖的removeFromSuperview()方法將自身從其父視圖中移除，通過以上兩個方法可以動態(tài)的添加或者移除子視圖。在Flutter中，由于widget是不可變的，沒有與addSubvie()等價的功能函數(shù)。在flutter中可以使用一個bool型變量來控制子視圖是否需要創(chuàng)建。

來看下面的例子：通過一個toggle變量來控制子視圖顯示的內(nèi)容：

效果如下：

如何設(shè)置Widget 動畫

在iOS中我們可以使用animate(withDuration:animations:)方法為一個view設(shè)置動畫，在Flutter中需要使用第三方庫來包裝widget而不是使用具體動畫屬性的widge。

在Flutter中，使用AnimationController 它是Animation 類型，可以控制一個動畫的終止，執(zhí)行，暫停和反轉(zhuǎn)。它需要一個Ticker ，當(dāng)垂直同步信號時產(chǎn)生在它執(zhí)行的每一幀都產(chǎn)生一個0到1之間的線性插值。你可以創(chuàng)建一個或者多個動畫綁定到這個controller上。

舉個例子：

你可能使用CurvedAnimation依據(jù)插值曲線來完成一個動畫，在這種場景下，controller是動畫執(zhí)行的"主人"，CurvedAnimation計算用來計算的曲線會代替controller默認(rèn)線性模式。

當(dāng)構(gòu)建widget樹你將Animation賦值給一個widget的動畫屬性，比如，FadeTransition的不透明度，然后告訴controller開始執(zhí)行動畫。

下面的例子展示了如何寫一個淡出動畫，當(dāng)點(diǎn)點(diǎn)擊了按鈕之后，logo會淡出顯示。

效果如下：

更多動畫相關(guān)的資料可以參考 Animation & Motion widgets, 和 Animations tutorial, 還有 Animations overview。

如何繪制到屏幕上

在iOS中，我們可以使用CoreGraphics可以將線條或者圖形繪制到屏幕上。Flutter中擁有一套不同的Api，它基于Canvas這個類，并結(jié)合 CustomPaint 和 CustomPainter 兩個類可以幫你實(shí)現(xiàn)屏幕繪制需求，CustomPainter 實(shí)現(xiàn)了繪制畫布的算法。

在Flutter中，實(shí)現(xiàn)畫筆程序 可以參考Collin 在 StackOverflow 上的答案，源碼在kitttn‘s github

效果如下：

widget的透明度在哪

在iOS中每個組件都有.opacity 或者 .alpha 屬性表示透明度。在Flutter中，要是先透明需要使用透明的widget包裝一下widget才能實(shí)現(xiàn)。

如何實(shí)現(xiàn)自定義widget

在iOS中，我們可以繼承UIView，或者使用已經(jīng)存在的視圖，通過重新和實(shí)現(xiàn)方法來實(shí)現(xiàn)期望的行為。在Flutter中，構(gòu)造一個自定的widget需要將系統(tǒng)提供的widget組合在一起。

舉個例子：如何自定義一個CustomButton， 它的構(gòu)造方法中攜帶一個label？可以通過將RaisedButton和label結(jié)合在一起，如下代碼：

導(dǎo)航

如何在多個頁面之間跳轉(zhuǎn)

在iOS中，多個viewController之間的轉(zhuǎn)化可以通過UINavigationController來實(shí)現(xiàn)，它管理著一組viewController的顯示。

Flutter中有類似的實(shí)現(xiàn)，使用Navigator和Router來實(shí)現(xiàn)，一個Router是一個app中screen或者page的抽象，Navigator是一個widget，它管理著多個router。router近似于iOS中的UIViewController，navigator的工作機(jī)制和iOS中的UINavigationController一致。所以它可以使用push()和pop()來將頁面導(dǎo)航到某個視圖或者返回到某個視圖。

在頁面之間跳轉(zhuǎn)，你可以使用下面的幾個方式：

指定一個由router名稱構(gòu)成的map。

直接跳轉(zhuǎn)到一個路由

如何跳轉(zhuǎn)到另一個app

在 iOS 中，要跳轉(zhuǎn)到其他 App，你需要一個特定的 URL Scheme。對系統(tǒng)級別的 App 來說，這個 scheme 取決于 App。為了在 Flutter 中實(shí)現(xiàn)這個功能，你可以創(chuàng)建一個原生平臺的整合層，或者使用現(xiàn)有的 plugin，例如 url_launcher。

如何跳轉(zhuǎn)到iOS原生的viewController

調(diào)用SystemNavigator.pop()方法相當(dāng)于調(diào)用下面iOS代碼：

UIViewController* viewController = [UIApplication sharedApplication].keyWindow.rootViewController;
  if ([viewController isKindOfClass:[UINavigationController class]]) {
    [((UINavigationController*)viewController) popViewControllerAnimated:NO];
  }

如果這樣達(dá)不到你的期望，你可以寫自己的跨平臺方案來調(diào)用iOS代碼。platform channel

小結(jié)

本文主要從iOS開發(fā)者的角度講述了Flutter開發(fā)中的幾個點(diǎn)，不知道你是否有所收獲，本文還有第二篇文章，敬請期待。

本文主要參考Flutter官方文檔，F(xiàn)lutter中文網(wǎng)。

由于排版原因，文中我使用了圖片的形式展示代碼，如果你需要源碼，可以關(guān)注我的公眾號，回復(fù)關(guān)鍵字"flutter"獲取相關(guān)代碼。

本文首發(fā)自微信公眾號【RiverLi】，歡迎你的關(guān)注與投稿。