淡入淡出部件

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

在Flutter中，我们可以使用AnimatedOpacity部件来完成这项任务。

路线

• 显示一个盒子以淡入淡出
• 定义一个StatefulWidget
• 显示切换可视性的按钮
• 淡入淡出盒子

1.显示一个盒子以淡入淡出

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

new 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插件包含快速生成此代码的稳定片段！

// The StatefulWidget's job is to take in some data and create a State class. // In this case, our Widget takes in a title, and creates a _MyHomePageState. class MyHomePage extends StatefulWidget {   final String title;    MyHomePage({Key key, this.title}) : super(key: key);    @override   _MyHomePageState createState() => new _MyHomePageState(); }  // The State class is responsible for two things: holding some data we can  // update and building the UI using that data. class _MyHomePageState extends State<MyHomePage> {   // Whether the green box should be visible or invisible   bool _visible = true;    @override   Widget build(BuildContext context) {     // The green box will go here with some other Widgets!   } }

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

现在我们有一些数据来确定我们的绿色框是否应该是可见或不可见的，我们需要一种方式来更新这些数据。 在我们的情况下，如果该框可见，我们想隐藏它。 如果该框隐藏，我们想要显示它！

为了达到这个目的，我们会显示一个按钮。 当用户按下按钮时，我们会将布尔值从true更改为false，或将false更改为true。 我们需要使用setState进行更改，这是State类中的一个方法。 这将让Flutter知道它需要重建部件。

注意：有关处理用户输入的更多信息，请参阅食谱手册的处理手势部分。

new FloatingActionButton(   onPressed: () {     // Make sure we call setState! This will tell Flutter to rebuild the     // UI with our changes!     setState(() {       _visible = !_visible;     });   },   tooltip: 'Toggle Opacity',   child: new Icon(Icons.flip), );

4.淡入淡出盒子

我们在屏幕上有一个绿色的盒子。 我们有一个按钮来将可见性切换为true或false。 那么我们如何淡入淡出盒子？ 随着AnimatedOpacity部件！

AnimatedOpacity部件需要三个参数：

• opacity: 从0.0（不可见）到1.0（完全可见）的值。
• duration: 动画完成需要多长时间
• child: 动画作用的部件。 在我们的案例中，绿色框。

new AnimatedOpacity(   // If the Widget should be visible, animate to 1.0 (fully visible). If   // the Widget should be hidden, animate to 0.0 (invisible).   opacity: _visible ? 1.0 : 0.0,   duration: new Duration(milliseconds: 500),   // The green box needs to be the child of the AnimatedOpacity   child: new Container(     width: 200.0,     height: 200.0,     color: Colors.green,   ), );

完整例子

import 'package:flutter/material.dart';  void main() => runApp(new MyApp());  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     final appTitle = 'Opacity Demo';     return new MaterialApp(       title: appTitle,       home: new MyHomePage(title: appTitle),     );   } }  // The StatefulWidget's job is to take in some data and create a State class. // In this case, our Widget takes in a title, and creates a _MyHomePageState. class MyHomePage extends StatefulWidget {   final String title;    MyHomePage({Key key, this.title}) : super(key: key);    @override   _MyHomePageState createState() => new _MyHomePageState(); }  // The State class is responsible for two things: holding some data we can // update and building the UI using that data. class _MyHomePageState extends State<MyHomePage> {   // Whether the green box should be visible or invisible   bool _visible = true;    @override   Widget build(BuildContext context) {     return new Scaffold(       appBar: new AppBar(         title: new Text(widget.title),       ),       body: new Center(         child: new AnimatedOpacity(           // If the Widget should be visible, animate to 1.0 (fully visible). If           // the Widget should be hidden, animate to 0.0 (invisible).           opacity: _visible ? 1.0 : 0.0,           duration: new Duration(milliseconds: 500),           // The green box needs to be the child of the AnimatedOpacity           child: new Container(             width: 200.0,             height: 200.0,             color: Colors.green,           ),         ),       ),       floatingActionButton: new FloatingActionButton(         onPressed: () {           // Make sure we call setState! This will tell Flutter to rebuild the           // UI with our changes!           setState(() {             _visible = !_visible;           });         },         tooltip: 'Toggle Opacity',         child: new Icon(Icons.flip),       ), // This trailing comma makes auto-formatting nicer for build methods.     );   } }