flutter 是什么

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

官方定義【 Flutter是一款移動應(yīng)用程序SDK，一份代碼可以同時生成iOS和Android兩個高性能、高保真的應(yīng)用程序。】

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

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

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

遠(yuǎn)大前景

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

品質(zhì)保證

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

生態(tài)豐富

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

技能準(zhǔn)備

Dart

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

Flutter

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

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

Pub倉庫

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

android／ios（可選）

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

環(huán)境工具搭建

環(huán)境

官方指導(dǎo)：安裝Flutter 整個過程簡單來說就是:

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

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

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

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

image

工具選擇

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

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

測試環(huán)境

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

image

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

工程目錄

創(chuàng)建工程

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

flutter create myapp

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

image

1. android

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

2. ios

   同理普通的Ios項目目錄

3. lib

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

4. test 測試用文件夾

5. pubspec.yaml

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

image

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

name: 工程名

description： 文件描述

dependencies:Flutter工程依賴的庫，這里的庫包含Pub倉庫、本地Pub插件文件夾、插件的git倉庫地址

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

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

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

6. pubspec.lock

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

Flutter編寫

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

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

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

程序入口

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

image

程序的入口：

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

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

image

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

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

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

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

正確的姿勢是這樣的：

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}個item")),); }, ) ), 

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

image

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

控件類型

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

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

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

答案是

No！

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

@immutable abstract class Widget extends DiagnosticableTree { 

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

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

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

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

我們嘗試著同時看這兩個問題，StatefulWidget 擁有StatelessWidget 的所有功能，也就是說 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( //這是浮動的按鈕，支持點擊從而觸發(fā) onPressed（） child: Text('Click'), onPressed: () {//onPressed（）方法里面對_index自增，并且調(diào)用setState(() {})_index++; setState(() {}); }, ), ], ); } }

效果圖

image

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

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

打包 ( 以Android為例 )

debug

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

image

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

image

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

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

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

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

release

終端運(yùn)行：

flutter build apk

同樣查看release包：

image

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

主流跨平臺框架

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

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

總結(jié)

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

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

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