Widget 的淡入淡出效果

在实现 UI 设计时，我们经常需要在屏幕上显示或隐藏各种元素。如若这个过程只是让某个元素快速地出现或者消失，用户们肯定不买帐。我们一般会使用不透明动画让元素淡入淡出，以创建出更加流畅的用户体验。

在 Flutter 中，你可以使用 AnimatedOpacity widget 来完成这个效果，请参见下面的步骤：

1. 创建一个用来淡入淡出的方框。

2. 定义一个 StatefulWidget。

3. 显示一个用于切换可见状态的按钮

4. 淡入淡出方框。

首先是创建一个来淡入淡出的东西。在这个示例中，你将在屏幕上绘制一个绿色的方框。

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

我们要对这个绿色的方框进行动画。那么为了表示这个方框的状态是否可见，你需要使用 StatefulWidget。

StatefulWidget 是一个类，它将会创建一个 State 对象。而这个 State 对象将包含与这个应用相关的一些数据，并且能够更新它们。当你更新数据时，可以让Flutter使用这些更改去重建用户界面。

在这个示例中，我们将使用一个布尔值来表示其是否可见。

要构造一个 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 之间进行切换。为了使改变生效，你需要使用 State 类中的 setState() 方法，这会使 Flutter 重建这个 widget。

注意：如果你想要了解更多与用户输入相关的资料，请参阅 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 widget。

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

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-07-03。 查看文档源码 或者 为本页面内容提出建议。