簡介
今天給大家介紹的是Dart2和Flutter
Dart是google推出的一種新的腳本語言, 希望能替代JS,
然而JS也在迭代升級, 生命力很旺盛,
目前, Dart還沒能替代JS.
現在最新的Dart是2, 據說相比1改變很多.
所以我直接介紹dart2.
Flutter是google推出的跨平臺開發框架, 類似於React-native.
不過相比於React-native, 它的性能更有優勢.
支持IOS, Android
環境搭建
1. 下載Flutter SDK, 解壓到C盤.
是一個zip包, 解壓到C盤, 因爲擔心權限問題, 要求不要放到program Files.
https://flutter.io/sdk-archive/#windows
2. 將c:/flutter/bin添加到環境變量path
3. 添加兩個環境變量的添加是爲避免國內訪問不到有些地址,
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
4. 升級和檢查
flutter doctor
flutter upgrade
5. 設置編輯器
vscode Extensions: Install Flutter
6. android studio安裝
7. android studio安裝flutter插件
8. android studio配置虛擬安卓設備.
Dart語言
Dart類似於JS, 可以應用於web, server等應用場景, 在flutter框架下也支持了移動端開發.
1. 需要main入口才能運行.
2. Raw字符串, 不會發生轉義
3. 多行字符串, 考慮到代碼上加的空格也會體現出來, 所以如果用這種方法, 又不想要這些空格, 會破壞代碼的整體美觀.
4. 字符串中嵌入變量, 相比JS有些簡化
5. Future相比Promise簡便一點. 並且它可以加一個Duration來完成timeout的工作.
6. async/wait可以應用場景可以更自由. 比如for循環
還有一些沒在這裏演示, 比如類型繼承, class extend, 類型安全等跟ts就比較像了.
最大的優點是具備JS的大部分優點, 所以容易上手. 又去掉了JS的大部分缺點, 比如隱式轉換.
創建Flutter App
1. 創建Flutter工程
vscode命令也可以, 在命令行中輸入flutter new, 填入名字, 和angular-cli類似, 就能生產一堆代碼.
2. Vscode打開工程, 左側可以看到android, ios各自產生的相應的工程, lib/main.dart就是業務層代碼了.
其它的大部分可以不用管, 不過這裏有一個pubspec.yaml是一個包管理文件, 類似與package.json.
3. 找到lib/main.dart
寫上這些代碼
4. F5運行, 選擇虛擬設備, 將會看到虛擬設備顯示出實現的界面. (調試支持熱重載)
這個例子中, 首先是main()的入口 調用 runApp創建app對象運行起來.
App對象從statelessWidget創建. 所謂statelesswidget就是屬性不可變的widget意思.
而widget是所有控件的基類.
Widget最基本的方法就是build和setState
類似於React的render.
這裏@override表示extend出來的子對象覆蓋widget的build方法.
在flutter裏絕大部分的可見或不可見的界面元素都是widget, 整個頁面, 路由的頁面, 容器, 行, 列, 甚至是padding.
MaterialApp是material組件之一, 提供整體的屬性的定義.
比如整體的風格, 顏色, 名稱,
Scaffold提供默認的導航欄, 標題, body等屬性的定義.
Appbar標題欄
Text控件
Center是一個佈局控件, 可以把子對象擺在中間, 像有圖所示.
這裏的名稱加冒號的傳參方式, 前面解釋了,
是可選參的傳遞方式,不限定傳參順序.
StateFulWidget狀態控件
這個例子要演示的是StateFulWidget和StateLessWidget的不同.
這裏引入了一個能產生隨機單詞的外部包.
這裏的外部包引用只需要在yaml填入包名稱和版本號,
然後觸發flutter: get package命令就會完成包引用和更新.
這裏需要注意的是, 縮進的多少會影響語義.
這裏可以看到, StatefulWidget是override createState 函數
返回一個new 的對象state<RamdomWords>模板參數又引用了前面這個類型,
這個寫法有點奇怪, 有一種循環引用的錯覺. 不過實際上並不是循環引用.
然後再在這個state<>又override 一個build方法.
當state有變化時, 會觸發build, 也可以手動觸發.
這裏裏面放入一個listView 和listTile構成一個列表.
每次滾動到底部, 都會觸發itemBuilder傳入新的i.
到了這裏我們對Flutter和Dart就有了一個初步的瞭解了.
接下來看一下Flutter的架構.
Navigator導航
Route在flutter中通過navigator來管理.
支持兩種方式來做路由, 一種是stack push pop,
另一種就是常見的路徑和頁面映射.
這裏演示的是第一種, 因爲手機最常見的情況是跳轉, 然後返回.
navigtor的push, pop, 操作widget對象來完成頁面的跳轉.
這種widget叫做MaterialPageRoute.
這裏有一個navigator的例子, 實現的效果, 就是
點擊右上角的按鈕之後, 跳轉到收藏頁面,
點擊返回又可以回到主頁面.
代碼實現是在右上角增加一個按鈕的onPress事件觸發
這個navigator.of是從當前的context也就是這個materialApp的navigator.
然後push一個MaterialPageRoute
Builder方法裏返回一個Scofold頁面就行了.
這裏可以看到context包含app的環境信息或對象
MaterialApp的的routes屬性可以設置路由路徑和頁面之間的映射關係.
new MaterialApp(
routes: <String, WidgetBuilder> {
'/a': (BuildContext context) => new MyPage(title: 'page A'),
'/b': (BuildContext context) => new MyPage(title: 'page B'),
}
除此以外, route還可以嵌套, 也就是說, app這一層是根路由,
而根路由裏面的page還可以嵌入子路由, navigator.of訪問context會
按照就近原則獲取當前的路由進行操作.
Icons.xxx圖標
官方的圖標庫集成了內部的接口, 方便直接加載, 基於矢量. 操作便捷, Icons.xxx就可以加載這個圖標.
Layout佈局
這裏是對佈局的演示,
Flutter的佈局有一個特點, 就是它不用負責告訴它的父節點, 自己要顯示在哪裏.
主要是每種容器通過row, colum, list, card, gridview等容器來管着子節點的顯示,
然後再容器的屬性可配置主軸, 縱軸的對齊方式, padding, margin, border等.
children或child嵌入子節點. 理解起來還是比較簡單的.
另外, 對於全局的風格, 在materialApp中也有屬性進行定義.
Animation動畫
Animation:
1. 按時間階段輸出.value
2. 監聽狀態(forward, backward, completed, dismissed)
AnimationController:
1. .forward, .backward控制向前向後
2. 設置變化的時長
CurvedAnimation:
1. 曲線變化(fastOutSlowIn, bounceIn, elasticInOut, 可自定義)
2. 將AnimationController和Curves組合出一個Animation對象
Tween(Animatable):
1. 設置Animation值變化範圍
2. .evaluate(Animation)通過Animation可計算當前值
3. .animate(AnimationController)可以返回一個Animation
Pubspec.yaml環境配置文件
Pubspec.yaml文件, 配置包,類似於node.js的package.json文件.
前面提到配置的包在這裏有修改的話,
會可以自動觸發更新
相比npm install在編寫代碼再去輸入命令要更便捷一點.
命令也支持.
然而這個國外的源可能被封禁, 所以經常get失敗,
谷歌說提供了一個國內的源, 但是實際使用的時候, 發現效果也是很差.
另外還可以配置圖片, 自定義字體, 本地語言等.
GestureDetector手勢檢測
大多數控件有onPress事件, 但是手機上的手勢行爲很多
因此並沒有讓每一個控件支持所有手勢的屬性,
所以如果想要獲得哪些手勢就需要使用GetureDetector
而GetureDetector本身也是一種widget把它和其它控件重疊放在一起,
或者把其它控件作爲GetureDetector的子控件.
它就可以檢測到這個控件上發生的手勢動作.
這裏列舉了可支持的手勢動作.
Inspector
調試上除了傳統的斷點單步調試, 也一樣支持inspector和性能分析
不過提供的inspector支持不在vscode上., 而是intelliJ,
可以查看節點層次和節點屬性, 只不過不能直接在inspetor裏面修改屬性.
android studio是基於intelliJ的IDE, 所以也是支持的.
Platform-Specific
每個API都有一個獨立的路徑, 獲得路徑對應的methodchannel對象
然後通過.invokeMethod(funcName)來訪問接口.
這裏爲防止阻塞使用了async await.
已有的這些訪問API的路徑包含…
如果開發發現還不夠, 可以自己在native開發這一層
添加自定義的API路徑和native api之間的映射.
而數據的返回有兩種形式, 一種從result.success, result.error阻塞式返回.
另一種是通過event.
Achitecture架構
Flutter的框架從上到下分三個大層:
FrameWork主要包含UI組件(Material和Cupertino widgets)也包含:
widgets, Animation, getstures等
Engine主要是指Dart的引擎, 還包括
Event, pipeline, 服務協議, 渲染等.
Embedder主要是native層的一些接口和線程, 事件, 包管理等.
根據介紹Flutter相比React最大的優勢在於,
在上層就完成了render, 避免了diff變化的層層傳遞. 所以性能更好.
Publish打包發佈
打包和發佈, 在各自的平臺有一些不同的操作流程.
