能让子组件进行PositionedDirectional(方向定位)动画,可指定时长和曲线,有动画结束事件。只能用于Stack之中。

相关组件

AnimatedPositioned PositionedDirectional

AnimatedPositionedDirectional基本使用

  1. <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;
        });
      });
}