能让子组件进行Positioned(定位)动画,可指定时长和曲线,有动画结束事件。只能用于Stack之中。
相关组件
PositionedTransition Positioned AnimatedPositionedDirectional
AnimatedPositioned基本使用
<br />【child】 : 孩子组件 【Widget】<br />【duration】 : 动画时长 【Duration】<br />【onEnd】 : 动画结束回调 【Function()】<br />【curve】 : 动画曲线 【Duration】<br />【top】 : 到父顶距离 【double】<br />【right】 : 到父右距离 【double】<br />【left】 : 到父左距离 【double】<br />【bottom】 : 到父底距离 【double】<br />
import 'package:flutter/material.dart';
class CustomAnimatedPositioned extends StatefulWidget {
@override
_CustomAnimatedPositionedState createState() =>
_CustomAnimatedPositionedState();
}
class _CustomAnimatedPositionedState extends State<CustomAnimatedPositioned> {
final startTop = 0.0;
final endTop = 30.0;
var _top = 0.0;
@override
void initState() {
_top = startTop;
super.initState();
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_buildSwitch(),
Container(
color: Colors.grey.withAlpha(33),
width: 200,
height: 100,
child: Stack(
children: _buildChildren(),
),
),
],
);
}
List<Widget> _buildChildren() => <Widget>[
AnimatedPositioned(
duration: Duration(seconds: 1),
top: _top,
left: _top * 4,
child: Icon(
Icons.android,
color: Colors.green,
size: 50,
),
),
AnimatedPositioned(
duration: Duration(seconds: 1),
top: 50 - _top,
left: 150 - _top * 4,
child: Icon(
Icons.android,
color: Colors.red,
size: 50,
),
)
];
Widget _buildSwitch() => Switch(
value: _top == endTop,
onChanged: (v) {
setState(() {
_top = v ? endTop : startTop;
});
});
}