重新绘制图像时出现白色闪烁[颤动]

Question

我正在尝试构建一个具有给定宽度和高度的图像网格，将它们包裹在里面Containers，并fit: BoxFit.fill在选择图像时使用能够设置边框（我不关心保持图像长宽比，我想每个容器的总宽度和高度相同）。

问题是，当图像被点击后重新绘制时，我注意到出现白色闪烁。当图像较少时，这似乎不会发生，但当图像超过 15 个时，就会出现噪声。

我尝试添加gaplessPlayback: true图像小部件，正如我在此处找到的那样，但这并没有解决我的问题。

这是显示我的问题的 gif（我使用了 16 张图像，尺寸为 1920x1080）：

编辑：

我忘记指出这只是一个例子，我在代码中使用了边框，但就我而言，我还想向容器添加填充以使图像变小（就像在 android 照片库中一样），这意味着点击的图像每次都应该重新绘制。

这是我的代码：

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(body: ImageGridView()),
    );
  }
}

class ImageGridView extends StatelessWidget {
  List<File> _fileList = [];
  ImageGridView(){
    _fileList = [
        File('C:/flutter/img/1.jpg'),
        File('C:/flutter/img/3.jpg'),
        File('C:/flutter/img/4.jpg'),
        File('C:/flutter/img/5.jpg'),
        File('C:/flutter/img/6.jpg'),
        File('C:/flutter/img/7.jpg'),
        File('C:/flutter/img/8.jpg'),
        File('C:/flutter/img/9.jpg'),
        File('C:/flutter/img/10.jpg'),
        File('C:/flutter/img/11.jpg'),
        File('C:/flutter/img/12.jpg'),
        File('C:/flutter/img/13.jpg'),
        File('C:/flutter/img/14.jpg'),
        File('C:/flutter/img/15.jpg'),
        File('C:/flutter/img/16.jpg'),
      ];
    }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Wrap(
        children: _fileList.map((file) {
          return WindowsAsset(file);
        }).toList(),
      ),
    );
  }
}

class WindowsAsset extends StatefulWidget {
  final File _file;

  WindowsAsset(this._file);

  @override
  State<StatefulWidget> createState() => WindowsAssetState();
}

class WindowsAssetState extends State<WindowsAsset> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width / 2;
    final height = width * 1080 / 1920;
    return Container(
      width: width,
      height: height,
      child: Container(
        child: Container(
          constraints: BoxConstraints.expand(),
          decoration: !selected
              ? null
              : BoxDecoration(
                  border: Border.all(
                    color: Color.fromRGBO(153, 209, 255, 1),
                    width: 4
                  ),
                ),
          child: Container(
            child: GestureDetector(
              child: Image.file(
                widget._file,
                filterQuality: FilterQuality.medium,
                fit: BoxFit.fill,
                gaplessPlayback: true,
              ),
              onTap: () => setState(() {
                selected = !selected;
              }),
            ),
          ),
        ),
      ),
    );
  }
}

我怎样才能解决它？谢谢你！

Answer 1

将您的图像设置gaplessPlayback为true.

Image.memory(
  thumbData,
  gaplessPlayback: true,
)

Answer 2

这可能是因为 1. ImageCache 约束和 2. 将所有图像嵌套在其中Wrap

ImageCache 具有可在内存中缓存的最大图像数以及最大总字节数。当达到该限制时，旧图像将被驱逐，以便为新图像腾出空间。当尝试显示先前从缓存中逐出的图像时，需要一些时间才能将其再次加载到内存中，因此会出现白色闪烁。您可以按照如何更改或替换 Flutter 中的 ImageCache？更改缓存的限制。

默认图像缓存限制为 1000 个不同的图像，总共 100MiB，考虑到未构建离屏小部件的最佳布局，这通常就足够了。

Wrap可能是您问题的主要原因 - 我相信它在内部构建了所有子级，以便找出如何包装它们。就您而言，这将是所有图像。可能是因为Wrap，您的所有图像都被视为在屏幕上，因此不会从缓存中逐出 - 这可以解释为什么即使您没有重建整个小部件树，GIF 中的某些图像也会闪烁 - 因为这些图像不会被缓存，因为缓存已满并且无法逐出任何图像。

您可能想替换Wrap为 a GridView.builder，这只会构建屏幕上的小部件。

如果图像太大而无法容纳您一次显示的缓存中的图像，您可能会遇到同样的问题。如果在 10x10 容器中显示 50MB 的图像，仍然需要 50MB 的内存缓存。