Question

我正在尝试使用FadeInImage显示整个屏幕背景图像，并使用onFocusChange对其进行更改。.

当前只有初始图像使用淡入淡出，然后才被替换。

寻求帮助：

如何使用FadeInImage以便onFocusChange结果使后面的图像逐渐淡入。

也许会用到另一个小部件。

代码： https://gist.github.com/andraskende/4dac77fed94b9e4f131c9f644e51bc62#file-videos-dart-L80-L88

return Scaffold(
  body: Container(
    child: Stack(
      children: [
        FadeInImage.memoryNetwork(
          placeholder: kTransparentImage,
          image: background,
          fit: BoxFit.fill,
          width: double.infinity,
          height: double.infinity,
          fadeInDuration: Duration(milliseconds: 100),
        ),

.....

child: ListView.builder(
  itemCount: providerApp.videos.length,
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  itemBuilder: (BuildContext context, int index) {
    return Focus(
      canRequestFocus: false,
      onFocusChange: (bool) {
        if (bool) {
          setState(() {
            background = providerApp.videos[index].image;
            description =
                providerApp.videos[index].description;
          });
        }
      },

Answer 1

尝试像这样使用 UniqueKey ：

FadeInImage.memoryNetwork(
          key: UniqueKey(),
          placeholder: kTransparentImage, 
          image: background,
          fit: BoxFit.fill,
          width: double.infinity,
          height: double.infinity,
          fadeInDuration: Duration(milliseconds: 100),
        ),

在这种情况下，调用 setState 方法时，将重建 FadeInImage ，并且不会丢失动画

FadeInImage onFocusChange重新生成

1 个答案: