Flutter – 淡化小部件

每个应用程序都需要浏览应用程序中的多个页面和组件。在flutter上这样做的方法是利用路由(即页面)。但是当需要从页面中删除一部分(元素)时，使用路由就变得多余了。这就是 Fading 的用武之地。在这种情况下，组件只是从页面上消失了。在本文中，我们将详细探讨相同的内容。

AnimatedOpacity 类的构造函数：

const AnimatedOpacity(
{Key key,
Widget child,
@required double opacity,
Curve curve: Curves.linear,
@required Duration duration,
VoidCallback onEnd,
bool alwaysIncludeSemantics: false}
)

AnimatedOpecity 小部件的属性：

• alwaysIncludeSemantics：该属性通过将布尔值作为对象来控制语义信息是否可见。
• child： child属性接受一个小部件作为对象，以在AnimatedOpacity小部件下方或内部的小部件树中显示它。
• opacity：这个属性接受一个double值作为对象来控制动画时要实现的不透明度。它的范围从 0.0 到 1.0。

Flutter的淡入淡出是通过使用AnimatedOpacity 小部件完成的。请按照以下步骤操作：

• 创建一个容器组件来淡入淡出。
• 定义一个有状态的小部件。
• 添加一个切换可见性的按钮。
• 显示容器组件的淡入淡出。

让我们详细讨论它们。

创建容器：

这是将在按钮切换时淡出的组件。一个简单的容器定义如下：

Dart

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

定义一个 StatefulWidget：

定义一个有状态的组件来保存容器和按钮，并知道框是否应该可见，如下所示：

Dart

class MyHomePage extends StatefulWidget {
  final String title;
 
  MyHomePage({Key key, this.title}) : super(key: key);
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State {
  bool _visible = true;
 
  @override
  Widget build(BuildContext context) {
  }
}

添加切换按钮：

这是按下时使容器不可见的按钮。它可以定义如下：

Dart

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

显示衰落：

现在使用 AnimatedOpacity 小部件使框淡出。它的定义如下：

Dart

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: Duration(milliseconds: 500),
  // The green box must be a child of the AnimatedOpacity widget.
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
);

完整的源代码：

Dart

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'GeeksForGeeks';
    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 {
  bool _visible = true;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.green,
      ),
      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(
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ),
    );
  }
}

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！