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

相关组件

PositionedTransition Positioned AnimatedPositionedDirectional

AnimatedPositioned基本使用

  1. <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 />![146.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589458049725-a3fe9dbc-a5f5-460e-8e34-5b5d71af0f5d.gif#align=left&display=inline&height=314&margin=%5Bobject%20Object%5D&name=146.gif&originHeight=314&originWidth=502&size=481914&status=done&style=none&width=502)
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;
        });
      });
}