作为UI开发人员，我们经常需要在屏幕上显示和隐藏元素。但是，快速弹出屏幕上和屏幕外的元素会让最终用户感到不安。相反，我们可以使用不透明度动画淡入淡出元素以创建流畅的体验。

在Flutter中，我们可以使用AnimatedOpacity Widget完成此任务。

导读

1.显示一个淡入淡出的方块。
2.定义StatefulWidget。
3.显示切换可见性的按钮。
4.将方块淡入淡出。

1.创建一个淡入淡出的方块。

首先，我们需要一些淡入淡出的东西！在这个例子中，我们将在屏幕上绘制一个绿色方块。

Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
);

2.定义StatefulWidget。

现在我们有一个绿色方块来制作动画，我们需要一种方法来了解该方块是应该是可见的还是不可见的。为此，我们可以使用StatefulWidget。

StatefulWidget是一个创建State对象的类。 State对象包含有关我们应用程序的一些数据，并提供了更新该数据的方法。当我们更新数据时，我们也可以要求Flutter使用这些更改重建我们的UI。

在我们的例子中，我们将有一个数据：一个表示按钮是可见还是不可见的布尔值。

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

class MyHomePage extends StatefulWidget {
    final String title;
    
    MyHomePage({Key key, this.title}) : super(key: key);
    
    @override
    _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    bool _visible = true;
    
    @override
    Widget build(BuildContext context) {
    }
}

3.显示切换可见性的按钮

现在我们已经有了一些数据来确定我们的绿色方块是可见的还是不可见的，我们需要一种更新数据的方法。在我们的例子中，如果方块是可见的，我们想要隐藏它。如果该方块被隐藏，我们想要显示它！

为此，我们将显示一个按钮。当用户按下按钮时，我们将布尔值从true翻转为false，或将false翻转为true。我们需要使用setState进行此更改，这是State类的一个方法。这将让Flutter知道它需要重建Widget。

注意：有关使用用户输入的更多信息，请参阅Cookbook的“手势”部分。

FloatingActionButton(
    onPressed: (){
        setState((){
            _visible = !_visible;
        });
    },
    tooltip: 'Toggle Opacity',
    child: Icon(Icons.flip),
);

4.将方块淡入淡出

我们屏幕上有一个绿色的方块。我们有一个按钮可以将可见性切换为true或false。那么我们如何淡入和淡出方块呢？使用AnimatedOpacity小部件！

AnimatedOpacity Widget 需要三个参数：
* opacity：透明度，从0.0（不可见）到1.0（完全可见）的值。
* duration，持续时间，动画需要多长时间才能完成。
* child，动画小部件。在我们的例子中，绿色方块。

AnimatedOpacity(
    opacity: _visible ? 1.0 : 0.0,
    duration: Duration(milliseconds: 500),
    child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.green,
    ),
);

完整例子

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        final appTitle = 'Opacity Demo';
        return MaterialApp(
            title: appTitle,
            home: MyHomePage(
                title: appTitle
            ),
        );
    }
}

class MyHomePage extends StatefulWidget {
    final String title;
    
    MyHomePage({Key key, this.title}) : super(key: key);
    
    @override
    _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    bool _visible = true;
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text(widget.title),
            ),
            body: Center(
                child: AnimatedOpacity(
                    opacity: _visible ? 1.0 : 0.0,
                    duration: Duration(milliseconds: 500),
                    child: Container(
                        width: 200.0,
                        height: 200.0,
                        color: Colors.green,
                    ),
                ),
            ),
            floatingActionButton: FloatingActionButton(
                onPressed: () {
                    setState((){
                        _visible = !_visible;
                    });
                },
                tooltip: 'Toggle Opacity',
                child: Icon(Icons.flip),
            ),
        );
    }
}