Flutter动画切换插件animated_switcher的使用

Flutter动画切换插件animated_switcher的使用

animated_switcher 是 Flutter 中一个非常实用的小工具，用于在不同子部件之间切换时添加平滑的动画效果。通过它可以轻松实现页面元素的动态切换，并且支持自定义动画。

使用方法

以下是一个简单的例子，展示了如何使用 animated_switcher 来实现颜色切换的动画效果：

import 'package:flutter/material.dart';

class SomeWidget extends StatefulWidget {
  const SomeWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  State<SomeWidget> createState() => _SomeWidgetState();
}

class _SomeWidgetState extends State<SomeWidget> {
  bool switched = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 使用 animatedSwitch 实现动画切换
        AnimatedSwitcher(
          duration: Duration(milliseconds: 500), // 设置动画持续时间
          child: Container(
            key: ValueKey(switched), // 每次状态改变时都需要一个不同的 Key
            width: 100,
            height: 100,
            color: switched ? Colors.blue : Colors.red, // 切换颜色
            alignment: Alignment.center,
            child: Text(
              switched ? "Blue" : "Red", // 显示当前的颜色
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
        SizedBox(height: 20), // 添加间距
        // 切换开关
        SwitchListTile(
          title: Text("切换颜色"),
          value: switched,
          onChanged: (value) {
            setState(() {
              switched = value; // 改变状态以触发动画
            });
          },
        ),
      ],
    );
  }
}

更多关于Flutter动画切换插件animated_switcher的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画切换插件animated_switcher的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


AnimatedSwitcher 是 Flutter 中用于在切换不同子部件时添加动画效果的一个小部件。它可以让你在切换子部件时自动应用动画，比如淡入淡出、缩放、滑动等效果。

基本用法

AnimatedSwitcher 的基本用法是包裹两个或多个子部件，并在切换时自动应用动画。

import 'package:flutter/material.dart';

class AnimatedSwitcherExample extends StatefulWidget {
  @override
  _AnimatedSwitcherExampleState createState() => _AnimatedSwitcherExampleState();
}

class _AnimatedSwitcherExampleState extends State<AnimatedSwitcherExample> {
  bool _toggle = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedSwitcher Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedSwitcher(
              duration: Duration(milliseconds: 500),
              transitionBuilder: (Widget child, Animation<double> animation) {
                return ScaleTransition(scale: animation, child: child);
              },
              child: _toggle
                  ? Container(
                      key: ValueKey<int>(1),
                      width: 100,
                      height: 100,
                      color: Colors.blue,
                      child: Center(child: Text('A')),
                    )
                  : Container(
                      key: ValueKey<int>(2),
                      width: 100,
                      height: 100,
                      color: Colors.red,
                      child: Center(child: Text('B')),
                    ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _toggle = !_toggle;
                });
              },
              child: Text('Toggle'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: AnimatedSwitcherExample(),
  ));
}

关键参数

  • duration: 定义动画的持续时间。
  • transitionBuilder: 自定义动画效果。默认情况下，AnimatedSwitcher 使用淡入淡出动画。
  • child: 当前显示的子部件。当 child 发生变化时，AnimatedSwitcher 会自动应用动画。

自定义动画

你可以通过 transitionBuilder 参数自定义动画效果。例如，使用 ScaleTransition 实现缩放效果，或者使用 SlideTransition 实现滑动效果。

transitionBuilder: (Widget child, Animation<double> animation) {
  return SlideTransition(
    position: Tween<Offset>(
      begin: Offset(-1.0, 0.0),
      end: Offset.zero,
    ).animate(animation),
    child: child,
  );
}
回到顶部