每个应用程序都需要浏览应用程序中的多个页面和组件。在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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!