Flutter学习-切换动画组件AnimatedSwitcher

最新推荐文章于 2024-11-20 11:05:36 发布

suyihao37

最新推荐文章于 2024-11-20 11:05:36 发布

阅读量2.8k

点赞数 1

分类专栏： Flutter 文章标签： Flutter Dart 切换动画 AnimatedSwitcher

本文链接：https://blog.youkuaiyun.com/weixin_45376030/article/details/103136493

版权

本文探讨了在Flutter中使用AnimatedSwitcher组件实现切换动画，包括缩放和渐显渐隐效果，并介绍了如何自定义滑动动画，为应用增加动态视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缩放动画和渐显渐隐动画

import 'package:flutter/material.dart';

import 'animation7.dart';

//通用‘切换动画’组件
//AnimatedSwitcher
class AnimatedSwitcherCounterRoute extends StatefulWidget {
   
  const AnimatedSwitcherCounterRoute({
   Key key}) : super(key: key);

  @override
  _AnimatedSwitcherCounterRouteState createState() =>
      _AnimatedSwitcherCounterRouteState();
}

class _AnimatedSwitcherCounterRouteState
    extends State<AnimatedSwitcherCounterRoute> {
   
  int _count = 0;

  @override
  Widget build(BuildContext context) {
   
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedSwitcher(
            //当child发生变化时（类型或key不同），旧child执行隐藏动画，新child执行显示动画
            duration: const Duration(milliseconds: 500),
            //transitionBuilder决定动画效果
            transitionBuilder: (Widget child,Animation<double> animation){