如何在Flutter中实现Jetpack Compose同款组件切换滑动动画？

你在Jetpack Compose中实现的是切换组件时新组件从对应方向滑入、旧组件向相反方向滑出的动画，用Flutter的AnimatedSwitcher可以完美复刻，核心是自定义过渡逻辑并匹配原动画的方向规则。

以下是完整实现代码：

import 'package:flutter/material.dart';

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

  @override
  State<GreetingPage> createState() => _GreetingPageState();
}

class _GreetingPageState extends State<GreetingPage> {
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () => setState(() => _isVisible = !_isVisible),
            child: const Text("Button"),
          ),
          Expanded(
            child: AnimatedSwitcher(
              duration: const Duration(milliseconds: 300),
              transitionBuilder: (Widget child, Animation<double> animation) {
                final isNewChild = child.key == ValueKey(_isVisible);
                // 匹配Jetpack Compose原动画的方向逻辑
                final slideInOffset = _isVisible ? const Offset(-1.0, 0) : const Offset(1.0, 0);
                final slideOutOffset = _isVisible ? const Offset(1.0, 0) : const Offset(-1.0, 0);

                return Stack(
                  children: [
                    if (!isNewChild)
                      SlideTransition(
                        position: animation.drive(
                          Tween(begin: Offset.zero, end: slideOutOffset),
                        ),
                        child: child,
                      ),
                    if (isNewChild)
                      SlideTransition(
                        position: animation.drive(
                          Tween(begin: slideInOffset, end: Offset.zero),
                        ),
                        child: child,
                      ),
                  ],
                );
              },
              child: _isVisible
                  ? Container(
                      key: const ValueKey(true),
                      color: Colors.red,
                    )
                  : Container(
                      key: const ValueKey(false),
                      color: Colors.green,
                    ),
            ),
          ),
        ],
      ),
    );
  }
}

关键逻辑说明 #

1. 唯一Key标记：给切换的容器设置ValueKey，让AnimatedSwitcher能识别组件的新旧变化。
2. 方向匹配：完全对应你Jetpack Compose代码的动画规则：
   • 切换显示红色时：红色从左侧滑入，绿色向右侧滑出
   • 切换显示绿色时：绿色从右侧滑入，红色向左侧滑出
3. 叠加动画：用Stack同时承载新旧组件，保证切换过程中两个组件的动画同时可见。

内容的提问来源于stack exchange，提问作者Nguyễn Văn Bến