能让子组件进行PositionedDirectional(方向定位)动画,可指定时长和曲线,有动画结束事件。只能用于Stack之中。
相关组件
AnimatedPositionedDirectional基本使用
<br />【child】 : 孩子组件 【Widget】<br />【duration】 : 动画时长 【Duration】<br />【onEnd】 : 动画结束回调 【Function()】<br />【curve】 : 动画曲线 【Duration】<br />【top】 : 到父顶距离 【double】<br />【end】 : 到父右距离 【double】<br />【start】 : 到父左距离 【double】<br />【bottom】 : 到父底距离 【double】<br />![147.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589458166440-08e7ce23-4849-4699-9ccd-22ffaf5dc64d.gif#align=left&display=inline&height=314&margin=%5Bobject%20Object%5D&name=147.gif&originHeight=314&originWidth=502&size=507719&status=done&style=none&width=502)
import 'package:flutter/material.dart';
class CustomAnimatedPositionedDirectional extends StatefulWidget {
@override
_CustomAnimatedPositionedDirectionalState createState() =>
_CustomAnimatedPositionedDirectionalState();
}
class _CustomAnimatedPositionedDirectionalState
extends State<CustomAnimatedPositionedDirectional> {
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>[
AnimatedPositionedDirectional(
duration: Duration(seconds: 1),
top: _top,
start: _top * 4,
child: Icon(
Icons.android,
color: Colors.green,
size: 50,
),
),
AnimatedPositionedDirectional(
duration: Duration(seconds: 1),
top: 50 - _top,
start: 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;
});
});
}