Flutter Widget组件库:AnimatedAlign
39
2024-07-06
描述
动画版的Align
,可在给定的持续时间内自动将子元素的位置调整到给定的对齐方式。
它基于 Align 小部件,并提供 duration
和 curve
参数来控制动画的时间长度和速度曲线。
AnimatedAlign
的核心运作方式与 Align 小部件相同,也是通过 alignment
参数进行对齐,但是当 alignment
的值发生改变时,子组件的位置并不会立即改变,而是会经过一个动画过程,从原位置过渡到新位置。
构造函数
const AnimatedAlign({
Key? key,
required this.alignment,
this.child,
this.heightFactor,
this.widthFactor,
Curve curve = Curves.linear, // 动画的速率曲线
required Duration duration, // 必传,动画的持续时间
VoidCallback? onEnd, // 动画结束时的回调
}) : assert(alignment != null),
assert(widthFactor == null || widthFactor >= 0.0),
assert(heightFactor == null || heightFactor >= 0.0),
super(key: key, curve: curve, duration: duration, onEnd: onEnd);
示例
class AnimatedAlignExample extends StatefulWidget {
const AnimatedAlignExample({super.key});
@override
State<AnimatedAlignExample> createState() => _AnimatedAlignExampleState();
}
class _AnimatedAlignExampleState extends State<AnimatedAlignExample> {
bool selected = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
},
child: Center(
child: Container(
width: 250.0,
height: 250.0,
color: Colors.red,
child: AnimatedAlign(
alignment: selected ? Alignment.topRight : Alignment.bottomLeft,
duration: const Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
child: const FlutterLogo(size: 50.0),
),
),
),
);
}
}
- 0
- 0
-
赞助
微信支付宝 -
分享