📜  Flutter – 淡化小部件

📅  最后修改于: 2021-09-23 06:24:30             🧑  作者: Mango

每个应用程序都需要浏览应用程序中的多个页面和组件。在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,
);


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),
);


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


定义一个 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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!