為您解碼網(wǎng)站建設(shè)的點(diǎn)點(diǎn)滴滴
發(fā)表日期:2018-11 文章編輯:小燈 瀏覽次數(shù):4387
Flutter目標(biāo)是使開發(fā)人員能夠交付在不同平臺(tái)上都感覺自然流暢的高性能應(yīng)用程序。我們兼容滾動(dòng)行為、排版、圖標(biāo)等方面的差異。
Flutter組件采用現(xiàn)代響應(yīng)式框架構(gòu)建,這是從React中獲得的靈感,中心思想是用組件(widget)構(gòu)建UI。 組件描述了在給定其當(dāng)前配置和狀態(tài)時(shí)他們顯示的樣子。當(dāng)組件狀態(tài)改變,組件會(huì)重構(gòu)它的描述(description),F(xiàn)lutter會(huì)對(duì)比之前的描述, 以確定底層渲染樹從當(dāng)前狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需要的最小更改。
Dart是谷歌開發(fā)的計(jì)算機(jī)編程語言,它被用于web、服務(wù)器、移動(dòng)應(yīng)用和物聯(lián)網(wǎng)等領(lǐng)域的開發(fā)。它是寬松開源許可證(修改的BSD證書)下的開源軟件。
Dart是面向?qū)ο蟮?、類定義的、單繼承的語言。它的語法類似C語言,可以轉(zhuǎn)譯為JavaScript,支持接口(interfaces)、混入(mixins)、抽象類(abstract classes)、具體化泛型(reified generics)、可選類型(optional typing)和sound type system 。
毫秒級(jí)的熱重載,修改后,您的應(yīng)用界面會(huì)立即更新。
Flutter的熱重載可幫助您快速地進(jìn)行測(cè)試、構(gòu)建UI、添加功能并更快地修復(fù)錯(cuò)誤。在iOS和Android模擬器或真機(jī)上可以在亞秒內(nèi)重載,并且不會(huì)丟失狀態(tài)。
Flutter內(nèi)置美麗的Material Design和Cupertino(iOS風(fēng)格)widget、豐富的motion API、平滑而自然的滑動(dòng)效果和平臺(tái)感知,為用戶帶來全新體驗(yàn)。
使用Flutter的現(xiàn)代、響應(yīng)式框架,和一系列基礎(chǔ)widget,輕松構(gòu)建您的用戶界面。使用功能強(qiáng)大且靈活的API(針對(duì)2D、動(dòng)畫、手勢(shì)、效果等)解決艱難的UI挑戰(zhàn)。
class CounterState extends State<Counter> { int counter = 0;void increment() { // 告訴Flutter state已經(jīng)改變, Flutter會(huì)調(diào)用build(),更新顯示 setState(() { counter++; }); }Widget build(BuildContext context) { // 當(dāng) setState 被調(diào)用時(shí),這個(gè)方法都會(huì)重新執(zhí)行. // Flutter 對(duì)此方法做了優(yōu)化,使重新執(zhí)行變的很快 // 所以你可以重新構(gòu)建任何需要更新的東西,而無需分別去修改各個(gè)widget return new Row( children: <Widget>[ new RaisedButton( onPressed: increment, child: new Text('Increment'), ), new Text('Count: $counter'), ], ); } }
通過平臺(tái)相關(guān)的API、第三方SDK和原生代碼讓您的應(yīng)用變得強(qiáng)大易用。 Flutter允許您復(fù)用現(xiàn)有的Java、Swift或ObjC代碼,訪問iOS和Android上的原生系統(tǒng)功能和系統(tǒng)SDK。
Flutter擁有豐富的工具和庫,可以幫助您輕松地同時(shí)在iOS和Android系統(tǒng)中實(shí)現(xiàn)您的想法和創(chuàng)意。如果您是一位iOS或Android開發(fā)人員,則可以使用Flutter作為視圖(View)層, 并可以使用已經(jīng)用Java / Kotlin / ObjC / Swift完成的部分(Flutter支持混合開發(fā))。
Flutter介紹視頻: https://youtu.be/fq4N0hgOWzU
Flutter包括一個(gè)現(xiàn)代的響應(yīng)式框架、一個(gè)2D渲染引擎、現(xiàn)成的widget和開發(fā)工具。這些組件可以幫助您快速地設(shè)計(jì)、構(gòu)建、測(cè)試和調(diào)試應(yīng)用程序。
Flutter Widget框架概述
Widget是Flutter應(yīng)用程序用戶界面的基本構(gòu)建塊。每個(gè)Widget都是用戶界面一部分的不可變聲明。 與其他將視圖、控制器、布局和其他屬性分離的框架不同,F(xiàn)lutter具有一致的統(tǒng)一對(duì)象模型:widget。
Widget可以被定義為:
Widget根據(jù)布局形成一個(gè)層次結(jié)構(gòu)。每個(gè)widget嵌入其中,并繼承其父項(xiàng)的屬性。沒有單獨(dú)的“應(yīng)用程序”對(duì)象,相反,根widget扮演著這個(gè)角色。
您可以通過告訴框架使用另一個(gè)widget替換層次結(jié)構(gòu)中的widget來響應(yīng)事件,例如用戶交互,替換后框架會(huì)比較新的和舊的widget,并高效地更新用戶界面。
Widget本身通常由許多更小的、單一用途widget組成,這些widget結(jié)合起來產(chǎn)生強(qiáng)大的效果。例如,Container是一個(gè)常用的widget, 由多個(gè)widget組成,這些widget負(fù)責(zé)布局、繪制、定位和調(diào)整大小。 您可以用各種方式組合這些以及其他簡單的widget,而不是繼承容器。
類層次結(jié)構(gòu)很淺且很寬,可以最大限度地增加可能的組合數(shù)量。
Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.
Stateful widgets 持有的狀態(tài)可能在widget生命周期中發(fā)生變化. 實(shí)現(xiàn)一個(gè) stateful widget 至少需要兩個(gè)類:
1.一個(gè) StatefulWidget類。
2.一個(gè) State類。 StatefulWidget類本身是不變的,但是 State類在widget生命周期中始終存在。
還可以通過與其他widget組合來控制widget的布局。例如,要將widget居中,可以將其封裝在Center widget中。有填充、對(duì)齊、行、列和網(wǎng)格的widget。 這些布局widget沒有自己的可視化表示。相反,他們唯一的目的是控制另一個(gè)widget布局的某些方面。要理解widget以某種方式呈現(xiàn)的原因,檢查相鄰widget通常很有幫助。
Flutter框架是一個(gè)分層的結(jié)構(gòu),每個(gè)層都建立在前一層之上。
這個(gè)設(shè)計(jì)的目標(biāo)是幫助你用更少的代碼做更多的事情。例如,Material層是通過組合來自Widget層的基本W(wǎng)idget來構(gòu)建的, 并且Widgets層本身是通過較低級(jí)對(duì)象渲染層構(gòu)建的。
層為構(gòu)建應(yīng)用程序提供了許多選項(xiàng)。選擇一種自定義的方法來釋放框架的全部表現(xiàn)力,或者使用構(gòu)件層中的構(gòu)建塊,或混合搭配。 您可以實(shí)現(xiàn)Flutter提供的所有現(xiàn)成的widget,或者使用Flutter團(tuán)隊(duì)用于構(gòu)建框架的相同工具和技術(shù)創(chuàng)建您自己的定制widget。
可以通過實(shí)現(xiàn)widget的build返回widget樹(或?qū)哟谓Y(jié)構(gòu))來定義widget的獨(dú)特特征 。 這棵樹更具體地表示了用戶界面的widget層次。例如,工具欄widget的build函數(shù)可能返回一個(gè)包含一些文本和各種按鈕的水平布局。 然后,框架遞歸地構(gòu)建widget,直到該所有widget構(gòu)建完成,然后framework將他們一起添加到樹中。
widget的構(gòu)建函數(shù)一般沒有副作用。每當(dāng)它被要求構(gòu)建時(shí),widget應(yīng)該返回一個(gè)新的widget樹,無論widget以前返回的是什么。 Framework會(huì)將之前的構(gòu)建與當(dāng)前構(gòu)建進(jìn)行比較并確定需要對(duì)用戶界面進(jìn)行哪些修改。
這種自動(dòng)比較非常有效,可以實(shí)現(xiàn)高性能的交互式應(yīng)用程序。而構(gòu)建函數(shù)的設(shè)計(jì)則著重于聲明widget是由什么構(gòu)成的,而不是將用戶界面從一個(gè)狀態(tài)更新到另一個(gè)狀態(tài)的(這很復(fù)雜性),從而簡化了代碼。
如果widget需要根據(jù)用戶交互或其他因素進(jìn)行更改,則該widget是有狀態(tài)的。例如,如果一個(gè)widget的計(jì)數(shù)器在用戶點(diǎn)擊一個(gè)按鈕時(shí)遞增,那么該計(jì)數(shù)器的值就是該widget的狀態(tài)。 當(dāng)該值發(fā)生變化時(shí),需要重新構(gòu)建widget以更新UI。
這些widget將繼承StatefulWidget(而不是State)并將它們的可變狀態(tài)存儲(chǔ)在State的子類中。
每當(dāng)你改變一個(gè)State對(duì)象時(shí)(例如增加計(jì)數(shù)器),你必須調(diào)用setState()來通知框架,框架會(huì)再次調(diào)用State的構(gòu)建方法來更新用戶界面。
有了獨(dú)立的狀態(tài)和widget對(duì)象,其他widget可以以同樣的方式處理無狀態(tài)和有狀態(tài)的widget,而不必?fù)?dān)心丟失狀態(tài)。 父widget可以自由地創(chuàng)造子widget的新實(shí)例且不會(huì)失去子widget的狀態(tài),而不是通過持有子widget來維持其狀態(tài)。 框架在適當(dāng)?shù)臅r(shí)候完成查找和重用現(xiàn)有狀態(tài)對(duì)象的所有工作。
Flutter Widget 索引
Flutter支持使用由其他開發(fā)者貢獻(xiàn)給Flutter和Dart生態(tài)系統(tǒng)的共享軟件包。這使您可以快速構(gòu)建應(yīng)用程序,而無需從頭開始開發(fā)所有應(yīng)用程序。
現(xiàn)有的軟件包支持許多使用場(chǎng)景,例如,網(wǎng)絡(luò)請(qǐng)求(http
),自定義導(dǎo)航/路由處理(fluro
), 集成設(shè)備API(如url_launcher
&battery
) 以及使用第三方平臺(tái)SDK(如 Firebase
)。
Packages會(huì)被發(fā)布到了 Pub 包倉庫.
Flutter landing 頁面 顯示了與Flutter兼容的包。所有已發(fā)布的包都支持搜索。
要將包’css_colors’添加到應(yīng)用中,請(qǐng)執(zhí)行以下操作:
1.添加依賴
2.下載安裝
3.導(dǎo)入
即使未在Pub上發(fā)布,軟件包也可以使用。對(duì)于不用于公開發(fā)布的專用插件,或者尚未準(zhǔn)備好發(fā)布的軟件包,可以使用其他依賴項(xiàng)選項(xiàng):
dependencies: plugin1: path: ../plugin1/
dependencies: plugin1: git: url: git://github.com/flutter/plugin1.git
dependencies:package1:git:url: git://github.com/flutter/packages.gitpath: packages/package1
Flutter使用了一個(gè)靈活的系統(tǒng),允許您調(diào)用特定平臺(tái)的API,無論在Android上的Java或Kotlin代碼中,還是iOS上的ObjectiveC或Swift代碼中均可用。
Flutter平臺(tái)特定的API支持不依賴于代碼生成,而是依賴于靈活的消息傳遞的方式:
應(yīng)用的Flutter部分通過平臺(tái)通道(platform channel)將消息發(fā)送到其應(yīng)用程序的所在的宿主(iOS或Android)。
宿主監(jiān)聽的平臺(tái)通道,并接收該消息。然后它會(huì)調(diào)用特定于該平臺(tái)的API(使用原生編程語言) - 并將響應(yīng)發(fā)送回客戶端,即應(yīng)用程序的Flutter部分。
消息和響應(yīng)是異步傳遞的,以確保用戶界面保持響應(yīng)。
示例:使用Java添加Android平臺(tái)特定的實(shí)現(xiàn)
1.添加平臺(tái)通道
在android -> java目錄中打開MainActivity.java.
接下來,在onCreate里創(chuàng)建MethodChannel并設(shè)置一個(gè)MethodCallHandler。確保使用與在Flutter客戶端使用的通道名稱相同。
import io.flutter.app.FlutterActivity; import io.flutter.plugin.common.MethodCall; import io.flutter.plugin.common.MethodChannel; import io.flutter.plugin.common.MethodChannel.MethodCallHandler; import io.flutter.plugin.common.MethodChannel.Result;public class MainActivity extends FlutterActivity { private static final String CHANNEL = "samples.flutter.io/battery";@Override public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler( new MethodCallHandler() { @Override public void onMethodCall(MethodCall call, Result result) { // TODO } }); } }
然后,將下面的新方法添加到activity類中的,位于onCreate 方法下方:
private int getBatteryLevel() { int batteryLevel = -1; if (VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) { BatteryManager batteryManager = (BatteryManager) getSystemService(BATTERY_SERVICE); batteryLevel = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY); } else { Intent intent = new ContextWrapper(getApplicationContext()). registerReceiver(null, new IntentFilter(Intent.ACTION_BATTERY_CHANGED)); batteryLevel = (intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) * 100) / intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1); }return batteryLevel; }
最后,我們完成之前添加的onMethodCall方法。我們需要處理平臺(tái)方法名為getBatteryLevel,所以我們?cè)赾all參數(shù)中進(jìn)行檢測(cè)是否為getBatteryLevel。 這個(gè)平臺(tái)方法的實(shí)現(xiàn)只需調(diào)用我們?cè)谇耙徊街芯帉懙腁ndroid代碼,并使用response參數(shù)返回成功和錯(cuò)誤情況的響應(yīng)。如果調(diào)用未知的方法,我們也會(huì)通知返回:
@Override public void onMethodCall(MethodCall call, Result result) { if (call.method.equals("getBatteryLevel")) { int batteryLevel = getBatteryLevel();if (batteryLevel != -1) { result.success(batteryLevel); } else { result.error("UNAVAILABLE", "Battery level not available.", null); } } else { result.notImplemented(); } }
2.調(diào)用平臺(tái)通道
static const platform = const MethodChannel('samples.flutter.io/battery');Future<Null> _getBatteryLevel() async { String batteryLevel; try { final int result = await platform.invokeMethod('getBatteryLevel'); batteryLevel = 'Battery level at $result % .'; } on PlatformException catch (e) { batteryLevel = "Failed to get battery level: '${e.message}'."; } }
日期:2018-10 瀏覽次數(shù):7271
日期:2018-12 瀏覽次數(shù):4344
日期:2018-07 瀏覽次數(shù):4890
日期:2018-12 瀏覽次數(shù):4186
日期:2018-09 瀏覽次數(shù):5515
日期:2018-12 瀏覽次數(shù):9937
日期:2018-11 瀏覽次數(shù):4822
日期:2018-07 瀏覽次數(shù):4595
日期:2018-05 瀏覽次數(shù):4869
日期:2018-12 瀏覽次數(shù):4336
日期:2018-10 瀏覽次數(shù):5152
日期:2018-12 瀏覽次數(shù):6228
日期:2018-11 瀏覽次數(shù):4481
日期:2018-08 瀏覽次數(shù):4602
日期:2018-11 瀏覽次數(shù):12654
日期:2018-09 瀏覽次數(shù):5594
日期:2018-12 瀏覽次數(shù):4848
日期:2018-10 瀏覽次數(shù):4201
日期:2018-11 瀏覽次數(shù):4541
日期:2018-12 瀏覽次數(shù):6076
日期:2018-06 瀏覽次數(shù):4017
日期:2018-08 瀏覽次數(shù):5451
日期:2018-10 瀏覽次數(shù):4466
日期:2018-12 瀏覽次數(shù):4547
日期:2018-07 瀏覽次數(shù):4371
日期:2018-12 瀏覽次數(shù):4512
日期:2018-06 瀏覽次數(shù):4400
日期:2018-11 瀏覽次數(shù):4386
日期:2018-12 瀏覽次數(shù):4261
日期:2018-12 瀏覽次數(shù):5296
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.