iOS端Flutter使用ListWheelScrollView加载图片时出现资源服务异常

我之前在iOS上做Flutter项目时遇到过几乎一模一样的问题，这个bug的核心原因是App从后台恢复时，ListWheelScrollView的布局状态没有正确重建，导致Image组件获取的布局参数为null，进而触发了toDouble()的空指针异常。下面是几个经过验证的解决方案：

方案1：给Image组件设置明确的宽高约束 #

ListWheelScrollView的itemExtent设置了300，但Image组件如果没有明确的尺寸约束，后台恢复时布局计算可能出现异常。给Image固定宽高可以直接避免这个问题：

// 修改ScrollScreen中Image的代码
Image(
  image: e,
  width: 300, // 和itemExtent保持一致
  height: 300,
  fit: BoxFit.cover, // 根据你的需求调整适配方式，可选
)

方案2：监听App生命周期，后台恢复时强制刷新状态 #

通过WidgetsBindingObserver监听App的生命周期，当App从后台恢复到前台时，强制刷新ScrollScreen的状态，重建ListWheelScrollView：

class _ScrollScreenState extends State<ScrollScreen> with WidgetsBindingObserver {
  var _exImage = AssetImage('assets/images/no_image.png');

  @override
  void initState() {
    super.initState();
    // 添加生命周期监听
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // 移除监听，避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 当App恢复到前台时，强制刷新状态
    if (state == AppLifecycleState.resumed) {
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    // 原build代码保持不变
    List<AssetImage> _images = [
      _exImage,
      _exImage,
      _exImage,
    ];
    return Center(
        child: ListWheelScrollView.useDelegate(
            itemExtent: 300,
            childDelegate: ListWheelChildLoopingListDelegate(
                children: _images
                    .map((e) => Center(
                          child: Image(
                            image: e,
                            width: 300,
                            height: 300,
                          )))
                    .toList())));
  }
}

方案3：替换ListWheelChildLoopingListDelegate为手动循环列表 #

有时候ListWheelChildLoopingListDelegate在状态恢复时会出现状态异常，我们可以手动生成重复的列表项来模拟循环效果，使用普通的ListWheelChildListDelegate：

class _ScrollScreenState extends State<ScrollScreen> {
  var _exImage = AssetImage('assets/images/no_image.png');

  // 手动生成循环列表项，重复3次原列表实现无限滚动视觉效果
  List<Widget> _buildLoopItems() {
    final baseImages = [_exImage, _exImage, _exImage];
    return List.generate(baseImages.length * 3, (index) {
      final imageIndex = index % baseImages.length;
      return Center(
        child: Image(
          image: baseImages[imageIndex],
          width: 300,
          height: 300,
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: ListWheelScrollView.useDelegate(
            itemExtent: 300,
            childDelegate: ListWheelChildListDelegate(
                children: _buildLoopItems())));
  }
}

为什么这些方案有效？ #

iOS系统在App进入后台时会主动释放非活跃页面的部分布局资源，当恢复前台时，PageView中之前处于非活跃状态的页面（包含ListWheelScrollView）在重建时，ListWheelScrollView的item布局计算可能存在延迟，导致Image组件无法获取到有效的布局上下文，进而触发空指针异常。上述方案要么通过明确尺寸避免布局计算依赖，要么通过强制刷新重建组件状态，从而绕过这个框架层面的bug。

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