来自Flutter组件库

动画版的Positioned组件，当给定位置发生变化时，它会自动在给定的时间内将子元素从当前位置过渡到给定位置。

主要属性

• duration：动画持续时长

• curve：动画曲线

• onEnd：动画结束回调

• 其他属性同Positioned

示例

下面是一个使用这个小部件的示例，以Curves.fastOutSlowIn曲线为例。

import 'package:flutter/material.dart';

/// Flutter code sample for [AnimatedPositioned].

void main() => runApp(const AnimatedPositionedExampleApp());

class AnimatedPositionedExampleApp extends StatelessWidget {
  const AnimatedPositionedExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('AnimatedPositioned Sample')),
        body: const Center(
          child: AnimatedPositionedExample(),
        ),
      ),
    );
  }
}

class AnimatedPositionedExample extends StatefulWidget {
  const AnimatedPositionedExample({super.key});

  @override
  State<AnimatedPositionedExample> createState() =>
      _AnimatedPositionedExampleState();
}

class _AnimatedPositionedExampleState extends State<AnimatedPositionedExample> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 350,
      child: Stack(
        children: <Widget>[
          AnimatedPositioned(
            width: selected ? 200.0 : 50.0,
            height: selected ? 50.0 : 200.0,
            top: selected ? 50.0 : 150.0,
            duration: const Duration(seconds: 2),
            curve: Curves.fastOutSlowIn,
            child: GestureDetector(
              onTap: () {
                setState(() {
                  selected = !selected;
                });
              },
              child: const ColoredBox(
                color: Colors.blue,
                child: Center(child: Text('Tap me')),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

注意事项

• 只有当它是一个 Stack 的 child 时才起作用。

• 如果动画结束后，子元素的大小会发生变化，那么这个小部件是一个不错的选择。如果大小在动画过程中保持不变，仅位置发生变化，那么可以考虑使用SlideTransition。SlideTransition仅在动画的每一帧触发重绘，而AnimatedPositioned则会触发布局重新分配。

• 对于动画，您可以选择一条曲线以及持续时间，该小部件将自动动画到新的目标位置。如果您需要对动画进行更精确的控制（例如，如果您想在动画过程中停止它），请考虑使用 PositionedTransition 替代，它会将提供的动画作为参数。虽然这允许您更精确地控制动画，但它也需要更多的开发开销，因为您需要手动管理底层 AnimationController 的生命周期。