📅  最后修改于: 2023-12-03 15:15:06.871000             🧑  作者: Mango
在 Flutter 中,AnimatedOpacity
Widgt 是在父 Widget 中 控制子 Widget 透明度动画 的一种简便方法。我们只需在代码中更改透明度或使其为0或1,并使用 AnimatedOpactiy
来处理过渡。
在父 Widget 中添加 AnimatedOpacity
,并对其参数进行设置,如下面的例子:
AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
)
上面的示例代码中,将 AnimatedOpacity
的 opacity
参数设置为 _visible
变量(布尔类型)的值。如果 _visible
为 true
,则透明度为 1.0
,如果 _visbile
为 false
,则透明度为 0.0
。AnimatedOpacity
的 duration
参数设置过渡时间。
请注意,AnimatedOpacity
需要有一个 child
参数,这是您要应用透明度动画的子 Widget。
下面是一个模拟点击按钮使子 Widget 淡出的示例代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _visible = true;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('AnimatedOpacity Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
),
SizedBox(height: 20),
RaisedButton(
child: Text('Toggle Opacity'),
onPressed: () {
setState(() {
_visible = !_visible;
});
},
),
],
),
),
),
);
}
}
AnimatedOpacity
必须有一个 child
参数。AnimatedOpacity
的 duration
参数是可选的,如果省略,则过渡将是瞬间的。opacity
参数设置为 0.0
不会隐藏子 Widget,而是使其变得透明。如果要隐藏子 Widget,则可以使用 Visibility
Widgt 视图: Visiblity(visible: false, child: Container(...),)
。