Flutter拖拽重排ListTile时leading图片消失的问题求解

针对你遇到的拖拽时图片消失、长按闪烁、操作卡顿的问题，核心原因大多是图片重复解码/加载、Widget身份不稳定导致重建这两点，以下是具体解决办法：

1. 提前解码图片，避免重复计算 #

你当前每次构建ListTile时都会调用base64Decode(_pngBase64)，这会重复解码base64字符串，不仅浪费性能，还会导致拖拽时Widget重建重新加载图片，引发消失/闪烁。

修改方式：在State初始化时提前解码并缓存图片字节：

class _ReorderableExampleState extends State<ReorderableExample> {
  final List<int> _items = List<int>.generate(50, (int index) => index);
  late Uint8List _imageBytes; // 缓存图片字节

  @override
  void initState() {
    super.initState();
    _imageBytes = base64Decode(_pngBase64); // 仅解码一次
  }

  @override
  Widget build(BuildContext context) {
    // ... 其他代码不变
    return ReorderableListView.builder(
      // ...
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          // ...
          leading: Image.memory(_imageBytes), // 使用缓存的字节
          // ...
        );
      },
    );
  }
}

2. 使用基于Item内容的Key，稳定Widget身份 #

你当前用Key('$index')作为ListTile的key，拖拽时item的index会变化，导致Flutter认为这是新的Widget，会销毁原Widget并重建，图片因此重新加载。而内置Icon因为是轻量组件且内部有缓存，所以无此问题。

修改方式：改用item的唯一标识作为key（比如你的_items元素是唯一的）：

return ListTile(
  key: Key('item-${_items[index]}'), // 用item值而非index做key
  // ... 其他代码不变
);

3. 预缓存图片，确保拖拽时已加载完成 #

提前将图片缓存到Flutter的图片缓存池，避免拖拽时临时加载：

@override
void initState() {
  super.initState();
  _imageBytes = base64Decode(_pngBase64);
  // 预缓存图片
  WidgetsBinding.instance.addPostFrameCallback((_) {
    precacheImage(MemoryImage(_imageBytes), context);
  });
}

4. 自定义拖拽反馈Widget，避免默认重建问题 #

ReorderableListView默认会复用原item作为拖拽反馈，但如果原item的图片加载未完成，就会出现消失。可以提前定义好反馈Widget，确保图片已就绪：

itemBuilder: (BuildContext context, int index) {
  final item = _items[index];
  final tileColor = item.isOdd ? oddItemColor : evenItemColor;
  
  // 提前创建反馈Widget
  final feedbackTile = ListTile(
    leading: Image.memory(_imageBytes),
    title: Text('Item $item'),
    tileColor: tileColor,
  );

  return ListTile(
    key: Key('item-$item'),
    leading: Image.memory(_imageBytes),
    tileColor: tileColor,
    title: Text('Item $item'),
    reorderableFeedback: feedbackTile, // 指定自定义反馈
  );
},

5. 优化图片渲染尺寸，降低性能压力 #

如果图片本身尺寸过大，即使缓存了，渲染时也会占用过多资源导致卡顿。可以指定图片的固定宽高，减少绘制像素：

leading: Image.memory(
  _imageBytes,
  width: 48, // 匹配ListTile leading的默认尺寸
  height: 48,
  fit: BoxFit.cover,
),

内容的提问来源于stack exchange，提问作者ubiquibacon