能让子组件进行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 />
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;
        });
      });
}
 
                         
                                

