Flutter Widget组件库:AnimatedCrossFade
42
2024-07-07
描述
当我们创建交互性强的用户界面时,渐变效果是至关重要的一环。Flutter 提供了一系列内置的动画组件以便我们能更轻松地实现这些效果。其中,AnimatedCrossFade 组件就是一个极好的例子。
AnimatedCrossFade 是一个能在两个孩子(child)组件间交叉渐现的组件。该组件会根据当前状态将一个孩子组件淡出,另一个孩子组件淡入。
主要参数:
firstChild
和secondChild
: 这两个组件是动画的主体,动画效果将在它们之间切换。crossFadeState
: 这是一个元素和动画状态相关的参数,通过CrossFadeState.showFirst
和CrossFadeState.showSecond
来控制展示哪个孩子组件。duration
: 这个参数表示动画时长。excludeFromSemantics:
当此属性为true时,相当于在底级控件上添加一个“ExcludeFocus”控件,以防止其在淡入淡出堆栈的最底层时被获取焦点。
示例
import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: MyAnimatedCrossFade()));
class MyAnimatedCrossFade extends StatefulWidget {
const MyAnimatedCrossFade({super.key});
@override
MyAnimatedCrossFadeState createState() => MyAnimatedCrossFadeState();
}
class MyAnimatedCrossFadeState extends State<MyAnimatedCrossFade> {
CrossFadeState _crossFadeState = CrossFadeState.showFirst;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AnimatedCrossFade示例'),
),
body: AnimatedCrossFade(
alignment: Alignment.center,
firstChild: const ListTile(
leading: Icon(Icons.looks_one),
title: Text('显示第一个组件',
style: TextStyle(fontSize: 26.0),
),
),
secondChild: const ListTile(
leading: Icon(Icons.looks_two),
title: Text('显示第二个组件',
style: TextStyle(fontSize: 26.0, color: Colors.lightBlue),
),
),
crossFadeState: _crossFadeState,
duration: const Duration(seconds: 2),
),
floatingActionButton: FloatingActionButton(
onPressed: _swapFade,
child: const Icon(Icons.refresh),
),
);
}
void _swapFade() {
setState(() {
_crossFadeState == CrossFadeState.showFirst
? _crossFadeState = CrossFadeState.showSecond
: _crossFadeState = CrossFadeState.showFirst;
});
}
}
在这个样例中,动画将在两个孩子组件ListTile
之间切换,其中包含一个图标(Icon
)和文本(Text
)。FloatingActionButton
用于切换CrossFadeState
状态,从而实现动画的切换。
注意事项
需要注意的是这个小部件旨在用于淡入淡出两个具有相同宽度的 widget。如果两个子widget的高度不同,动画会通过将其顶部边缘对齐来剪裁溢出的子widget,这意味着底部将被剪裁。
总结
总的来说,Flutter 中的 AnimatedCrossFade 组件使用户能够流畅地在两种不同的视图状态之间切换。这提供了一个改善用户体验,增强应用动态感的有效方式。只要你合理利用,就可以创造出许多引人入胜的动画效果
- 0
- 0
-
赞助
微信支付宝 -
分享