user-interface - Flutter slideTransition没有动画

问题描述

所以我试图在颤动中创建一个简单的幻灯片过渡元素，但我遇到了一些困难。下面所做的是等待动画时间，然后只显示Text("hello there sailor"). 我不知道为什么这不是动画 - 它似乎与之前的这篇文章非常相似，其中有一个简单的例子（在颤动中将动画滑动到底部）。

这就是我如何调用以下代码：DeleteCheck(offsetBool: widget.model.deleteNotify, widthSlide: 0.50*width100)where double width100 = MediaQuery.of(context).size.width;.

有谁看到我做错了什么？

class DeleteCheck extends StatefulWidget{

  final offsetBool;
  final double widthSlide;

  DeleteCheck({
    Key key, 
    this.offsetBool, 
    this.widthSlide
  }): super(key: key);

  @override 
  State<StatefulWidget> createState() {
    return new _MyDeleteCheck();
  }
}

class _MyDeleteCheck extends State<DeleteCheck> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offsetFloat; 

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

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    _offsetFloat = Tween<Offset>(begin: Offset(widget.widthSlide, 0.0), end: Offset.zero)
        .animate(_controller);

    _offsetFloat.addListener((){
      setState((){});
    });

    _controller.forward();

  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double height100 = MediaQuery.of(context).size.height;
    double width100 = MediaQuery.of(context).size.width;
    return new SlideTransition(
      position: _offsetFloat,
      child: Container(
        color: Colors.cyan,
        width: 0.525*width100-3.0,
        child: Text("hello there sailor")
      )
    );
  }
}

标签： user-interfaceanimationmobileflutterslide

解决方案

我有好消息要告诉你！您的代码正在运行！:) 动画看起来好像没有发生，因为它移动的距离很大。传递给SlideTransition的Offset是相对于其子项大小的。例如，您的孩子有并且您使用偏移，您的孩子将向右移动像素。width: 100.0Offset(2.0, 0.0)200.0

只需尝试更改begin: Offset(widget.widthSlide, 0.0), end: Offset.zero 为begin: Offset(2.0, 0.0), end: Offset.zero. 您会看到文本从屏幕右侧缓慢移动到屏幕中央。因此，您只需要调整参数设置。

无论如何，这里有一些优化代码的额外建议：

如果您使用的是像SlideTransition这样的预构建 AnimatedWidget，则不需要在控制器上调用with 。自己照顾它。因此，您可以删除以下行：addListenersetStateAnimatedWidget

行：

_offsetFloat.addListener((){
  setState((){});
});

也没有必要调用const构造函数。您可以只保留这个关键字，例如new. 编译器将在每种情况下优化并选择正确的构造函数。

user-interface - Flutter slideTransition没有动画

问题描述

解决方案

推荐阅读