Flutter-AnimatedWidget組件源碼示例解析

更新時(shí)間：2023年06月29日 11:01:15 作者：阿博的夢(mèng)囈

這篇文章主要為大家介紹了Flutter-AnimatedWidget組件源碼示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

AnimatedWidget組件

在日常的開發(fā)當(dāng)中，可能會(huì)出現(xiàn)Flutter SDK自帶的動(dòng)畫組件不能滿足我們實(shí)際的開發(fā)需求；

遇到這種情況，我們可以通過AnimatedWidget組件來自定義動(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)聽器，在動(dòng)畫執(zhí)行的過程中自動(dòng)調(diào)用setState()更新狀態(tài)；
_AnimatedState.dispose()，釋放動(dòng)畫監(jiān)聽器，防止出現(xiàn)內(nèi)存泄漏。

通過源碼的解讀，我們可以發(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)文章！

您可能感興趣的文章: