来自Flutter组件库

描述

当我们创建交互性强的用户界面时，渐变效果是至关重要的一环。Flutter 提供了一系列内置的动画组件以便我们能更轻松地实现这些效果。其中，AnimatedCrossFade 组件就是一个极好的例子。

AnimatedCrossFade 是一个能在两个孩子（child）组件间交叉渐现的组件。该组件会根据当前状态将一个孩子组件淡出，另一个孩子组件淡入。

主要参数：

1. firstChild 和 secondChild: 这两个组件是动画的主体，动画效果将在它们之间切换。

2. crossFadeState: 这是一个元素和动画状态相关的参数，通过 CrossFadeState.showFirst 和 CrossFadeState.showSecond 来控制展示哪个孩子组件。

3. duration: 这个参数表示动画时长。

4. excludeFromSemantics：当此属性为true时，相当于在底级控件上添加一个“ExcludeFocus”控件，以防止其在淡入淡出堆栈的最底层时被获取焦点。

示例

import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: MyAnimatedCrossFade()));

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

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

class MyAnimatedCrossFadeState extends State<MyAnimatedCrossFade> {
  CrossFadeState _crossFadeState = CrossFadeState.showFirst;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AnimatedCrossFade示例'),
      ),
      body: AnimatedCrossFade(
        alignment: Alignment.center,
        firstChild: const ListTile(
          leading: Icon(Icons.looks_one),
          title: Text('显示第一个组件',
            style: TextStyle(fontSize: 26.0),
          ),
        ),
        secondChild: const ListTile(
          leading: Icon(Icons.looks_two),
          title: Text('显示第二个组件',
            style: TextStyle(fontSize: 26.0, color: Colors.lightBlue),
          ),
        ),
        crossFadeState: _crossFadeState,
        duration: const Duration(seconds: 2),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _swapFade,
        child: const Icon(Icons.refresh),
      ),
    );
  }

  void _swapFade() {
    setState(() {
      _crossFadeState == CrossFadeState.showFirst
          ? _crossFadeState = CrossFadeState.showSecond
          : _crossFadeState = CrossFadeState.showFirst;
    });
  }
}

在这个样例中，动画将在两个孩子组件ListTile之间切换，其中包含一个图标（Icon）和文本（Text）。FloatingActionButton用于切换CrossFadeState状态，从而实现动画的切换。

注意事项

需要注意的是这个小部件旨在用于淡入淡出两个具有相同宽度的 widget。如果两个子widget的高度不同，动画会通过将其顶部边缘对齐来剪裁溢出的子widget，这意味着底部将被剪裁。

总结

总的来说，Flutter 中的 AnimatedCrossFade 组件使用户能够流畅地在两种不同的视图状态之间切换。这提供了一个改善用户体验，增强应用动态感的有效方式。只要你合理利用，就可以创造出许多引人入胜的动画效果