来自Flutter组件库

AnimatedSize是一个用于动画化其子组件大小变化的组件。当AnimatedSize的子组件大小发生变化时，它会自动应用动画效果，使界面变化更加平滑和生动有趣。这种动画效果不仅增强了用户界面的视觉吸引力，还提高了用户与应用的交互体验。

主要属性

child：要动画改变大小的子组件

alignment ：子组件对齐方式

clipBehavior ：对子组件的裁剪方式，默认是Clip.hardEdge

curve ：动画曲线

duration ：将此部件的大小转换为与子部件的大小相匹配的持续时间

onEnd ：动画结束回调事件

reverseDuration ：当组件的尺寸反向过渡到与子组件的尺寸匹配时的持续时间。如果未指定，默认为[duration]。

示例

import 'package:flutter/material.dart';

void main() => runApp(const AnimatedSizeExampleApp());

class AnimatedSizeExampleApp extends StatelessWidget {
  const AnimatedSizeExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('AnimatedSize Sample')),
        body: const Center(
          child: AnimatedSizeExample(),
        ),
      ),
    );
  }
}

class AnimatedSizeExample extends StatefulWidget {
  const AnimatedSizeExample({super.key});

  @override
  State<AnimatedSizeExample> createState() => _AnimatedSizeExampleState();
}

class _AnimatedSizeExampleState extends State<AnimatedSizeExample> {
  double _size = 50.0;
  bool _large = false;

  void _updateSize() {
    setState(() {
      _size = _large ? 250.0 : 100.0;
      _large = !_large;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _updateSize(),
      child: ColoredBox(
        color: Colors.amberAccent,
        child: AnimatedSize(
          curve: Curves.easeIn,
          duration: const Duration(seconds: 1),
  
          child: FlutterLogo(size: _size),
        ),
      ),
    );
  }
}

这个示例通过点击Container，使用AnimatedSize动画改变FlutterLogo的大小

注意事项

渲染性能：AnimatedSize 是通过重绘屏幕来产生动画的，所以如果过度使用或错误使用，可能会对渲染性能造成影响。合理的使用并充分测试应用将帮助你避免性能问题。