Flutter:TweenAnimationBuilder自定义隐式动画

1、修改组件的大小触发:自定义动画

js 复制代码
class _MyHomePageState extends State<MyHomePage>{
  bool flag = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('标题'),
      ),
      body: Column(
        children: [
          Container(
            child: TweenAnimationBuilder(
                // 当改变Tween的end参数时,Icon就会触发动画,size接收double类型begin和end要加.0
                tween: Tween(begin: 60.0,end: flag ? 100.0 : 200.0),
                duration: const Duration(milliseconds: 500),
                builder: ((context,value,child){
                  // 当更改flag时,会把end的值,赋值给value,Icon就会执行这个动画
                  // size接收double类型,但是value是Object类型,需要用 as double 转换一下
                  return Icon(Icons.star,size: value as double);
                })
            ),
          ),
          ElevatedButton(onPressed: (){
            setState(() {
              flag = !flag;
            });
          }, child: const Text('修改Icon大小')),
        ],
      ),
    );
  }
}

2、组件透明度变化触发:自定义动画

js 复制代码
body: Column(
 children: [
   Container(
     child: TweenAnimationBuilder(
       // 当改变Tween的end参数时,就会触发动画
       tween: Tween(begin: 1.0,end: flag ? 1.0 : 0.0),
       duration: const Duration(milliseconds: 500),
       builder: ((context,value,child){
         return Opacity(
           opacity: value as double,
           child: Container(
             width: 200,
             height: 200,
             color: Colors.red,
           ),
         );
       }),
     ),
   ),
   ElevatedButton(onPressed: (){
     setState(() {
       flag = !flag;
     });
   }, child: const Text('修改Opacity')),
 ],
),
相关推荐
风华圆舞3 小时前
鸿蒙 + Flutter 下 AI 页面的状态协同设计
人工智能·flutter·harmonyos
风华圆舞5 小时前
鸿蒙语音播报功能 的 Flutter 侧封装思路
flutter·华为·harmonyos
brycegao3215 小时前
Flutter 国际化富文本解决方案:基于双层占位符的轻量化图文混排方案
flutter·国际化·i18n·富文本·rtl·移动端工程架构
风华圆舞5 小时前
鸿蒙 + Flutter 下美食探索场景为什么 AI 推荐比传统搜索更自然
flutter·harmonyos·美食
MemoriKu5 小时前
Flutter 相册 APP 收尾优化实战:未分析任务横幅持久隐藏与标签回归测试补强
大数据·人工智能·flutter·elasticsearch·机器学习·搜索引擎·重构
风华圆舞7 小时前
鸿蒙 + Flutter 如何把 AI 助手嵌进应用页面里——以食界探味为
人工智能·flutter·harmonyos
风华圆舞7 小时前
鸿蒙 + Flutter 下如何管理 AI 会话——AgentService 设计解析
人工智能·flutter·harmonyos
spmcor1 天前
Flutter 学习笔记 (3):布局初探 —— Row、Column、Stack 与 Container
flutter
风华圆舞1 天前
DevEco Studio 和 Flutter 工具链如何协同工作
flutter·华为·架构·harmonyos
朱莉^_^JuneLee1 天前
Flutter 性能优化实战:用 ConsumerWidget + select 做到真正的局部刷新
flutter