跨端趨勢勢在必行。
實戰(zhàn)項目:flutter實戰(zhàn):搭建登錄頁與朋友圈列表頁
資源
- flutter實戰(zhàn)、控件大全
- Flutter Gallery
-
推薦四個Flutter重磅開源APP項目！
a. Flutter精仿抖音
b. Flutter斗魚APP
c. Flutter豆瓣客戶端
d. Flutter開源中國客戶端 - https://github.com/Solido/awesome-flutter
- 開發(fā)文檔、開發(fā)文檔2
- 在線json轉model
Flutter實戰(zhàn)
1. 環(huán)境搭建
vim ~/.bash_profile
source ~/.bash_profile
vs code下載、flutter sdk、android sudio、android sdk
android studio設置Http Proxy
flutter環(huán)境配置詳解MAC版、Mac安裝配置Flutter注意事項
dart在線編輯
Flutter SDK version is 0.0.0-unknown
vim使用:
gg 跳到第一行的第一個字符
shift+g 跳到文本的最后一行
shift+4 跳到一行的最后一個字符
0 跳轉到當前行的第一個字符
2. 開發(fā)
自動化生成模板
flutter --version** **2.9.0
flutter packages get
Flutter學習體會
- Dart和JavaScript都是單線程模型
a. Dart 在單線程中是以消息循環(huán)機制來運行的，其中包含兩個任務隊列，一個是“微任務隊列” microtask queue，另一個叫做“事件隊列” event queue
b. 所有的外部事件任務都在事件隊列中，如IO、計時器、點擊、以及繪制事件等，而微任務通常來源于Dart內部，并且微任務非常少 - 高性能
a. 開發(fā)效率高:基于JIT的快速開發(fā)周期;基于AOT的發(fā)布包
b. 高性能:Flutter使用自己的渲染引擎來繪制UI;提供流暢、高保真的的UI體驗
c. 快速內存分配
d. 類型安全 - 了解widge,StatelessWidge,StatefulWidge及State,及一些原理。
a. StatelessWidge:重寫build方法
b. StatefulWidge引入State。 - flutter的三棵樹:widge、Element、RenderObject
a. Widget繼承自診斷樹，canUpdate、createElement
b. Widget只是UI元素的一個配置數(shù)據(jù)，并且一個Widget可以對應多個Element - State
a. 當State被改變時，可以手動調用其`setState()，會重新調用其build方法重新構建widget樹。 - 了解彈性布局，這個對iOS開發(fā)是一個亮點。
- 了解一些基本控件;熟悉調試環(huán)境,采坑。
- 在使用Flutter語法時要注意理論。
- 去github上找一些好的項目，閱讀熟悉。上手也還是比較快的?？匆恍┖玫臅度鏵lutter實戰(zhàn)》;有好的視頻教程也可以留意下。
- Flutter 的嵌套有點煩人。
控件
布局的思想
不用設置寬高，靠內容撐起來，僅設置邊距即可。也可以指定寬高。
布局:先繪制大的輪廓，把占位畫出來再處理細節(jié)。
基礎組件
- InkWell:帶有漣漪效果，帶有點擊事件。
- GestureDetector:點擊事件
- Material:與InkWell結合使用。裁剪、陰影、墨水效果。
a. 自定義按鈕 - Container:可當做UIView使用;
a. 內邊距:使用Container包裹與padding結合
b. 按鈕實現(xiàn):decoration:背景;Material與InkWell使用自定義按鈕
c. 畫線 - BoxDecoration:背景顏色、陰影、圓角、邊框等。與Container結合使用
- ClipRRect:裁剪工具,圓角
- BoxShadow:陰影,BoxDecoration屬性
a. Offset(0, -2)上邊陰影 - Expanded:彈性布局
a. 包裹字符,過長會自動換行，彈性布局;不包裹會導致其他布局異常。
b. 包裹NestedScrollView能正常顯示
c. 盡量占滿，如標題居中盡量大，其他控件保持原來大小
d. 不好調整的間隙可以expand填充 - Flexible:不需要填充可用的空間
- Padding:內邊距，一般與EdgeInsets結合使用
- Row、Cloumn:多個控件時使用，主軸和縱軸，一般結合padding使用。
- Stack:允許子組件堆疊，而
Positioned用于根據(jù)Stack的四個角來確定子組件的位置。 - MediaQuery:獲取系統(tǒng)屬性
a. MediaQuery.of(context).padding.top:導航欄高度
b. MediaQuery.of(context).padding.bottom:底部tabbar高度
c. MediaQuery.of(context).size.width:屏幕寬高 - AppBar().preferredSize.height:狀態(tài)欄高度?
- Center:標題居中使用
- Theme:主題
- TextTheme:標題
- 尺寸限制類容器
a. SizedBox:固定寬高;當做間距使用;也可以被當做占位空容器使用
b. BoxConstraints:限制最大、最小寬高
c. AspectRatio:按比例展示,如固定圖片比例- borderRadius
- Divider:分割線
- VoidCallback:類似block
- 動畫
a. AnimationController:Duration動畫時間、
b. Animation<double>:變化范圍
c. CurvedAnimation:曲線動畫
d. AnimatedBuilder、FadeTransition、Transform - Icon:加載系統(tǒng)圖片
- SmoothStarRating:星組件
- RangeValues:與Range相同
- RangeSliderView:范圍控件、SliderView:進度條、CupertinoSwitch:開關控件
- SafeArea:安全區(qū)域
- Scaffold
- TextField:文本框
a. decoration:占位
b. style:文本樣式
c. onChanged:變化
d. maxLines:行數(shù)限制
e. cursorColor光標顏色
f. 取消鍵盤操作:FocusScope.of(context).requestFocus(FocusNode()); - 加載圖片
a. Image.asset、Image.network、AssetImage、NetworkImage
b. 本地圖片在yaml配置路徑 - Offstage:通過offsatge字段控制child是否顯示。場景:啟動顯示廣告后再顯示主頁
- TabController:滑動tab、DefaultTabController
- 對話框:
AlertDialog、SimpleDialog以及Dialog。
a. showDialog:彈框 - 持久化
a. path_provider
b. shared_preferences(SharedPreferences) - Notification:通知冒泡和用戶觸摸事件冒泡是相似的，但有一點不同：通知冒泡可以中止，但用戶觸摸事件不行
//定義通知
class MyNotification extends Notification {
MyNotification(this.msg);
final String msg;
}
//監(jiān)聽通知
NotificationListener<MyNotification>(
onNotification: (notification) {
setState(() {
_msg+=notification.msg+" ";
});
return true;
},
child: Container();
});
//發(fā)送通知
MyNotification("Hi").dispatch(context)
- 網(wǎng)絡請求
a. HttpClient
b. Dio
c. WebSocket - 異步操作
a. FutureBuilder
b. StreamBuilder:它可以接收多個異步操作的結果 - showDialog
- CircularProgressIndicator:加載動畫
可滾動組件
- SingleChildScrollView:讓單個控件可以滾動,用Expanded包裹。不支持基于Sliver的延遲實例化模型
- ListView:與scrollView相同
- GridView:使用Expand包裹
a. scrollDirection
b. padding
c. physics:動畫效果
d. gridDelegate - NestedScrollView:支持 _嵌套滑動,_Expanded包裹
a. headerSliverBuilder:SliverList、SliverPersistentHeader
b. body:Container->ListView.builder - CustomScrollView:可以包含多種滾動模型，舉個例子，假設有一個頁面，頂部需要一個
GridView，底部需要一個ListView，而要求整個頁面的滑動效果是統(tǒng)一的，即它們看起來是一個整體。如果使用GridView+ListView來實現(xiàn)的話，就不能保證一致的滑動效果，因為它們的滾動效果是分離的，所以這時就需要一個"膠水"
a. 自定義slivers:SliverToBoxAdapter
b. SliverAppBar、SliverPadding、SliverList、GridView
c. Sliver共用CustomScrollView的Scrollable，所以最終才實現(xiàn)了統(tǒng)一的滑動效果。 - NestedScrollView與CustomScrollView區(qū)別
a.CustomScrollView-是使用Sliver對象構建任何基于“滾動”布局的最可定制的方法。SingleChildScrollView和NestedScrollView都建立在其之上。
b.NestedScrollView-是為一個非常特殊的用例提供的Wiget-將一個Scrollable對象放置在另一個對象內（在大多數(shù)情況下-方向不同）。
常用第三方組件
cached_network_image
- 圖片緩存加載和載入效果
- 能很好的處理占位及錯誤圖片
flutter_bloc:介紹
dio:網(wǎng)絡請求庫
shared_preferences:輕量級的存儲類來保存鍵值對信息
path_provider:文件操作
pull_to_refresh:下拉刷新組件
fluttertoast:toast效果
photo_view:圖片查看器
video_player:視頻播放器
調試工具
Inspect Widget:view可能溢出
常用效果
1. 自定義導航欄
Widget build(BuildContext context) {
return Container(//外面包裹一層可以設置背景
color: AppTheme.nearlyWhite,
child: SafeArea(//方便控制安全區(qū)域
top: false,
child: Scaffold(//系統(tǒng)提供的腳手架
backgroundColor: AppTheme.nearlyWhite,
body:Container()//自定義
))
);
2. 自定義帶波紋按鈕效果
Container(
width: 140,
height: 40,
decoration: BoxDecoration(//背景
color: Colors.blue,
borderRadius:
const BorderRadius.all(Radius.circular(4.0)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.withOpacity(0.6),
offset: const Offset(4, 4),
blurRadius: 8.0),
],
),
child: Material(//背景效果
color: Colors.transparent,
child: InkWell(//點擊事件
onTap: () {
print("Chat with Us");
},
child: Center(
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
'Chat with Us',
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
),
),
),
),
)
問題
wrap與expand在一起就沒法計算了
a. InkWell包裹expand
b. flutter create uses directory name rather than package name to check name validity項目文件夾名稱不要-
flutter error Invalid
Podfilefile: no implicit conversion of nil into String. ive searched through discussions but I cant seem to fix the issue
移除iOS文件，重新flutter build ios 或者flutter runflutter create -i swift -a kotlin 工程名
a. 創(chuàng)建新的環(huán)境Could not build the application for the simulator.Error launching application on iPhone 11.
a. 解決方案Error running pod install
Error launching application on iPhone 11.稍微復雜點功能，mac都帶不動。
b. 編譯JOT與運行JIT的區(qū)別Flutter向后兼容一致性做的真讓人頭疼
圖片資源熱更不過來
-
用著熱更新就卡主了,切換其他app再切回來。
a.
截屏2021-05-16 下午5.40.40.png FutureBuilder放onTap中不執(zhí)行怎么解決
a. 直接調用方法,FutureBuilder是異步刷新UI用的
b. 需要判斷hasData,可能返回多次且data是null。調試錯誤不是很友好，try...catch。一行一行走下去，看是那個地方報的Crash.目前碰到的是操作了null，判空即可。
model需要判空，在展示UI時也會報錯。
CircularProgressIndicator被拉伸
鍵盤溢出問題:flutter跳轉的下一個界面自動彈出了鍵盤,A RenderFlex overflowed by 77 pixels on the bottom.
a. 溢出部分增加滑動屬性；
b.Scaffold的resizeToAvoidBottomPadding: false讓其遮擋布局；運行android報錯
a. FAILURE: Build failed with an exception.
b. What went wrong:A problem occurred configuring root project 'android'.> Could not resolve all artifacts for configuration ':classpath'.- thread #16, name = 'io.flutter.worker.4', stop reason = EXC_RESOURCE RESOURCE_TYPE_MEMORY (limit=1450 MB, unused=0x0)
frame #0: 0x00000001035e1874 Flutterycc_rgb_convert + 144 Flutterycc_rgb_convert:
-> 0x1035e1874 <+144>: strb w20, [x3]
0x1035e1878 <+148>: ldr x20, [x13, x7, lsl #3]
0x1035e187c <+152>: ldr x19, [x12, x19, lsl #3]
0x1035e1880 <+156>: add x19, x19, x20
Target 0: (Runner) stopped.
- thread #16, name = 'io.flutter.worker.4', stop reason = EXC_RESOURCE RESOURCE_TYPE_MEMORY (limit=1450 MB, unused=0x0)
異步初始化也挺坑的。
Script '.../packages/flutter_tools/gradle/app_plugin_loader.gradle' line: 18
面試題
http://m.itdecent.cn/p/93821c12a825
[Flutter] 一些面試可能會問基礎知識
flutter_interview
算是flutter最完整題庫了
- Widget 和 element 和 RenderObject 之間的關系？
- Widget是用戶界面的一部分,并且是不可變的。
- Element是在樹中特定位置Widget的實例。
- RenderObject是渲染樹中的一個對象，它的層次結構是渲染庫的核心。
- Stream 與 Future是什么關系？
a. Stream 和 Future 是 Dart 異步處理的核心 API。Future 表示稍后獲得的一個數(shù)據(jù)，所有異步的操作的返回值都用 Future 來表示。但是 Future 只能表示一次異步獲得的數(shù)據(jù)。而 Stream 表示多次異步獲得的數(shù)據(jù)。 - Widget 唯一標識Key有那幾種？
a. 主要有4種類型的Key：GlobalKey（確保生成的Key在整個應用中唯一，是很昂貴的，允許element在樹周圍移動或變更父節(jié)點而不會丟失狀態(tài)）、LocalKey、UniqueKey、ObjectKey - State 對象的初始化流程？
- Widget的兩種類型是什么？
- PlatFormView
- flutter的四個線程:
UI Runner、GPU Runner、IO Runner，Platform Runner
總結
- 先把一門學精，再學其他的。不要這里學一下哪里學一下。解決問題只看表面，無疑是沒有好處。
- 學習一門語言，了解大概，學其語法，熟悉環(huán)境。實戰(zhàn)。
- iOS的布局方式到flutter需要重新改變下思想，彈性布局還是好用，適配方便。
- github上有很多優(yōu)秀的庫，可以選一到兩個，仔細研究。
