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