Flutter 构建完整应用手册-动画

淡入淡出部件

做为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.
    );
  }
}