淡入淡出小部件

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