AnimatedPositioned是Flutter中的一个小部件,它可以在Stack中动态改变其位置。这个小部件在Stack中的定位类似于Positioned,但是它可以动画化。
以下是一个简单的使用AnimatedPositioned的例子:
Stack(
children: <Widget>[
Container(
color: Colors.blue,
),
AnimatedPositioned(
left: 10.0,
right: 10.0,
bottom: 10.0,
top: 10.0,
duration: Duration(seconds: 2),
child: Container(
color: Colors.red,
),
),
],
)
在这个例子中,我们创建了一个Stack,其中包含一个Container和一个AnimatedPositioned。AnimatedPositioned包含一个Container作为其子元素,并且将其位置动画化。当调用setState并更改left, right, bottom, top属性的值时,AnimatedPositioned会在指定的持续时间内平滑地过渡到新位置。
要动画化位置,你可以使用CurvedAnimation或者AnimationController,并在需要改变位置时,更新这些动画的值。
例如,使用AnimationController:
AnimationController controller;
@override
void initState() {
super.initState();
controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
void moveWidget() {
controller.forward(from: 0.0);
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
color: Colors.blue,
),
AnimatedPositioned(
left: 10.0,
right: 10.0,
bottom: 10.0,
top: 10.0,
duration: Duration(seconds: 2),
child: Container(
color: Colors.red,
),
),
],
);
}
在这个例子中,我们创建了一个AnimationController,并在initState中初始化它。当调用moveWidget函数时,使用controller的forward方法更新AnimatedPositioned的位置。
这只是AnimatedPositioned的基本使用方式。它还有其他属性,如curve,可以用来控制动画的速度和曲线。