User interface 颤振滑块转换未设置动画

所以我试图在颤振中创建一个简单的滑动过渡元素，我遇到了一些困难。下面所做的是等待动画时间，然后只显示

文本（“hello there Sealer”）

。我不知道为什么这不是动画-它似乎非常类似于前一篇文章，其中有一个简单的例子（）

下面的代码就是这样调用的：

DeleteCheck（offsetBool:widget.model.deleteNotify，widthSlide:0.50*width100）

其中

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")
      )
    );
  }
}

class DeleteCheck扩展StatefulWidget{
最终抵销；
最后的双宽度幻灯片；
删除检查({
关键点，
这是offsetBool，
这张幻灯片
})：super（key:key）；
@凌驾
状态createState（）{
返回新的_MyDeleteCheck（）；
}
}
类_MyDeleteCheck使用TickerProviderStateMixin扩展状态{
动画控制器_控制器；
动画(offsetFloat),；
@凌驾
void initState（）{
super.initState（）；
_控制器=动画控制器(
vsync:这个,，
持续时间：常数持续时间（秒数：1），
);
_offsetFloat=Tween（开始：Offset（widget.widthSlide，0.0），结束：Offset.zero）
.设置动画（_控制器）；
_offsetFloat.addListener（（）{
setState（（）{}）；
});
_controller.forward（）；
}
@凌驾
无效处置（）{
_controller.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
double height100=MediaQuery.of（context）.size.height；
double width100=MediaQuery.of（context）.size.width；
返回新的幻灯片转换(
位置：_offsetFloat，
子：容器(
颜色：Colors.cyan，
宽度：0.525*100-3.0，
孩子：文本（“你好，水手”）
)
);
}
}
我有好消息要告诉你！您的代码正在工作！：）动画看起来好像没有发生，因为它移动的距离很大。传递给的相对于其子对象的大小。例如，您的孩子有
width:100.0
并且您使用
offset（2.0，0.0）
进行偏移，您的孩子将向右移动
200.0
像素

试着
更改
begin:Offset（widget.widthSlide，0.0），end:Offset.zero
到
开始：偏移量（2.0，0.0），结束：偏移量.0
。您将看到文本从屏幕的右侧到中心缓慢地设置动画。因此，您只需要调整您的参数化


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


如果您使用的是类似的预构建，则不需要在控制器上使用
setState
调用
addListener
。
AnimatedWidget
自行处理。因此，您可以删除以下行：

线路：

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


另外，不需要调用
const
构造函数。您可以像
new
一样将这个关键字省略掉。编译器将在每种情况下优化并选择正确的构造函数
您是否尝试在监听器内部打印
\u offsetFloat
？偏移量是多少？我在这边。看起来无法使用非零值初始化
\u offsetFloat
。当我准备好IDE时，我会调试它。我还想指出，动画可能是一张巨大的幻灯片，因为
偏移量
与
SlideTransition
的子部件的大小有关。因此，（1,1）的
偏移量等于整个小部件长度和宽度的绝对偏移量。“Offset”类是多么奇怪的API啊。远不如基于约束的布局优雅。它假设您总是知道要偏移的任何小部件的高度/宽度。这不仅在像Flutter这样的声明性框架中很少是正确的，而且，即使您确实知道，它也是不精确的。尝试使用SlideTransition中的偏移量将小部件放置在屏幕外。约束方法将明确定义关系。Offset是一个粗糙的工具，几乎不起作用。我希望大家都明白为什么简单地将其更改为Offset（2.0,0.0）是一个糟糕的解决方案。在任意大小的屏幕上，这将如何表现？假设你正在iPad Pro上运行你的应用程序，或者你正在编译桌面应用程序，而它正在34英寸的显示器上运行。偏移量现在需要远远大于偏移量（2.0,0.0）…这在应用程序加载时不可用…你也不知道高度（或宽度）在所有子部件中。颤振中的一些组件往往会自动调整大小…那么，即使你可以在应用程序加载时获得MediaQuery（这需要akward的未来），你如何知道你需要的确切偏移量呢…然后您仍然需要知道小部件的确切高度/宽度，以便正确计算正确的偏移量。这是一种非常糟糕的方法。约束将是一种更加明确和直观的方法。这不是对您的解决方案的批评。