在編寫幾個 Flutter 項目后,發(fā)現(xiàn) Flutter 的強大之處在于業(yè)務中所有用到的控件以及場景都有對應的處理方案;而 Dart 語言也與 Java 、 Kotlin 類似,所以對 Android 開發(fā)者來說門檻非常低;特意記錄一下常用的控件及其使用:
創(chuàng)新互聯(lián)建站客戶idc服務中心,提供綿陽電信機房機柜租用、成都服務器、成都主機托管、成都雙線服務器等業(yè)務的一站式服務。通過各地的服務中心,我們向成都用戶提供優(yōu)質(zhì)廉價的產(chǎn)品以及開放、透明、穩(wěn)定、高性價比的服務,資深網(wǎng)絡工程師在機房提供7*24小時標準級技術保障。
StatelessWidget 不需要額外的創(chuàng)建 State
StatefulWidget 創(chuàng)建 State 類,并可以在其中保存一些狀態(tài)
only 可以單獨設置每個方向的內(nèi)邊距
類似于 LinearLayout 中的 orientation 設置為 vertical , mainAxisAlignment 表示豎向的一個對齊方式, crossAxisAlignment 表示橫向的對齊方式
與 Column 相反,主軸是橫向,對齊方式類似, crossAxisAlignment 表示豎向的對齊方式
類似 SizedBox ,一個容器,但是主要功能是有一個 decoration —— 裝飾器,作用是繪制背景,或者使用 item 中的陰影
棧,先入后出,類似于 Android 上的 FrameLayout
通常配合 Stack 使用,固定顯示在某一個位置
配合多 child 使用,會填充剩余的空間
Image 功能強大,使用不同的方法可以加載不同來源的圖片
看到這些方法,突然覺得 Flutter 太香了,而且 Image 可以配置 clip 等裁剪出不同形狀的圖片,無論是圓形還是五角星都不在話下,然而 Android 要實現(xiàn)不規(guī)則的形狀,可是要下不少功夫的。
名字和 Android 的一模一樣,但是用法卻比 Android 的簡單很多:
主要就是 itemCount 與 itemBuilder ,其余就是配置樣式, itemBuilder 需要返回一個 widget ,當然了,每個 ListView 都有其對應的 item ,在里面的方法中編寫 widget 即可
與 ListView 類似,但是需要有一個 delegate 類,作用是設置有多少列,每一列之間的間距是多少
GridView 沒有 build , children 表示所有的子 view
最常用的控件之一,有非常多的樣式, Flutter 中通常是使用裝飾器來處理控件的,如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下
此控件比較簡單,按鈕的功能可劃分為UI樣式與事件回調(diào)
這里將幾種不同的按鈕一起運行,做下對比動圖如下:
這里對五種按鈕進行column居中排列如下
Text用于顯示簡單樣式文本,它包含一些控制文本顯示樣式的一些屬性。
TextStyle用于指定文本顯示的樣式如顏色、字體、粗細、背景等。
TextStyle更多屬性設置如下:
如果我們需要對一個Text內(nèi)容的不同部分按照不同的樣式顯示,即富文本,這時就可以使用TextSpan,它代表文本的一個“片段”。
如上述,我們當然也可以在上述鏈接上添加手勢事件,后續(xù)會提到。
在widget樹中,文本的樣式默認是可以被繼承的,因此,如果在widget樹的某一個節(jié)點處設置一個默認的文本樣式,那么該節(jié)點的子樹中所有文本都會默認使用這個樣式,而DefaultTextStyle正是用于設置默認文本樣式的。
舉例如下:
provider 是flutter 中的狀態(tài)管理 開源庫;
存儲的數(shù)據(jù)對象 必須extends ChangeNotifier;下層widget 通過 Provider.of(context) 函數(shù) 獲取model對象 ,并且可以建立依賴關系;當數(shù)據(jù)對象發(fā)生變化時,依賴的widget 會重新build,像不像InheritedWidget Provider 沒錯 下層widget就是 封裝了InheritedWidget
主要 通過 Provider.ofT(context) 函數(shù),來獲?。?/p>
推薦使用 Provider.of而不是 Consumer,因為 listen默認為true,也就是說 默認 依賴于 持有數(shù)據(jù)model的widget 對應的element;
數(shù)據(jù)類 可繼承的 ChangeNotifier,本身和privider框架 沒有關系;
ChangeNotifier 是 flutter框架 提供的工具類, 用來實現(xiàn)一對多的訂閱通知功能。
hello world例子
在終端打印字符串‘Hello World!’
計算斐波那契數(shù)列
一個簡單的類
計算兩點距離
異步并發(fā)示例
使用了Isolate
1.面向?qū)ο?/p>
對于面向?qū)ο筮@個概念,相信了解Java的同學對這個概念一定不會陌生。
例如:我們有個Person Object他有很多特征和行為。
這些都是這個Person Object的屬性。
也就是因為有了這些特征,行為等等才決定了這個人是誰。
那么回到Dart當中,所有的都是對象,那么在就可以可以跟進對象的屬性的特征,方法等等來進行編程。
之所以我們在這里又特別強調(diào)了一下面向?qū)ο蟮母拍?,是因為這個概念在Dart語言當中,至關重要!
2.最重要的幾個概念
3.Dart的部分特性
4.Dart的內(nèi)置庫
包名
描述
dart:asynv
異步編程,提供Future,Stream類
dart:collection
集合
dart:convert
不同類型的字符編碼解碼
dart:core
Dart語言核心功能,內(nèi)置類型
dart:html
網(wǎng)頁開發(fā)用到的庫
dart:io
文件讀寫,IO相關
dart:math
數(shù)字常量以及函數(shù),隨機算法等
dart:svg
事件和動畫矢量圖支持
綜上述所說要想學Flutter,先學Dart!關于Flutter下篇我會講到。為什么離不開dart!
有關更多面經(jīng)、核心技術筆記;自己也是從事Android開發(fā)5年有余了;整理了一些Android開發(fā)技術核心筆記和面經(jīng)題綱, 如有需要的同學請私信我回復“核心筆記”或“面試”領??!
感謝 知乎日報-API-分析 提供的api幫助完成這個demo
該項目完全開源,單純?yōu)榱藢W習與交流,希望大家喜歡,多多提意見。
后續(xù)會將未來學到的新知識點用到該項目,持續(xù)更新
1.今日熱點
2.主題分類
3.文章詳情
4.抽屜列表增加緩存, 防止多次拉去數(shù)據(jù)
5.評論列表 (界面,動畫優(yōu)化)
6.主題列表 (界面,動畫優(yōu)化)
7.主頁banner自動輪播,手指滑動是禁止輪播,放開則繼續(xù)
8.刷新數(shù)據(jù)失敗,增加重試按鈕
9.分享UI
9.登錄UI,聯(lián)動交互(在評論界面可以點擊寫點評進入)
1.Flutter加載Html
1.注冊
2.登錄
3.發(fā)表評論
4.收藏
5.等等
1.動畫原理:在一段時間內(nèi)快速的多次改變UI外觀,由于人眼會產(chǎn)生視覺暫留所以最終看到的就是一個連續(xù)的動畫。
UI的一次改變稱為一個動畫幀,對應一次屏幕刷新。
FPS:幀率,每秒的動畫幀數(shù)。
flutter動畫分為兩類:
常見動畫模式:
是一個抽象類,主要的功能是保存動畫的值和狀態(tài)。常用的一個Animation類是Animation double ,是一個在一段時間內(nèi)依次生成一個區(qū)間之間的值的類,可以是線性或者曲線或者其他。
可以生成除double之外的其他類型值,如:Animation Color 或 Animation Size 。
是一個動畫控制器,控制動畫的播放狀態(tài),在屏幕刷新的每一幀,就會生成一個新的值。
包含動畫的啟動forward()、停止stop() 、反向播放 reverse()等方法,在給定的時間段內(nèi)線性的生成從0.0到1.0(默認區(qū)間)的數(shù)字。
curve:描述動畫的曲線過程。
curvedAnimation:指定動畫的曲線。
常用Curve:
繼承自Animatable T ,表示的就是一個 Animation 對象的取值范圍,只需要設置開始和結(jié)束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。
例如,Tween可能會生成從紅到藍之間的色值,或者從0到255。
Tween.animate:返回一個Animation。
映射過程:
1). Tween.animation通過傳入 aniamtionController 獲得一個_AnimatedEvaluation 類型的 animation 對象(基類為 Animation), 并且將 aniamtionController 和 Tween 對象傳入了 _AnimatedEvaluation 對象。
2). animation.value方法即是調(diào)用 _evaluatable.evaluate(parent)方法, 而 _evaluatable 和 parent 分別為 Tween 對象和 AnimationController 對象。
3). 這里的 animation 其實就是前面的 AnimationController 對象, transform 方法里面的 animation.value則就是 AnimationController 線性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我們可以看到這個 0.0~1.0 的值被映射到了 begin 和 end 范圍內(nèi)了。
接收一個TickerProvider類型的對象,它的主要職責是創(chuàng)建Ticker。
防止屏幕外動畫消耗資源。
[圖片上傳失敗...(image-115b94-1636441483468)]
過程:
回調(diào):
不使用addListener()和setState()來給widget添加動畫。
使用AnimatedWidget,將widget分離出來,創(chuàng)建一個可重用動畫的widget,AnimatedWidget中會自動調(diào)用addListener()和setState()
AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
如何渲染過渡,把渲染過程也抽象出來:
AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。
MaterialPageRoute:平臺風格一致的路由切換動畫
CupertinoPageRoute:左右切換風格
自定義:PageRouteBuilder
1.要創(chuàng)建交織動畫,需要使用多個動畫對象(Animation)。
2.一個AnimationController控制所有的動畫對象。
3.給每一個動畫對象指定時間間隔(Interval)
可以同時對其新、舊子元素添加顯示、隱藏動畫.
當AnimatedSwitcher的child發(fā)生變化時(類型或Key不同),舊child會執(zhí)行隱藏動畫,新child會執(zhí)行執(zhí)行顯示動畫。
希望大家支持一下,感謝