Flutter 中的 AnimatedSwitcher 小部件：全面指南

AnimatedSwitcher是Flutter中的一个小部件，用于在两个不同的小部件之间切换时提供动画效果。以下是如何使用AnimatedSwitcher的示例代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  bool selected = true;
 
  void _toggle() {
    setState(() {
      selected = !selected;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedSwitcher(
          duration: const Duration(milliseconds: 300),
          transitionBuilder: (child, animation) {
            return ScaleTransition(
              child: child,
              scale: animation,
            );
          },
          child: selected
              ? Icon(Icons.favorite, size: 50, color: Colors.red)
              : Icon(Icons.favorite_border, size: 50, color: Colors.red),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Toggle',
        child: Icon(Icons.swap_horiz),
      ),
    );
  }
}

在这个例子中，我们有一个HomePage小部件，它有一个状态，由_toggle方法改变。这个状态决定了AnimatedSwitcher的child属性是一个红色心形图标还是没有填充的心形图标。当用户点击浮动按钮时，_toggle方法被调用，状态改变，导致AnimatedSwitcher执行一个缩放转换动画。