8天讓iOS開發者上手Flutter之一：快速入門Flutter

flutter如今是愈來愈火了，如今做爲一個iOS開發，若是你不會flutter都好像不算個正常人似的？並且如今的flutter狀況，有點像2012年那會兒剛剛興起的iOS，Android開發同樣，會點皮毛UI就能夠提高很多身價...這些年過來，有無數的前端跨平臺框架興起。卻只有flutter一家獨秀，說明它仍是有兩把刷子的。今天這篇文章內容是基於Mac和Android Studio基礎來開發flutter的，若是你尚未配置好開發環境，能夠在網上搜索，或者直接到官網安裝。這篇文章主要用來記錄我學習flutter的過程，若是你也對flutter感興趣能夠跟着一塊兒練習。

配置好Flutter環境以後，開始建立咱們的第一個Flutter工程

建立第一個Flutter工程

打開iTerm2，cd到~/AndroidStudioProjects目錄，輸入如下命令，沒有iTerms的使用Mac系統自帶的Terminal也行。
flutter create flutter_demo
這裏須要注意，AndroidStudio項目名稱不能使用大寫字母，這裏推薦使用小寫字母加下劃線給工程命名。 打開對應的目錄，能夠看到新建了一個flutter_demo目錄
接下來，cd到flutter_demo目錄，在終端輸入flutter run命令，它就會運行項目，若是你電腦鏈接了真機，就會自動運行到真機上，沒有真機會去尋找模擬器並運行，模擬器也沒有，就會打開一個Chrome網頁運行項目(flutter項目目前能夠運行在iOS，Android，web上)。我這裏連上了iPhone真機，運行項目會報一個BUILD FAILED的錯誤: 緣由是flutter_demo項目生成的iOS項目默認的bundle identifier我們用不了，去iOS項目裏面修改一下就行了 這裏注意咱們免費的開發者證書，在iPhone上最多安裝3個開發中的APP，多了就安裝不了，刪掉以前的APP就行了，再次運行flutter run 能夠看到這裏給出了flutter運行的一些關鍵命令，Hot reload熱重載，這個特性對咱們開發UI時仍是比原生的體驗好很多的，它不用咱們從新運行項目就能看到UI的一些改變。Hot restart熱重啓，意思不用退出APP，就直接從新運行了。此時真機上就打開了咱們的第一個flutter工程的APP

HelloFlutter

上面是經過命令建立一個flutter項目，固然在實際開發過程我，咱們通常不會這麼操做。使用Android Studio來建立flutter項目。沒有這個選項的同窗，在Android Studio的插件裏面選擇flutter並安裝就有了，若是提示還須要安裝Dart就一塊安裝了，flutter使用的是Dart語言。iOS開發者不必被這個新語言給嚇到了，現代的語言基本都差不了太多，敲着敲着就熟悉了 點擊後會出現如下界面，目前咱們選擇Flutter App就行了 下一個界面會讓咱們設置工程名稱，工程位置，工程描述，工程組織，Android語言，iOS語言等等...我這裏設置工程名稱爲hello_flutter,其餘的默認選擇就行了...也能夠根據你本身的須要選擇 點擊Finish以後就能夠看到完整的工程目錄了，flutter工程的主入口，跟咱們iOS項目同樣有一個main.m文件，flutter的是main.dart文件，能夠看到這個文件裏面已經有很多初始的代碼了，今天是咱們第一次接觸flutter項目，就不要這裏的代碼，所有刪掉，咱們從第一行代碼開始本身敲出來

• 導入material.dart頭文件(至關於iOS中UIKit)
• 寫一個main()函數做爲主入口
• 調用runAPP()函數
• Center類是用來佈局的類，表示一個位置，child屬性表示他有的子控件的意思。Text類就是咱們文本類，有點兒咱們iOS的UILabel的意思，Text類的第一個參數就是具體的文本，省略了參數名，第二個參數textDirection表示文本顯示方向，咱們習慣的從左至右就是TextDirection.ltr，left to right。像一些阿拉伯語言，希伯來語的文字就是從右到左顯示的，我這裏試了一下hello world的方向並無變化，可能還須要其餘設置吧...
  

運行以後iPhone顯示以下：

自定義Widget

flutter裏面的Widget類叫做小部件，是flutter裏面常常用到的，它分爲有狀態的Stateful和Stateless無狀態的。其中無狀態的比較簡單，咱們先自定義一個類CustomWidget繼承自StatelessWidget。咱們自定義的Widget想要顯示到屏幕上須要實現一個build的函數，系統會調用這個函數來渲染咱們想要顯示到屏幕上的內容 這個時候，如何將咱們的hello flutter顯示到屏幕呢，能夠看到runApp函數裏面有一個Center類，咱們CustomWidget類的build方法也是返回的一個Center類，因此能夠直接將咱們CustomWidget初始化給runApp做參數 有些時候，咱們發現hot reload沒法更新界面，可使用hot restart，若是hot restart仍是沒法更新界面，那就須要從新運行一下就能夠了。此時咱們發現main()函數裏面就只有一句調用runApp()代碼，在Dart語言中，函數定義若是隻有一句代碼，那麼能夠省略成以下箭頭形式

設置文字樣式style

按住command再用鼠標左鍵點擊Text類，就會跳到一個text.dart文件，會看到一個this.style屬性，再次按住command點擊，會來到style的聲明部分： 這裏的final表示不可變，常量的意思，相似於Swift裏面的let。能夠看到style是一個TextStyle類型,查看TextStyle類，會發現裏面不少的屬性，好比color，backgroundColor，fontSize，fontWeight...這些都是很熟悉的屬性,接下來咱們設置一下hello flutter的一些文字樣式 使用Android Studio快捷鍵command + \查看界面

Material App

在flutter提供的頭文件material.dart中，提供了一個快速構建APP的類型MaterialApp，咱們可使用它來快速構建一個APP的基礎框架。
咱們先新建一個App類來寫咱們的代碼
而後咱們在App的build方法中，返回一個MaterialApp類，若是MaterialApp不傳入任何參數的話，運行後會發現APP整個屏幕變成紅色，而且顯示了一行文字，意思是出錯了之類的，說明咱們的MaterialApp應該是須要傳入一個必要的參數的。 沒錯就像咱們iOS的APP一樣須要一個rootViewController同樣，MaterialApp函數須要一個home參數，home參數能夠傳一個Widget類，若是傳入咱們剛剛寫的CustomWidget類，運行後發現有了一點不同的地方

右上角有一個debug的圖標，hello flutter下面也出現了兩條橫線。

flutter還提供了一個Scaffold的類，這個類翻譯過來叫做腳手架，有點像是咱們iOS中的一些基礎控制器(好比UITabBarController，UINavigationController)的封裝。咱們來使用一下這個類，這個Scaffold類有一個appBar的屬性，這個屬性就跟咱們的UINavigationController的UINavigationBar同樣，appBar是一個AppBar類型，它的title屬性能夠傳入一個Widget，咱們傳入一個Text類試試看。Scaffold類除了appBar屬性，還有一個body屬性表示的內容，把這個body設置爲咱們剛剛的CustomWidget，看看是什麼效果，代碼以下： APP上顯示效果：

這個時候，是否是發現像那麼回事了

MaterialApp還有一個theme的屬性，這個屬性用了配置app的主題，設置一下主題顏色代碼以下： APP上顯示效果：

初探ListView

在探索ListView以前，咱們先把模型實現一下，咱們這裏展現的一組關於汽車的圖片和名字，就定義一個Car類，咱們新建一個car文件用來存放咱們的模型代碼，代碼以下：

再定義一個數組，用來存放一組汽車模型，我這裏放了一組網絡圖片，你能夠直接使用，也能夠本身在網上找幾張圖片，填入模型數組中

final List<Car> cars = [
  Car(
    name: '保時捷918 Spyder',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '蘭博基尼Aventador',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '法拉利Enzo',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-a1d64cf5da2d9d99?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: 'Zenvo ST1',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-bf883b46690f93ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '邁凱倫F1',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-5a7b5550a19b8342?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '薩林S7',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-2e128d18144ad5b8?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '科尼賽克CCR',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-01ced8f6f95219ec?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '布加迪Chiron',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7fc8359eb61adac0?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '軒尼詩Venom GT',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-d332bf510d61bbc2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  Car(
    name: '西貝爾Tuatara',
    imageUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-3dd9a70b25ae6bc9?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  )
];
複製代碼

而後回到main.dart文件新建一個Home類，用來存放咱們ListView相關代碼,和Xcode同樣Android Studio一樣有代碼塊功能，直接輸入stl就會出現提示，回車就會生成StatelessWidget類相關代碼。咱們將Scaffold相關的代碼挪到Home中來。

接下來就是正式開始使用ListView了，ListView跟其餘通常的類不太同樣，它的初始化須要調用build方法，而且傳入兩個參數，一個是itemCount，一個是itemBuilder，有點相似咱們UITableView的cellForRow方法，只不過咱們UITableView使用的是代理的設計，而這裏的ListView使用的代碼塊回調的設計。

這裏說一個Android Studio的比Xcode好用的地方，如圖的itemCount使用了cars.length可是提示cars報錯，是由於沒有導入car.dart文件，給了個小紅燈泡。這個時候，咱們光標移動到Car類上，而後使用option + 回車會彈出一個菜單，再按一次回車就能夠導入咱們的car.dart文件了

itemBuilder屬性就是一個代碼塊，用來配置每一個item的樣式，咱們能夠先統一返回一個Text文本看看效果。 顯示效果就是相似於tableView同樣的一行行的文本

接下來介紹一個相似於UIView的容器類Container，它跟UIView相似，能夠設置一些顏色，間距，子控件之類的，咱們來試一下，將Text改成Container，child屬性就是子控件的意思，再給child設置爲Text，文本就是cars裏面的name，代碼以下： 再看一下顯示效果

那麼若是咱們如今想要顯示圖片加文字的話應該怎麼作呢？這裏再介紹一個Column類,和前面介紹Center類相似，一樣是屬於佈局的類，Column表示上下的佈局，由於咱們想把圖片和文字上下襬放，因此須要用到Column這個類。而後關於圖片的顯示，這裏咱們先不講怎麼去網絡請求，而是直接使用Image類提供的一個方法去加載網絡圖片，代碼如圖： 顯示效果如圖：

這個時候，你應該也猜到了，若是挪動children裏面Text和Image和順序，會發現圖片和文字的順序就交換了，是否是很容易理解。若是想要調整圖片和文字之間的間距怎麼調呢，使用SizedBox類，傳一個height就能夠調整間距了，也能夠繼續使用Container,代碼以下：

若是以爲itemBuilder的代碼太長，也能夠將它的代碼封裝到一個方法裏面，例如我這裏使用iOS中的_cellForRow來命名這個方法。使用下劃線的意義的是表示這是一個私有方法。

APP右上角會發現有一個debug圖標，這個圖標的顯示在MaterialApp類裏面有一個屬性能夠控制顯示隱藏。 debugShowCheckedModeBanner: false

經常使用Widget介紹

在介紹經常使用Widget以前，咱們想把剛剛寫的ListView相關代碼，封裝到一個文件內，這樣方便之後咱們回頭學習。listView_demo代碼以下： 這個時候，main.dart文件內的Home類的build方法裏，返回咱們的ListViewDemo初始化方法就好了。

而後再新建一個新的base_widget文件，用來存放咱們將要介紹的基礎Widget代碼。 能夠在main.dart文件中直接使用個人BaseWidgetDemo初始化方法，這樣咱們就不須要再去main.dart文件修改代碼了。每介紹一個新Widget直接修改BaseWidgetDemo的build方法返回值爲咱們的自定義類xxxDemo()就行了

第一個介紹是Text

Text

Text咱們一開始講過了，這裏就再講一點關於字符串相關的，若是須要拼接字符串可使用$符號，若是字符串中有特殊符號，那就使用${}。其餘Text經常使用的屬性，跟咱們iOS中都差不太多，須要注意的是Text的樣式，是在style裏面設置的。下面看一下APP顯示的效果

RichText

RichText就是富文本，它的text屬性能夠傳一個TextSpan的類，這個TextSpan類能夠設置text文本，設置style樣式，還能夠設置children子控件，這樣就能夠無限加花樣拼接各類字符串在一塊兒，代碼以下 APP上顯示的效果：

Container，Row

Container是個容器，Row是個用於佈局的類，跟Column，Center相似，根據代碼查看一下APP的顯示，就能大概明白意思了，代碼以下： APP顯示以下：

總結

今天介紹了Flutter裏面的許多的基礎Widget，有用於佈局的Center，Row，Column...有用於顯示文本的Text，RichText，TextSpan...有列表展現ListView，有基礎架構Scaffold，MaterialApp類，雖然東西有點多，但基本尚未什麼難以理解的內容