flutter如何让AnimatedPositioned自动开始第一次动画,用延时的话会有卡顿,不美观,我希望打开弹窗时,AnimatedPositioned的top属性自动从0编导202
时间: 2024-04-19 15:29:08 浏览: 137
Animator 开场动画 预加载
对于让AnimatedPositioned自动开始第一次动画,可以使用AnimatedPositioned.fromRect方法来实现。这个方法会自动将AnimatedPositioned的位置从一个矩形转变到另一个矩形,从而产生动画效果。
首先,你可以定义一个初始的矩形和最终的矩形,然后将初始矩形传递给AnimatedPositioned.fromRect的begin属性,最终矩形传递给end属性。在打开弹窗时,你可以通过改变矩形的位置来触发动画。
以下是一个示例代码:
```dart
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
Rect initialRect = Rect.fromLTWH(0, 0, 100, 100);
Rect finalRect = Rect.fromLTWH(0, 202, 100, 100);
bool isDialogOpen = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
RaisedButton(
child: Text('打开弹窗'),
onPressed: () {
setState(() {
isDialogOpen = true;
});
},
),
AnimatedPositioned.fromRect(
duration: Duration(seconds: 1),
curve: Curves.easeInOut,
rect: isDialogOpen ? finalRect : initialRect,
child: Container(
color: Colors.blue,
child: Text('弹窗内容'),
),
),
],
);
}
}
```
在这个示例中,点击按钮会改变isDialogOpen的值,从而触发AnimatedPositioned的动画效果。初始状态下,弹窗的位置是初始矩形所定义的位置,点击按钮后,弹窗会平滑地从初始矩形的位置移动到最终矩形的位置。
希望这个示例能够帮助你实现你的需求!如果有任何问题,请随时提问。
阅读全文