淡入淡出组件

UI 开发者通常需要在屏幕上显示和隐藏元素。然而，快速地让元素在屏幕上出现和消失，可能会让最终用户感到不适。相反，通过不透明度动画让元素淡入淡出，可以创建流畅的用户体验。

AnimatedOpacity 组件使得执行不透明度动画变得非常简单。本教程将使用以下步骤：

1. 创建一个需要淡入淡出的盒子。
2. 定义一个 StatefulWidget。
3. 显示一个切换可见性的按钮。
4. 淡入淡出盒子。

首先，创建一个需要淡入淡出的对象。本例中，我们将在屏幕上绘制一个绿色盒子。

Container(width: 200, height: 200, color: Colors.green)

现在你已经有了一个要进行动画的绿色盒子，你需要一种方法来知道该盒子是否应该可见。为此，请使用 StatefulWidget。

一个 StatefulWidget 是一个创建 State 对象的类。State 对象持有关于应用程序的一些数据，并提供了一种更新这些数据的方法。更新数据时，你还可以要求 Flutter 使用这些更改来重建 UI。

在本例中，你有一条数据：一个布尔值，表示按钮是否可见。

要构造 StatefulWidget，需要创建两个类：一个 StatefulWidget 和一个相应的 State 类。专业提示：Android Studio 和 VSCode 的 Flutter 插件包含 stful 片段，可以快速生成此代码。

// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible.
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    // The green box goes here with some other Widgets.
  }
}

现在你已经有了一些数据来确定绿色盒子是否应该可见，你需要一种方法来更新这些数据。在本例中，如果盒子可见，则将其隐藏；如果盒子隐藏，则将其显示。

为了处理这种情况，请显示一个按钮。当用户按下按钮时，将布尔值从 true 翻转为 false，或从 false 翻转为 true。使用 setState() 进行此更改，它是 State 类中的一个方法。这会告诉 Flutter 重建组件。

有关处理用户输入的更多信息，请参阅开发手册的手势部分。

FloatingActionButton(
  onPressed: () {
    // Call setState. This tells Flutter to rebuild the
    // UI with the changes.
    setState(() {
      _visible = !_visible;
    });
  },
  tooltip: 'Toggle Opacity',
  child: const Icon(Icons.flip),
)

你已经有了一个屏幕上的绿色盒子和一个用于将可见性切换为 true 或 false 的按钮。如何让盒子淡入淡出？使用 AnimatedOpacity 组件。

AnimatedOpacity 组件需要三个参数：

• opacity：一个从 0.0（完全透明）到 1.0（完全不透明）的值。
• duration：动画完成所需的时间。
• child：要进行动画的组件。在本例中，是绿色盒子。

AnimatedOpacity(
  // If the widget is visible, animate to 0.0 (invisible).
  // If the widget is hidden, animate to 1.0 (fully visible).
  opacity: _visible ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 500),
  // The green box must be a child of the AnimatedOpacity widget.
  child: Container(width: 200, height: 200, color: Colors.green),
)

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Opacity Demo';
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: AnimatedOpacity(
          // If the widget is visible, animate to 0.0 (invisible).
          // If the widget is hidden, animate to 1.0 (fully visible).
          opacity: _visible ? 1.0 : 0.0,
          duration: const Duration(milliseconds: 500),
          // The green box must be a child of the AnimatedOpacity widget.
          child: Container(width: 200, height: 200, color: Colors.green),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Call setState. This tells Flutter to rebuild the
          // UI with the changes.
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: const Icon(Icons.flip),
      ),
    );
  }
}