Flutter Widget组件库:AnimatedPositioned
41
2024-07-11
动画版的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 的生命周期。
- 1
- 0
-
赞助
微信支付宝 -
分享