Flutter如何实现类似Android的animateLayoutChanges布局变化动画？

当然可以，Flutter提供了多种方式实现类似Android android:animateLayoutChanges的布局变化动画（非淡入效果），下面是几种常用的实用方案：

AnimatedList是Flutter官方专为列表项动态增删设计的组件，可自定义进入/退出动画（如滑动、缩放等非淡入效果）。

示例代码：

class AnimatedListDemo extends StatefulWidget {
  @override
  _AnimatedListDemoState createState() => _AnimatedListDemoState();
}

class _AnimatedListDemoState extends State<AnimatedListDemo> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  List<String> _items = [];

  void _addItem() {
    setState(() {
      _items.add("新元素 ${_items.length + 1}");
      _listKey.currentState!.insertItem(_items.length - 1);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(onPressed: _addItem, child: const Text("添加元素")),
        Expanded(
          child: AnimatedList(
            key: _listKey,
            initialItemCount: _items.length,
            itemBuilder: (context, index, animation) {
              // 自定义从右侧滑入的动画
              return SlideTransition(
                position: animation.drive(
                  Tween(begin: const Offset(1.0, 0.0), end: const Offset(0.0, 0.0))
                      .chain(CurveTween(curve: Curves.easeInOut)),
                ),
                child: ListTile(title: Text(_items[index])),
              );
            },
          ),
        ),
      ],
    );
  }
}

你可以把SlideTransition替换为ScaleTransition实现缩放出现效果，或者根据需求自定义过渡逻辑。

如果是单个元素的出现/消失切换，AnimatedSwitcher可以快速实现自定义动画，替代默认的淡入效果。

示例代码：

class AnimatedSwitcherDemo extends StatefulWidget {
  @override
  _AnimatedSwitcherDemoState createState() => _AnimatedSwitcherDemoState();
}

class _AnimatedSwitcherDemoState extends State<AnimatedSwitcherDemo> {
  bool _showItem = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: () => setState(() => _showItem = !_showItem),
          child: Text(_showItem ? "隐藏元素" : "显示元素"),
        ),
        const SizedBox(height: 20),
        AnimatedSwitcher(
          duration: const Duration(milliseconds: 500),
          transitionBuilder: (child, animation) {
            // 自定义从下方滑入的动画
            return SlideTransition(
              position: animation.drive(
                Tween(begin: const Offset(0.0, 1.0), end: const Offset(0.0, 0.0))
                    .chain(CurveTween(curve: Curves.bounceOut)),
              ),
              child: child,
            );
          },
          child: _showItem
              ? Container(
                  key: UniqueKey(),
                  width: 200,
                  height: 100,
                  color: Colors.blue,
                  child: const Center(child: Text("动态元素")),
                )
              : const SizedBox.shrink(),
        ),
      ],
    );
  }
}

如果需要对动画的触发时机、曲线、时长做更精细的控制，可以直接使用AnimationController配合SlideTransition、ScaleTransition等组件实现任意非淡入的出现效果。

示例代码：

class CustomAnimationDemo extends StatefulWidget {
  @override
  _CustomAnimationDemoState createState() => _CustomAnimationDemoState();
}

class _CustomAnimationDemoState extends State<CustomAnimationDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _slideAnimation;
  bool _isVisible = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 600),
      vsync: this,
    );
    _slideAnimation = Tween<Offset>(
      begin: const Offset(-1.0, 0.0),
      end: const Offset(0.0, 0.0),
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
  }

  void _toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible;
      _isVisible ? _controller.forward() : _controller.reverse();
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(onPressed: _toggleVisibility, child: const Text("切换显示")),
        const SizedBox(height: 20),
        if (_isVisible || _controller.isAnimating)
          SlideTransition(
            position: _slideAnimation,
            child: Container(
              width: 150,
              height: 150,
              color: Colors.green,
              child: const Center(child: Text("自定义动画元素")),
            ),
          ),
      ],
    );
  }
}

以上方案都能实现类似Android android:animateLayoutChanges的布局动画效果，你可以根据实际场景选择合适的方式，并调整动画的曲线、方向、时长等参数。

内容的提问来源于stack exchange，提问作者dnnx