Question

我正在尝试创建一个Sliver列表，该列表的元素首先会旋转90'，但在点击时会旋转回0'，反之亦然。动画本身运行良好，但问题是仅当项目为0'时滚动才起作用。有人可以告诉我如何解决吗？

我尝试将容器包装在列表项周围，并观察到条子仅占0'处的项目，而不占90'处的项目。我什至尝试更改容器本身的高度，但结果却很奇怪。

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {

  Animation<double> animation;
  Animation<double> animationOffset;
  AnimationController controller;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(vsync: this, duration: const Duration(seconds: 2));

    animation = Tween<double>(begin: -Math.pi / 2, end: 0).animate(controller)
    ..addStatusListener((status){
      if (status == AnimationStatus.completed){
        controller.reverse();
      }else if (status == AnimationStatus.dismissed){
        controller.forward();
      }
    });

    animationOffset = Tween<double>(begin: 87, end: 0).animate(controller)
    ..addStatusListener(
        (status){
          print('$status');
          print('value: ${animationOffset.value}');
        }
    );
  }

  @override
  Widget build(BuildContext context) => GestureDetector(
    child: CustomScrollView(
      slivers: <Widget>[
        SliverPadding(
          padding: EdgeInsets.all(0),
          sliver: SliverList(
              delegate: SliverChildListDelegate([
                  Container(color: Colors.green, child: AnimatedBuilder(animation: animationOffset, builder:(context, child) => Transform.translate(offset: Offset(0, 0),child: RotateTransition(child: TextWidget(), animation: animation)))),
              ]),
          ),
        ),
      ],
    ),
    onTap: () {
      if(animation.status == AnimationStatus.completed){
        controller.reverse();
      }
      else if (animation.status == AnimationStatus.dismissed){
        controller.forward();
      } 
    },
  );

  @override
  void dispose() {
    // TODO: implement dispose
    controller.dispose();
    super.dispose();
  }
}

Answer 1

我不确定，但是我尝试使用SliverAnimatedOpacity()来设置不透明度的动画，并且效果很好。希望对别人有帮助

如何为银条列表中的单个项目设置动画

1 个答案: