1. 路由Navigator
基礎(chǔ)使用
//路由跳轉(zhuǎn)
Navigator.of(context).push(MaterialPageRoute(builder: (context)=>Container()));
//關(guān)閉路由
Navigator.pop(context);
帶返回值
//路由跳轉(zhuǎn)，接收返回值
Future<int> result = Navigator.of(context).push(MaterialPageRoute(builder: (context)=>Container()));
//關(guān)閉路由，傳遞值1（泛型轧苫，當然也可以是其他值）
Navigator.pop(context,1);
定制路由
PageRouteBuilder 可以定制動畫或其他樣式
//路由自定義動畫,改為左邊進入
Navigator.of(context).push(PageRouteBuilder(
pageBuilder: (context,Animation animation,_)=>FadeTransition(
opacity: animation,
child: SlideTransition(position: Tween<Offset>(begin: Offset(-1.0, 0.0),end: Offset(0.0, 0.0)).animate(animation),child: AnimationContain(),),
)
));
命名導(dǎo)航器路由（靜態(tài)路由）
//注冊 MaterialApp 的routes參數(shù),傳遞map
//統(tǒng)一定制路由，MaterialApp 的onGenerateRoute參數(shù)
var map = <String, WidgetBuilder> {
'/a': (context) =>Container()};
//使用
Navigator.of(context).pushName('/a');
//關(guān)閉
Navigator.pop(context);
靜態(tài)路由和動態(tài)路由內(nèi)部其實是一樣的淑翼，但是更方便管理，可以用一個map品追，而map的實例放在一個文件里玄括，這個文件即可集中管理所有路由，修改起來非常方便
ModalRoute
常用路由:
| router | 關(guān)系 | 用途 |
|---|---|---|
| PageRoute | 子類 | 頁面路由 |
| PopupRoute | 子類 | 彈框路由 |
| WillPopScope | 組合 | 導(dǎo)航返回攔截 |
a. PageRoute
MaterialPageRoute和PageRouteBuilder都是其的子類肉瓦，與頁面有關(guān)遭京，覆蓋全屏
b. PopupRoute
與彈框有關(guān)，無需覆蓋全屏
showDialog泞莉、showMenu和showModalBottomSheet等內(nèi)部創(chuàng)建了PopupRoute實例哪雕，并調(diào)用了路由
c.WillPopScope
可實現(xiàn)返回攔截，如短時間連續(xù)點擊二次退出
內(nèi)部創(chuàng)建了ModalRoute實例
源碼層簡析：https://segmentfault.com/a/1190000011590792?utm_source=tag-newest
2.主題 Theme
先從MaterialApp的theme來看鲫趁，源碼的build方法可以看出其實內(nèi)部創(chuàng)建了AnimatedTheme控件,而AnimatedTheme控件內(nèi)部其實就是創(chuàng)建了Theme控件
所以還是要看Theme
Theme內(nèi)部創(chuàng)建了_InheritedTheme
class _InheritedTheme extends InheritedWidget {
const _InheritedTheme({
Key key,
@required this.theme,
@required Widget child
}) : assert(theme != null),
super(key: key, child: child);
final Theme theme;
@override
bool updateShouldNotify(_InheritedTheme old) => theme.data != old.theme.data;
}
InheritedWidget控件比較重要热监，可用于數(shù)據(jù)共享，Theme內(nèi)部明顯共享著ThemeData饮寞，這意味著一旦MaterialApp使用了theme,后續(xù)的控件如果不新建ThemeData,將共享這主題數(shù)據(jù)
InheritedWidget后續(xù)再研究，相關(guān)信息：https://book.flutterchina.club/chapter7/inherited_widget.html
//修改accentColor列吼，其他默認
Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
);
//單獨使用
color: Theme.of(context).accentColor
//使用新創(chuàng)建的
Theme(
data: ThemeData(
primarySwatch: _themeColor, //用于導(dǎo)航欄幽崩、FloatingActionButton的背景色等
iconTheme: IconThemeData(color: _themeColor) //用于Icon顏色
)
3.手勢
Listener原始事件
與android的onTouchEvent一樣，有4個基礎(chǔ)手勢
- onPointerDown: 手指按下
- onPointerMove: 手指移動
- onPointerUp: 手指抬起
- onPointerCancel: 手指取消
一個HitTestBehavior
enum HitTestBehavior {
//子widget會一個接一個的進行命中測試寞钥，如果子Widget中有測試通過的,則當前Widget通過慌申，
//這就意味著，如果指針事件作用于子Widget上時理郑，其父(祖先)Widget也肯定可以收到該事件
deferToChild, //默認
//在命中測試時蹄溉，將當前Widget當成不透明處理(即使本身是透明的)，最終的效果相當于當前Widget的整個區(qū)域都是點擊區(qū)域
opaque,
//當點擊透明區(qū)域時您炉，可以對底部widget進行命中測試柒爵，這意味著底部widget也可以接收事件
//translucent可以在Stack中實現(xiàn)"點透"的效果
translucent,
}
GestureRecognizer 手勢識別
GestureDetector封裝手勢識別控件，內(nèi)部使用的是多個GestureRecognizer
使用
Listener(
child: Container(
alignment: Alignment.center,
color: Colors.blue,
width: 300.0,
height: 150.0,
child: Text(_event?.toString()??"",style: TextStyle(color: Colors.white)),
),
onPointerDown: (PointerDownEvent event) => setState(()=>_event=event),
onPointerMove: (PointerMoveEvent event) => setState(()=>_event=event),
onPointerUp: (PointerUpEvent event) => setState(()=>_event=event),
)
注：event內(nèi)部使用的坐標是絕對坐標
4.動畫
官方封裝控件比較多赚爵，這里就說最基礎(chǔ)的
快捷鍵stanim
創(chuàng)建的state會混合SingleTickerProviderStateMixin類棉胀，用于計時
class ScaleAnimationWidget extends StatefulWidget {
@override
_ScaleAnimationWidgetState createState() => _ScaleAnimationWidgetState();
}
class _ScaleAnimationWidgetState extends State<ScaleAnimationWidget> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
double _value = 255.0;
bool _flag = true;
_changeValue(){
if(_flag) {
_controller.forward();
}else{
_controller.reverse();
}
_flag = !_flag;
}
@override
void initState() {
_controller = AnimationController(duration: Duration(seconds: 1),vsync: this);
//插值器
_animation = CurvedAnimation(parent: _controller, curve: Curves.decelerate);
_animation = Tween(begin: 255.0, end: 80.0).animate(_animation)
..addListener((){
setState(() {});
});
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: _changeValue,
child: Container(
width: _animation.value,
height: _animation.value,
child: FlutterLogo(),
),
);
}
}
動畫一般一個AnimationController管理多個Animation,共4個AnimationStatus狀態(tài)：
a. dismissed 動畫在起始點停止
b. forward 動畫正在正向執(zhí)行
c. reverse 動畫正在反向執(zhí)行
d. completed 動畫在終點停止
使用步驟
//1.創(chuàng)建動畫控制器
_controller = AnimationController(duration: Duration(seconds: 4),vsync: this);
//2.添加動畫法瑟，可以添加多個
//Interval設(shè)置實現(xiàn)動畫時間段，設(shè)置動畫播放方式
_x = Tween(begin: 0.0, end: 200.0).animate(
CurvedAnimation(parent: _controller, curve: Interval(0.0, 0.6,curve: Curves.bounceInOut))
);
//執(zhí)行動畫
_controller.forward();
也可以設(shè)置監(jiān)聽
_controller.addListener((){
//每次值改變將調(diào)用內(nèi)部
});
_controller.addStatusListener((AnimationStatus state){
//可對state進行處理
});
小結(jié)
這部分使用起來比較簡單唁奢，但要深入原理需要花費一定時間闸氮。
當時學(xué)android的時候帜矾，剛開始也是一大堆View，但其實這東西和api一樣，用多了就掌握了翎蹈。
Flutter其實相對好些，所有能修改的樣式其實都放在構(gòu)造函數(shù)中琴昆，配合注釋其實上手很快的懂昂，至于多個括號，其實你用久了感覺還是很舒服的（真香？衲А）
只會使用是沒有意義的蒜埋，接下來進一步深入控件的擺放，繪制及事件
