淡入淡出组件

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。使用 State 类中的 setState() 方法进行此更改，这会告诉 Flutter 重建小部件。

有关处理用户输入的更多信息，请参阅 Cookbook 中的手势 (Gestures) 部分。

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),
      ),
    );
  }
}