Flutter-AnimatedWidget組件源碼示例解析
AnimatedWidget組件
在日常的開(kāi)發(fā)當(dāng)中,可能會(huì)出現(xiàn)Flutter SDK自帶的動(dòng)畫組件不能滿足我們實(shí)際的開(kāi)發(fā)需求;
遇到這種情況,我們可以通過(guò)AnimatedWidget組件來(lái)自定義動(dòng)畫組件,這篇博客分享AnimatedWidget組件相關(guān)的內(nèi)容,記錄一次AnimatedWidget組件的源碼解讀。
AnimatedWidget組件源碼解讀
abstract class AnimatedWidget extends StatefulWidget {
const AnimatedWidget({
Key? key,
required this.listenable,
}) : assert(listenable != null),
super(key: key);
final Listenable listenable;
@protected
Widget build(BuildContext context);
@override
State<AnimatedWidget> createState() => _AnimatedState();
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.add(DiagnosticsProperty<Listenable>('animation', listenable));
}
}
class _AnimatedState extends State<AnimatedWidget> {
@override
void initState() {
super.initState();
widget.listenable.addListener(_handleChange);
}
@override
void didUpdateWidget(AnimatedWidget oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.listenable != oldWidget.listenable) {
oldWidget.listenable.removeListener(_handleChange);
widget.listenable.addListener(_handleChange);
}
}
@override
void dispose() {
widget.listenable.removeListener(_handleChange);
super.dispose();
}
void _handleChange() {
setState(() {
// The listenable's state is our build state, and it changed already.
});
}
@override
Widget build(BuildContext context) => widget.build(context);
}上面是AnimatedWidget組件的源碼,解讀如下:
AnimatedWidget組件,是一個(gè)有狀態(tài)的組件,它里面就封裝是了實(shí)現(xiàn)動(dòng)畫的模板;- 構(gòu)造方法中的
listenable對(duì)象,指的是Animation對(duì)象; - 重寫
build方法,傳入一個(gè)使用動(dòng)畫的組件; _AnimatedState.initState(),給動(dòng)畫設(shè)置監(jiān)聽(tīng)器,在動(dòng)畫執(zhí)行的過(guò)程中自動(dòng)調(diào)用setState()更新?tīng)顟B(tài);_AnimatedState.dispose(),釋放動(dòng)畫監(jiān)聽(tīng)器,防止出現(xiàn)內(nèi)存泄漏。
通過(guò)源碼的解讀,我們可以發(fā)現(xiàn)實(shí)現(xiàn)自己的自定義動(dòng)畫還是相對(duì)簡(jiǎn)單的,只需要繼承AnimatedWidget組件,然后重寫build()方法。希望這篇文章對(duì)小伙伴有所幫助。
以上就是Flutter-AnimatedWidget組件源碼示例解析的詳細(xì)內(nèi)容,更多關(guān)于Flutter-AnimatedWidget組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
使用adb命令向Android模擬器中導(dǎo)入通訊錄聯(lián)系人的方法
這篇文章主要介紹了使用adb命令向Android模擬器中導(dǎo)入通訊錄聯(lián)系人的方法,實(shí)例分析了導(dǎo)入通訊錄存儲(chǔ)文件的技巧,需要的朋友可以參考下2015-01-01
Android 中通過(guò)ViewDragHelper實(shí)現(xiàn)ListView的Item的側(cè)拉劃出效果
這篇文章主要介紹了 Android 中通過(guò)ViewDragHelper實(shí)現(xiàn)ListView的Item的側(cè)拉劃出效果,需要的朋友可以參考下2017-08-08
Android TimePicker 直接輸入的問(wèn)題解決方案
這篇文章主要介紹了Android TimePicker 直接輸入的問(wèn)題解決方案的相關(guān)資料,需要的朋友可以參考下2017-04-04
Android 動(dòng)態(tài)加載二維碼視圖生成快照的示例
本篇文章主要介紹了Android 動(dòng)態(tài)加載二維碼視圖生成快照的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Android中實(shí)現(xiàn)圖文并茂的按鈕實(shí)例代碼
這篇文章主要介紹了Android中實(shí)現(xiàn)圖文并茂的按鈕實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),需要的朋友可以參考下2017-04-04
Android 重寫ViewGroup 分析onMeasure()和onLayout()方法
這篇文章主要介紹了Android 重寫ViewGroup 分析onMeasure()和onLayout()方法的相關(guān)資料,需要的朋友可以參考下2017-06-06
Android App支付系列(一):微信支付接入詳細(xì)指南(附官方支付demo)
這篇文章主要介紹了Android App支付系列(一):微信支付接入詳細(xì)指南(附官方支付demo) ,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11

