Flutter入门
Flutter
Flutter是谷歌2018年在世界移動(dòng)大會(huì)上發(fā)布的移動(dòng)跨平臺(tái)框架，Flutter能夠同一份代碼開發(fā)IOS和Android、提高開發(fā)效率。在應(yīng)用程序運(yùn)行時(shí)更改代碼支持熱重載、修復(fù)崩潰并繼續(xù)從應(yīng)用程序停止的地方進(jìn)行調(diào)試。支持Material Design和Cupertino的設(shè)計(jì)風(fēng)格。缺點(diǎn)就是目前剛剛推出，只有beta版本，UI控件不是特別豐富。
Flutter是基于Dart語(yǔ)言開發(fā)的，Google的親兒子。Dart中文社區(qū)是一個(gè)不錯(cuò)學(xué)習(xí)Dart語(yǔ)言的網(wǎng)站，如果熟悉Java、JavaScript，那么學(xué)習(xí)Dart也會(huì)更加輕松。
環(huán)境搭建
- 下載Flutter SDK
可以去Flutter官網(wǎng)下載最新版本的SDK
- 安裝Android Studio插件支持
Android Studio環(huán)境搭建好的前提之下只需要在Android Studio中安裝Flutter、Dart兩個(gè) 插件即可。然后就能通過File——>New——>New Flutter Project。然后選擇Flutter的SDK目錄，填寫項(xiàng)目名稱，包名等信息就可以finish了。
經(jīng)過上面兩個(gè)簡(jiǎn)單的步驟基本可以開啟Flutter的Hello World之路了。
為什么要學(xué)習(xí)Flutter
從兼容性、開發(fā)成本、學(xué)習(xí)成本、性能、未來應(yīng)用前途等方面考慮
-
Native
Native的App性能最有無可否認(rèn)，畢竟是直接和內(nèi)核交互。因?yàn)锳ndroid、IOS是兩個(gè)不同的平臺(tái)開發(fā)成本較高。版本發(fā)布、迭代的時(shí)候遇到Bug需要繼續(xù)發(fā)包，這是十分令人頭疼的。一般大廠都是主要基本框架使用Native方案，例如商品活動(dòng)等頁(yè)面，頻繁刷新用戶視覺的頁(yè)面采用其他方案。
-
WebView
WebView方案就是加載Html頁(yè)面，方便簡(jiǎn)潔，能解決一些簡(jiǎn)單的功能，但是bug也挺多的，局限性較大，性能方面會(huì)比較卡，網(wǎng)頁(yè)加載緩慢，不同系統(tǒng)的不同版本兼容性極差。所以這種方案只適合開發(fā)一些簡(jiǎn)單的需求。
-
React Native
React Native是Face Book 2015年推出得一種快速開發(fā)移動(dòng)App的解決方案，React Native可以完全和Native交互，這樣React解決不了的問題可以使用Native方案解決。雖然需要為Android、IOS開發(fā)獨(dú)立的版本，但是80%的代碼的相同的，豐富的UI框架使得他比同類型的Weex優(yōu)勢(shì)很大，React Native可以更加方便地?zé)岣隆Ｐ阅芊奖惚萕ebView要高。React Native 沒有熱重載等類似功能開發(fā)效率不高。開發(fā)的應(yīng)用體積較大，因?yàn)樵枷到y(tǒng)版本太多，兼容性也還是有問題的。最近傳言React Native Bug頻出，不知道后續(xù)版本會(huì)如何。
-
Flutter
Flutter在性能上和原生沒有什么差距，因?yàn)樗徊捎脼g覽器技術(shù)，他是使用自己的渲染引擎來渲染W(wǎng)idget，Flutter支持熱重載，提高了開發(fā)效率，可以使用一套代碼開發(fā)IOS和Android，Flutter的UI支持Material Design和Cupertino的設(shè)計(jì)風(fēng)格,能夠滿足移動(dòng)端開發(fā)的需求。Flutter是Google官方推出，前途不錯(cuò)，并且可以開發(fā)Google Fuchsia。
一切皆Widget
根據(jù)下面的Flutter的架構(gòu)圖可以看出Flutter中一切皆Widget，Widget根據(jù)是否存在可變狀態(tài)分為兩類。StatelessWidget(無可變狀態(tài)Widget)和StatefulWidget(存在可變狀態(tài)Widget)。
基礎(chǔ)Widget
- Text：該Widget可創(chuàng)建一個(gè)帶格式的文本。
- Row、Column：這些具有彈性空間的布局類Widget可讓您在水平（Row）和垂直（Column）方向上創(chuàng)建靈活的布局。
- Stack：取代LinearLayout，Stack允許子Widget堆疊。你可以使用 Positioned 來定位他們相對(duì)于Stack的上下左右四條邊的位置。Stacks是基于Web開發(fā)中的絕度定位（absolute positioning )布局模型設(shè)計(jì)的。
- Container：Container可讓您創(chuàng)建矩形視覺元素。Container可以裝飾為一個(gè)BoxDecoration，如background、一個(gè)邊框、或者一個(gè)陰影。Container也可以具有margin，padding和 應(yīng)用于其大小的約束。另外，Container可以使用矩陣在三維空間中對(duì)其進(jìn)行交換。
轉(zhuǎn)載于:https://juejin.im/post/5be3d409f265da614a39fb4a
總結(jié)
- 上一篇： 使用PHP CURL 模拟HTTP实现在
- 下一篇： 二分图再次总结