flutter 是什么

flutter是Google基于Dart語(yǔ)言開(kāi)發(fā)的移動(dòng)應(yīng)用開(kāi)發(fā)框架，在保持原生性能的條件下實(shí)現(xiàn)了跨端編程。

官方定義【 Flutter是一款移動(dòng)應(yīng)用程序SDK，一份代碼可以同時(shí)生成iOS和Android兩個(gè)高性能、高保真的應(yīng)用程序?！?/p>

為什么學(xué)習(xí)flutter

體驗(yàn)流暢且統(tǒng)一

由于其統(tǒng)一在打包階段把flutter引擎打包入，統(tǒng)一使用引擎的Skia直接渲染，因此在排版、圖標(biāo)、滾動(dòng)、點(diǎn)擊等方面實(shí)現(xiàn)零差異。

遠(yuǎn)大前景

google 新一代操作系統(tǒng) Fuchsia 的 UI開(kāi)發(fā)框架；

品質(zhì)保證

google親自操刀Flutter以及Dart，能夠不斷優(yōu)化，Dart作為新一代編程語(yǔ)言，可用于web、服務(wù)端、移動(dòng)端、物聯(lián)網(wǎng) 開(kāi)發(fā)，并且支持轉(zhuǎn)譯js，其炙手可熱程度可見(jiàn)一斑，而且作為全新的語(yǔ)言，其編程體驗(yàn)也是值得肯定。

生態(tài)豐富

flutter 豐富的控件庫(kù) 以及 插件資源，極大得提高開(kāi)發(fā)效率。

技能準(zhǔn)備

Dart

Dart于2013年年底發(fā)布1.0版本，Google推出Dart 的目的是在 JavaScript 語(yǔ)言的基礎(chǔ)上，改進(jìn)編程效率和軟件執(zhí)行效率，并減少大型軟件的編程復(fù)雜性。它確實(shí)做到第一點(diǎn)， Dart 編寫(xiě)的程序執(zhí)行效率比 JavaScript 高出 42%到 130%， 其實(shí)這對(duì)于想投入Html5 而又憎惡 JavaScript的人來(lái)說(shuō)是個(gè)福音。

Flutter

基于Dart的跨平臺(tái)框架，這里我們所要學(xué)習(xí)的是Flutter相關(guān)Api， Flutter提供了相當(dāng)豐富的Api，以往我們?cè)?Android／Ios中花大力氣寫(xiě)的自定義控件，在Flutter中基本是信手拈來(lái)。

Flutter官方網(wǎng)站-------Flutter中文網(wǎng)

Pub倉(cāng)庫(kù)

Dart的包管理器，Pub之于Dart 就如 npm 之于 node.js， 需要注意的是dart插件分 Flutter和Web兩大類(lèi)。 搜索插件庫(kù)

android／ios（可選）

開(kāi)發(fā)者完全可以開(kāi)發(fā)純Flutter應(yīng)用。 如果需要Native支持的 Pub上也有大量的插件庫(kù)資源，
但是對(duì)于某些開(kāi)發(fā)者的特殊需求（自己開(kāi)發(fā)插件 or 開(kāi)發(fā)混合App），就需要具備相應(yīng)前端技能了。

環(huán)境工具搭建

環(huán)境

官方指導(dǎo)：安裝Flutter 整個(gè)過(guò)程簡(jiǎn)單來(lái)說(shuō)就是:

1. git(Window用戶需要安裝 Git For Window) 克隆一份Flutter代碼到本地

2. 配置環(huán)境變量（Flutter的Bin目錄）

另外：google還貼心得為中國(guó)開(kāi)發(fā)者提供了鏡像，你懂的。

有些人可能會(huì)疑惑，F(xiàn)lutter基于Dart 就如 Android基于Java ， Ios 基于 OC， 為什么沒(méi)有安裝Dart的過(guò)程，其實(shí)這個(gè)過(guò)程已經(jīng)在 1 步驟里了， Flutter會(huì)自帶最新版本的Dart，目前是2.0，
可在在控制在查看Dart版本 (前提是你已經(jīng)配置了Dart環(huán)境變量，官方教程沒(méi)有這一步).

image

工具選擇

如果你僅僅是想開(kāi)發(fā)純Flutter應(yīng)用，使用 VsCode 就足夠了，畢竟插件強(qiáng)大，內(nèi)存占用小。
安裝Dart插件

如果您需要自行開(kāi)發(fā)插件 或者 開(kāi)發(fā)混合 App， 那么你需要 AndroidStudio 和 XCode。

測(cè)試環(huán)境

環(huán)境和工具安裝完成可以測(cè)試Flutter安裝情況，在terminal運(yùn)行 flutter doctor

image

這也僅僅是用于參考，該命令工具有時(shí)候也不太準(zhǔn)確，自己把握就好，其實(shí)什么東西沒(méi)裝自己心里沒(méi)B+樹(shù)嗎？

工程目錄

創(chuàng)建工程

無(wú)論你是哪種操作系統(tǒng)，哪種開(kāi)發(fā)工具，都可以使用

flutter create myapp

來(lái)生成Flutter工程， myapp 可以是任何你想要的工程名。這是我的工程目錄:

image

1. android

   里面存放android相關(guān)， 和普通的Android項(xiàng)目目錄別無(wú)二致，
   可以進(jìn)行混合開(kāi)發(fā)，其實(shí)也是類(lèi)似于React Native。

2. ios

   同理普通的Ios項(xiàng)目目錄

3. lib

   用于存放Dart文件用于Flutter執(zhí)行， 其中 main.dart是程序入口，原生App殼，如Android 的Activity會(huì)加載FlutterView作為ContentView， FlutterView就是Flutter加載main.dart渲染出的視圖，它有自己的堆棧管理。

4. test 測(cè)試用文件夾

5. pubspec.yaml

   Pub所用的配置文件，類(lèi)似于npm的package.json， 用于Dart的包管理，使用的是 caret 語(yǔ)法，效果圖如下：

image

pubspec.yaml 配置文件，當(dāng)配置更新的時(shí)候，可以使用 命令 flutter packages get拉取新的配置

name: 工程名

description： 文件描述

dependencies:Flutter工程依賴的庫(kù)，這里的庫(kù)包含Pub倉(cāng)庫(kù)、本地Pub插件文件夾、插件的git倉(cāng)庫(kù)地址

flutter_test::
sdk: flutter:這里要引入flutter

cupertino_icons::^0.1.2 這里引入ios風(fēng)格的圖標(biāo)

dev_dependencies:Flutter工程依賴的庫(kù)， 和 dependencies 不同在于，這個(gè)標(biāo)簽下面定義的包只在開(kāi)發(fā)模式生效，類(lèi)似gradle 3.x 的 debugImplementation

6. pubspec.lock

   pub自動(dòng)生成的文件，和 pubspec.yaml 密切相關(guān)，用于指定程序包所依賴的每個(gè)直接和傳遞依賴項(xiàng)的具體版本和其他標(biāo)識(shí)信息，pubspec.yaml 只列出直接依賴關(guān)系，鎖文件會(huì)確切得指定程序包所依賴的特定版本的包。

Flutter編寫(xiě)

flutter的UI分層比較講究，從下到上依次為 Dart:ui -> Render -> Animation -> Paint -> Widget -> MaterialWidget/cupertino
關(guān)于UI分層以及每一層的作用本篇不做討論。

如果你足夠無(wú)聊或者迫不得已，完全可以基于flutter的UI分層比較講究，從下到上依次為 Dart:ui層或者Render做開(kāi)發(fā)，不過(guò)涉及太過(guò)復(fù)雜的狀態(tài)管理渲染之類(lèi)的工作。

本篇只做Flutter的基礎(chǔ)認(rèn)識(shí)。

程序入口

首先我們打開(kāi) lib目錄下的 main.dart文件,我們基于 widget層編寫(xiě)（VsCode環(huán)境）：

image

程序的入口：

void main() => runApp(new MyApp()); 

該入口函數(shù)在整個(gè)app生命周期只會(huì)調(diào)用一次。 new MyApp() 會(huì)返回一個(gè) Widget 控件用于渲染。 上圖代碼中返回了一個(gè)紅色的Contaner容器，效果如下:

image

官方不推薦這么做，不推薦直接把widget層的控件作為根控件，原因有個(gè)人認(rèn)為兩點(diǎn)(暫時(shí)想到兩點(diǎn))：

• 有為數(shù)不少的控件不支持直接放置(比如：Text 、 Icon)，必須要 MaterialApp或者WidgetApp作為父節(jié)點(diǎn)。
• 直接放置需要開(kāi)發(fā)者作大量的工作來(lái)調(diào)整布局、樣式 等。

推薦使用 MaterialApp 作為程序根節(jié)點(diǎn)，原因如下：

• 統(tǒng)一規(guī)范，MaterialApp 引入了 Material Design，還是相當(dāng)漂亮的，開(kāi)發(fā)者幾乎不需要做額外的布局、樣式 編碼就能達(dá)到產(chǎn)品級(jí)視覺(jué)效果， 當(dāng)然可以根據(jù)需求進(jìn)行微調(diào)。
• MaterialApp 提供了大量的美觀、功能豐富的控件，放棄MaterialApp等于放棄了一整片森林。

正確的姿勢(shì)是這樣的：

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Center(child: Text('我是標(biāo)題')), actions: <Widget>[ Icon(Icons.flight_takeoff), ], ), drawer: Text(''), body: new ListView.builder( itemCount: 12, itemBuilder: (BuildContext context, int index){ return ListTile(title: Center(child: Text("我是第${index}個(gè)item")),); }, ) ), 

MaterialApp 作為根節(jié)點(diǎn)， Scafford 腳手架控件，提供了 Drawer、ToolBar、Body 等等，我們可以看看這 27 行代碼能實(shí)現(xiàn)什么效果。

image

就醬紫，好好想像Android／Ios 實(shí)現(xiàn)這效果需要多少文件 多少 代碼吧。

控件類(lèi)型

我們Flutter編碼一般都是在 Widget這一層， 上面談到 程序的 入口是

void main() => runApp(new MyApp()); 

他的作用是創(chuàng)建整個(gè)widget視圖，整個(gè)生命周期只調(diào)用一次，那我們?cè)趺丛趺锤马?yè)面數(shù)據(jù)呢，我們是不是得保存 Widget 的引用重新設(shè)置相應(yīng)的屬性呢？

答案是

No！

我們看一下Widget的具體實(shí)現(xiàn)：

@immutable abstract class Widget extends DiagnosticableTree { 

被加上了 @immutable 注解，這意味著控件不可被修改，只能被重新創(chuàng)建。
而我們平時(shí)編寫(xiě) Flutter 繼承的是:

abstract class StatelessWidget extends Widget { & abstract class StatefulWidget extends Widget {

因此，我們不能對(duì)已創(chuàng)建的Widget進(jìn)行修改，那么我們有兩個(gè)問(wèn)題：

1. 我們應(yīng)該如何 更新頁(yè)面數(shù)據(jù)以及布局 ？
2. StatelessWidget 和 StatefulWidget什么玩意兒，什么區(qū)別 ？

我們嘗試著同時(shí)看這兩個(gè)問(wèn)題，StatefulWidget 擁有StatelessWidget 的所有功能，也就是說(shuō) StatelessWidget 是他的子集。StatefulWidget 多了什么？

/*** StatefulWidget*/ class TestStateFulWidget extends StatefulWidget{ @override State<StatefulWidget> createState() { return TestStateFulState(); } }/*** state*/ class TestStateFulState extends State<TestStateFulWidget>{ int _index = 0;@override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Padding(padding: const EdgeInsets.only(top: 200.0),), Text('Count To $_index', style: TextStyle(fontSize: 50.0, color: Colors.red),), Padding(padding: const EdgeInsets.only(top: 60.0),), FloatingActionButton( //這是浮動(dòng)的按鈕，支持點(diǎn)擊從而觸發(fā) onPressed（） child: Text('Click'), onPressed: () {//onPressed（）方法里面對(duì)_index自增，并且調(diào)用setState(() {})_index++; setState(() {}); }, ), ], ); } }

效果圖

image

具體效果是點(diǎn)擊 Click 浮動(dòng)按鈕， 上方的數(shù)字增加 1 ，這就是數(shù)據(jù)更新。

每個(gè)StateFulWidget 維護(hù)一個(gè) State 對(duì)象，當(dāng)我們對(duì) 相關(guān)數(shù)據(jù)更新后 并且 調(diào)用了** setState(() {})** 方法，這樣就吧 該 Widget 標(biāo)記為 dirty ，因此會(huì)觸發(fā)控件的更新、替換、刪除 等。

打包 ( 以Android為例 )

debug

Flutter開(kāi)發(fā)過(guò)程編譯會(huì)產(chǎn)生 debug 的 apk 包，查看一下我們打出的 debug 包：
在 /Users/chao/Public/gsy/build/app/outputs/apk/debug/app-debug.apk 目錄
利用 Android Studio 分析

image

居然有 31M 我可什么都沒(méi)有放啊，大頭都在 lib， 這什么鬼, libflutter.so是什么

image

這是Flutter虛擬機(jī)器， 官方的定義是：

The Flutter Engine is a portable runtime for hosting Flutter applications.

其實(shí)這也是Flutter可以跨平臺(tái)統(tǒng)一的根本所在。

如果你開(kāi)發(fā)Flutter 你會(huì)逐漸意識(shí)到，為什么感覺(jué) 安裝包 卡卡的， 真的有官方宣稱(chēng)的 60 幀嗎，或者平均50幀。 debug包所運(yùn)行的東西太多啦， 主要是為了方便開(kāi)發(fā)者開(kāi)發(fā)， 所以這點(diǎn)不用擔(dān)心，我們嘗試著打包release 包。

release

終端運(yùn)行：

flutter build apk

同樣查看release包：

image

只有不足 9M 了，并且體驗(yàn)發(fā)現(xiàn)，release包幀率相當(dāng)?shù)酶?，甚至?native開(kāi)發(fā)同樣的頁(yè)面幀率都要高(僅僅針對(duì)示本例而言).

主流跨平臺(tái)框架

維度	Hybird	Weex	RN	Flutter
開(kāi)發(fā)語(yǔ)言	html5+css3+js	vue+js+css3	react+js+css3	Dart
是否摒棄標(biāo)簽語(yǔ)言	否	否	否	是
動(dòng)畫(huà)效果支持	一般	好	好	好
用戶體驗(yàn)性	一般	流暢	流暢	流暢
插件豐富程度	豐富	較豐富	較豐富	較豐富
界面開(kāi)發(fā)難易程度	較高	較低	較低	低
是否支持熱更新	是	是	是	否
是否支持和現(xiàn)有項(xiàng)目集成	是	是	是	是
最低支持Android版本	webview支持情況		4.1+	4.2+
最低支持IOS版本	webview支持情況		iOS8.0+	iOS8+

以上部分?jǐn)?shù)據(jù)僅僅是個(gè)人以及部分開(kāi)發(fā)同學(xué)觀點(diǎn)，勿噴。

總結(jié)

總體來(lái)說(shuō)Flutter是一門(mén)值得學(xué)習(xí)的技術(shù)，有理由相信 google 的Flutter團(tuán)隊(duì)會(huì)和Dart團(tuán)隊(duì)保持密切的合作，并且Dart 虛擬機(jī)會(huì)更加高效，更加適合Flutter，這是其他框架所不具備的優(yōu)勢(shì)

而且Fuchsia系統(tǒng)也采用Flutter作為界面框架，所以，你懂的，就不說(shuō)了。

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/18399.html