面试题：Flutter中如何实现一个带动画的自定义Widget

Question

请描述在Flutter中创建一个自定义Widget，并为其添加淡入淡出动画效果的实现步骤，包括所需的主要类和方法。

Answer 1

1. 创建自定义Widget：
   • 继承 StatelessWidget 或 StatefulWidget。一般如果需要状态变化（比如动画相关），使用 StatefulWidget。
   • 实现 build 方法来定义Widget的外观。例如：

   class CustomFadeWidget extends StatefulWidget {
     @override
     _CustomFadeWidgetState createState() => _CustomFadeWidgetState();
   }
   
   class _CustomFadeWidgetState extends State<CustomFadeWidget> {
     @override
     Widget build(BuildContext context) {
       return Container(
         color: Colors.blue,
         child: Text('Custom Fade Widget'),
       );
     }
   }
   

2. 添加淡入淡出动画效果：
   • 主要类：
     • AnimationController：用于控制动画，定义动画的时长、方向等。它需要一个 TickerProvider，通常在 State 类中使用 SingleTickerProviderStateMixin 来提供。
     • Animation：表示动画的值，Animation<double> 常用来表示淡入淡出动画的透明度值，范围从0（完全透明）到1（不透明）。
     • CurvedAnimation：用于定义动画的曲线，比如线性、加速、减速等。
     • AnimatedBuilder：方便根据动画值来构建UI。
   • 主要方法：
     • 在 State 类中，初始化 AnimationController。例如：

     late AnimationController _controller;
     late Animation<double> _animation;
     
     @override
     void initState() {
       super.initState();
       _controller = AnimationController(
         vsync: this,
         duration: const Duration(seconds: 2),
       );
       _animation = CurvedAnimation(
         parent: _controller,
         curve: Curves.easeInOut,
       );
       _controller.repeat(reverse: true);
     }
     

     • 使用 AnimatedBuilder 来根据动画值更新Widget的透明度。修改 build 方法如下：

     @override
     Widget build(BuildContext context) {
       return AnimatedBuilder(
         animation: _animation,
         builder: (context, child) {
           return Opacity(
             opacity: _animation.value,
             child: Container(
               color: Colors.blue,
               child: Text('Custom Fade Widget'),
             ),
           );
         },
       );
     }
     

   • 清理资源：
     • 在 State 类的 dispose 方法中，释放 AnimationController。

     @override
     void dispose() {
       _controller.dispose();
       super.dispose();
     }