最新消息
Flutter在12月5號(hào)發(fā)布了最新的穩(wěn)定版本1.0,象征著Flutter新技術(shù)提上了征程功戚，期待著他能靠一己之力改變移動(dòng)端開的格局！
Flutter1.0官方推文
Let’s go
以下為正文你辣，推薦官網(wǎng)APIFlutter，如果覺l得英文看著費(fèi)勁[Flutter中文網(wǎng)(https://flutterchina.club/)隶糕，但是其更新速度比官網(wǎng)慢一下抑堡，我在寫的時(shí)候還沒有更新到1.0版本。
引言
移動(dòng)端至少分為3大格局掖举，Android開發(fā)快骗，iOS開發(fā)和React Native開發(fā)。React Native將iOS和Android的開發(fā)平臺(tái)相互融合通過js解釋器構(gòu)建塔次，完成開發(fā)一次方篮，兩端都能使用的技術(shù)方案。但是React Native技術(shù)是FaceBook開發(fā)的励负，拋開技術(shù)性問題不談藕溅，其開源類型非BSD項(xiàng)目，F(xiàn)aceBook還是對(duì)其擁有控制權(quán)继榆，所以大公司都摒棄了React native的開發(fā)巾表。（具體協(xié)議可自行查看）。
簡(jiǎn)介
Flutter是谷歌的移動(dòng)UI框架略吨，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面集币。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界翠忠，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用鞠苟，并且Flutter是完全免費(fèi)、開源的。（除非特別說明偶妖，其開源協(xié)議是BSD模式）
歷程
環(huán)境構(gòu)建
(筆者為android開發(fā)，只細(xì)談安卓方向)
- FlutterSDK1.0 政溃、AndroidSDK趾访、jdk8.0、Dart插件
-
Android studio 董虱、IDE扼鞋、VS Code等任何編輯器
Android Studio編譯.png
構(gòu)建方式
Flutter與用于構(gòu)建移動(dòng)應(yīng)用程序的其他大多數(shù)框架不同，因?yàn)镕lutter既不使用WebView愤诱，也不使用操作系統(tǒng)的原生控件云头。相反，F(xiàn)lutter使用自己的高性能渲染引擎來繪制界面
Flutter中使用輕量的C++構(gòu)建底層淫半，使用Dart語言開發(fā)編譯溃槐，使用Skia 2D渲染引擎渲染自己的weight控件。
Flutter技術(shù)要點(diǎn)
1.widget
簡(jiǎn)單的可以理解為view科吭，整個(gè)Flutter應(yīng)用都是使用的widget樹構(gòu)建UI昏滴，在構(gòu)建過程中使用不同的widget控間嵌套來實(shí)現(xiàn)界面。
1).StatelessWidget
沒有狀態(tài)的組建对人，StatelessWidget創(chuàng)建一次谣殊，永遠(yuǎn)不會(huì)改變其外觀，在build中搭建widget樹布局牺弄。
2).StatefulWidget
根據(jù)收到的數(shù)據(jù)或yoghurt輸入動(dòng)態(tài)更改狀態(tài)姻几，creatState中創(chuàng)建一個(gè)State對(duì)象，而其State對(duì)象存在生命周期势告，可以進(jìn)行setState操作動(dòng)態(tài)更新界面的顯示蛇捌。
State存在生命周期如下：
其中reassemble:是在開發(fā)中的熱更新才會(huì)調(diào)用的生命周期，這是與rn不同的地方培慌。
2.實(shí)現(xiàn)網(wǎng)絡(luò)加載
使用http請(qǐng)求豁陆，調(diào)用dio第三方庫(kù)獲取數(shù)據(jù)渲染到界面中，使用async await返回Future對(duì)象吵护。
3.與原生交互（Android）
Android中：
public class FlutterToNative implements MethodChannel.MethodCallHandler {
public static String NAME = "com.kang.economicanalysis/plugin";
private Activity activity;
FlutterToNative(Activity activity){
this.activity = activity;
}
public static void registerWidth(PluginRegistry.Registrar registrar){
MethodChannel channel = new MethodChannel(registrar.messenger(), NAME);
FlutterToNative instance = new FlutterToNative(registrar.activity());
//setMethodCallHandler在此通道上接收方法調(diào)用的回調(diào)
channel.setMethodCallHandler(instance);
}
@Override
public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
//通過MethodCall可以獲取參數(shù)和方法名盒音，然后再尋找對(duì)應(yīng)的平臺(tái)業(yè)務(wù)，本案例做了2個(gè)跳轉(zhuǎn)的業(yè)務(wù)
//接收來自flutter的指令oneAct
if (methodCall.method.equals("ToOne123")) {
//跳轉(zhuǎn)到指定Activity
Intent intent = new Intent(activity, OneActivity.class);
activity.startActivity(intent);
//返回給flutter的參數(shù)
result.success("success");
}
//接收來自flutter的指令twoAct
else if (methodCall.method.equals("ToOne")) {
//解析參數(shù)
String text = methodCall.argument("flutter");
//帶參數(shù)跳轉(zhuǎn)到指定Activity
Intent intent = new Intent(activity, OneActivity.class);
intent.putExtra("flutter", text);
activity.startActivity(intent);
//返回給flutter的參數(shù)
result.success("從原生傳回來的參數(shù)");
}
else {
result.notImplemented();
}
}
}
在MainActivity中進(jìn)行調(diào)用：
public class MainActivity extends FlutterActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);
//交互
FlutterToNative.registerWidth(registrarFor(FlutterToNative.NAME));
}
}
flutter代碼中：
//獲取到插件與原生的交互通道
static const jumpPlugin = const MethodChannel('com.kang.economicanalysis/plugin');
//原生交互傳遞值馅而，獲取返回值SetState更新到UI中
Future<Null> _ToNative() async {
Map<String, String> map = { "flutter": "flutter" };
String result = await jumpPlugin.invokeMethod('ToOne', map);
setState(() {
_data = result;
});
}
這樣就結(jié)束了祥诽！
在Flutter中使用的是通道的方式構(gòu)建與原聲的交互，通道建立完畢后隨時(shí)調(diào)用瓮恭，隨時(shí)通信雄坪，還可以使用這種方式拓展控件，例如：flutter不支持webview屯蹦，可以使用Android原生的webview通過addContentView()维哈，添加到Flutter使用绳姨。flutter-webview
底層架構(gòu)對(duì)比
React Native使用js語言開發(fā)，形式模仿React框架阔挠，執(zhí)行需要js解釋器飘庄，UI通過原生控件渲染。
Flutter直接使用原生的canvas购撼，在其自帶的Skia 2D引擎上渲染UI跪削，不通過間接轉(zhuǎn)換，節(jié)省時(shí)間
與React Native對(duì)比
1.開發(fā)差異：
- 基于js的ES6開發(fā)迂求，遵循react前端框架開發(fā)
- 使用Dart語言開發(fā)碾盐，純面向?qū)ο箝_發(fā)，使用widget搭建布局
2.友好性：
- Flutter對(duì)Android友好
- React Native對(duì)iOS友好
3.控件影響
- Flutter控件是由自己定義的揩局，所以其渲染速度十分快速毫玖，
- Flutter的控件在iOS和Android上的效果基本完全一致，而React Native存在將RN控件轉(zhuǎn)換為原生控件的過程凌盯，存在一定的差異孕豹。
- 在Android和iOS的控件發(fā)生更新后需要將更新同時(shí)更新到Flutter的控件中，由于是一家公司十气，所以Android控件容易更新励背，然而iOS控件的更新可能較慢。
4.效率：
- Flutter的渲染UI效率較高砸西，刷新率高叶眉，F(xiàn)PS較高。
5.動(dòng)態(tài)化：
- Flutter目前不支持代碼的熱更新芹枷，但是開發(fā)者給出思路（Dart to JS）
- React Native加載jsbundle文件衅疙，目前存在多種熱更新方案。
6.App體積：
- iOS Flutter>React Native (iOS需要額外集成skia引擎鸳慈，而android自帶)
- Android Flutter<React Native (Android中加入OkHttp導(dǎo)致體積增大)
- Flutter預(yù)覽版更新后App體積再次縮小30%
7.平板適配性：
- Flutter沒有對(duì)平板進(jìn)行適配
8.兼容性：
- Flurrer提供的widget都是基于skia引擎實(shí)現(xiàn)和精心定制的饱溢，與具體平臺(tái)沒有關(guān)系，所以能保持很高的跨OS跨OS Version的兼容性走芋。flutter從更基礎(chǔ)的曾磨平了平臺(tái)的差異绩郎，站在更寬廣、更可控的一個(gè)基礎(chǔ)平臺(tái)上去演變和發(fā)展翁逞。
9.穩(wěn)定性：
- Flutter才出現(xiàn)穩(wěn)定1.0版本肋杖，而RN已經(jīng)出來3年了，所以React Native的穩(wěn)定性更好
其他
- '_'代表私有挖函，可修飾成員和類
- 使用Router和Navigator實(shí)現(xiàn)路由導(dǎo)航（push/pop, eg:pushAndRemoveUtil == SingleTask）
- 支持動(dòng)畫状植、手勢(shì)、暫不支持Echarts
- 打包形式與原生相同
- colors 只支持16進(jìn)制
- 資源文件需要在配置文件pubspec.yaml中引用方可使用
總結(jié)
- 總體上來說，F(xiàn)lutter的技術(shù)比React Native技術(shù)更加新穎津畸，性能更好振定，渲染速度更快，各方面都更加優(yōu)秀肉拓，而且Flutter的開源模式為BSD吩案，也優(yōu)于React Native。
- Flutter出來的時(shí)間只有1年帝簇，所以不是很成熟，穩(wěn)定性較差靠益，所以如何選擇就看你們了丧肴！
