Flutter SliverAnimatedOpacity 透明渐变动画效果

最新推荐文章于 2024-05-21 21:49:43 发布

早起的年轻人

最新推荐文章于 2024-05-21 21:49:43 发布

阅读量1k

点赞数 1

分类专栏： Flutter项目开发全套教程文章标签： dart android flutter

本文链接：https://blog.csdn.net/zl18603543572/article/details/119305613

版权

Flutter项目开发全套教程专栏收录该内容

265 篇文章 387 订阅

订阅专栏

志在巅峰的攀登者，不会陶醉在沿途的某个脚印之中，在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

SliverAnimatedOpacity 是一个轻量级的实现渐变动画效果的组件，是在 CustomScrollView 中使用的组件
本文章实现的效果是
在这里插入图片描述

  const SliverAnimatedOpacity({
    Key? key,
    this.sliver,
    required this.opacity,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
    this.alwaysIncludeSemantics = false,
  })

sliver 子Widget ,要求 Sliver家族的组件
opacity 透明度，从 0.0 ~ 1.0 ,变化时，子 Widget 动态效果
curver 动画曲线
duration 动画的时间
onEnd 动画执行完成回调的方法

使用 Demo 如下

class DemoAnimatedOpacity extends StatefulWidget {
  @override
  _DemoAnimatedOpacityState createState() => _DemoAnimatedOpacityState();
}

class _DemoAnimatedOpacityState extends State<DemoAnimatedOpacity> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("这里是首页")),
      body: CustomScrollView(
        slivers: [
          SliverAnimatedOpacity(
            //动画执行完毕
            onEnd: () {},
            //动画曲线
            curve: Curves.fastOutSlowIn,
            //透明度
            opacity: 1.0,
            //动画时间
            duration: Duration(seconds: 2),
            //子 Widet
            sliver: SliverFixedExtentList(
                delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  return Container(
                    color: index % 2 == 0
                        ? Colors.deepOrange[200]
                        : Colors.deepOrange[400],
                    child: Text("早起的年轻人"),
                  );
                }),
                itemExtent: 100.0),
          )
        ],
      ),
    );
  }
}