flutter的RotatedBox组件示例3

这个Flutter应用定义了一个旋转的加载指示器，通过AnimationController和Tween实现旋转动画，AnimatedBuilder用于在动画值更新时重建指示器。指示器是一个带有文字的圆形容器，会持续旋转显示加载状态。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('旋转加载指示器示例'),
        ),
        body: Center(
          child: RotatingIndicator(),
        ),
      ),
    );
  }
}

class RotatingIndicator extends StatefulWidget {
  @override
  _RotatingIndicatorState createState() => _RotatingIndicatorState();
}

class _RotatingIndicatorState extends State<RotatingIndicator>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _rotationAnimation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..repeat();

    _rotationAnimation = Tween<double>(begin: 0, end: 1).animate(_animationController);
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (context, child) {
        return Transform.rotate(
          angle: _rotationAnimation.value * 2 * 3.141592653589793, // 360 degrees
          child: child,
        );
      },
      child: _buildIndicator(),
    );
  }

  Widget _buildIndicator() {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
      ),
      child: Center(
        child: Text(
          '加载中...',
          style: TextStyle(
            color: Colors.white,
            fontSize: 12,
          ),
        ),
      ),
    );
  }
}

以下是对这段代码的分析：
一、整体功能
这段 Flutter 代码实现了一个旋转加载指示器的示例。在应用程序界面的中心展示一个蓝色圆形的加载指示器，它会不停地旋转以表示某种加载或等待的状态。

二、代码结构
导入部分：
导入了 Flutter 的Material包，用于构建 Material Design 风格的界面。

main函数：
调用runApp函数启动应用程序，并传入MyApp作为根 widget。

MyApp类：
继承自StatelessWidget，是应用程序的根 widget。
在build方法中返回一个MaterialApp，设置了应用程序的主页面为一个Scaffold，其主体部分展示RotatingIndicator。

RotatingIndicator类：
继承自StatefulWidget，表明这是一个有状态的 widget，用于实现旋转加载指示器的动态效果。
createState方法返回_RotatingIndicatorState，用于管理该 widget 的状态。

_RotatingIndicatorState类：
继承自State且混入了SingleTickerProviderStateMixin，后者用于提供动画相关的功能。

initState方法：
创建了一个AnimationController对象_animationController，设置其持续时间为 1 秒，并指定vsync为当前实例（通过混入 SingleTickerProviderStateMixin实现），然后调用repeat方法使动画循环播放。
创建了一个Animation对象_rotationAnimation，通过Tween设置其起始值为 0，结束值为 1，并将其与 _animationController关联起来，用于控制旋转角度的变化。

dispose方法：
用于在 widget 销毁时释放_animationController资源，避免内存泄漏。

build方法：
使用AnimatedBuilder来根据_animationController的动画状态构建 widget。
在AnimatedBuilder的builder回调函数中，通过Transform.rotate对child（即_buildIndicator返回的加载指示器 widget）进行旋转操作，旋转角度由_rotationAnimation.value计算得出，使其实现 360 度的连续旋转。

_buildIndicator方法：
返回一个Container作为加载指示器的外观。设置其宽度和高度为 50，形状为圆形，背景颜色为蓝色。
在Container内部，通过Center将一个白色文本 “加载中…” 居中显示，字体大小为 12。

三、技术要点
动画相关：
使用AnimationController来控制动画的播放，设置其持续时间和循环播放属性，实现了加载指示器的持续旋转效果。
通过Tween和Animation的配合，定义了旋转角度从 0 到 1 的变化范围，再结合Transform.rotate将其转换为实际的 360 度旋转效果。

状态管理与资源释放：
作为有状态的 widget，在initState中初始化动画相关的对象，在dispose中正确释放AnimationController资源，确保内存的有效利用和避免潜在的内存泄漏问题。

UI 构建：
通过AnimatedBuilder根据动画状态动态构建旋转的加载指示器，结合Container、Center等组件构建出了一个具有视觉效果的加载指示器外观，清晰地展示了加载的状态。