如何在抖动中实现图像适合模式更改动画

Question

这是我设置全屏图像的方式

Image.network(
    "https://cdn.pixabay.com/photo/2017/02/21/21/13/unicorn-2087450_1280.png",
    fit: BoxFit.contain,
    height: double.infinity,
    width: double.infinity,
  )

我想实现调整大小的动画以在图像合适的BoxFit.contain或BoxFit.cover之间切换（就像很多视频应用一样）

我对动画的行为还很陌生，谁能帮忙，谢谢。

Answer 1

如果只想切换拟合值，则需要创建一个StatefulWidget并将拟合值保留为成员变量，然后调用setState（）并在其中更改值。不会有动画，但是您可以使用动画容器来解决。因此，步骤将是：

切换拟合值

1. 将视图小部件变成StatefulWidget

2. 将BoxFit值存储为memberVariable。 BoxFit _imageFit

3. 在setState调用中更改_imageFit。

   setState(() {_imageFit = BoxFit.fitHeight;});
   

动画图像大小

1. 将图像包装在AnimatedContainer（）小部件中，并使用局部成员变量设置其尺寸

   double _animatedContainerHeight = yourStartingValue;
   double _animatedContainerWidth = yourStartingValue;
   ...
   AnimatedContainer(height: _animatedContainerHeight, 
   width: _animatedContainerWidth, child: YourImage);
   

2. 为AnimatedContainer提供持续时间和插值，然后在上述setState函数中更改其大小。

   setState((){
    ...
     _animatedContainerWidth = newValue;
     // same for height
   });