Flutter如何在PageView.builder显示时调用函数？含初始页处理

首先把重复的保存逻辑抽成独立函数，避免代码冗余：

Future<void> _saveImageToPrefs(String imgUrl) async {
  var prefs = await SharedPreferences.getInstance();
  await prefs.setString('img', imgUrl);
  print(imgUrl);
  getimg = imgUrl;
}

然后分两步处理初始页和页面切换的情况：

1. 处理初始加载的第一页 #

你的代码依赖snapshot.data，说明是在异步数据加载组件（比如FutureBuilder）内部，可在数据加载完成后，手动调用一次初始页的保存逻辑：

// 假设这部分在FutureBuilder的builder回调里
if (snapshot.hasData) {
  // 初始页面默认是0，若controller设置了initialPage则用controller.initialPage取值
  final initialImgUrl = '$api/wallpapers/${snapshot.data[0]['wallpaper']}';
  // 用WidgetsBinding确保页面渲染完成后调用，避免重复执行
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _saveImageToPrefs(initialImgUrl);
  });

  return PageView.builder(
    itemCount: snapshot.data.length ?? 3,
    controller: controller,
    onPageChanged: (value) async {
      final imgUrl = '$api/wallpapers/${snapshot.data[value]['wallpaper']}';
      await _saveImageToPrefs(imgUrl);
    },
    itemBuilder: (context, index) {
      final imgUrl = '$api/wallpapers/${snapshot.data[index]['wallpaper']}';
      return Container(
        decoration: BoxDecoration(
          color: Colors.grey,
          image: DecorationImage(
            fit: BoxFit.fitWidth,
            image: NetworkImage(imgUrl),
          ),
        ),
      );
    },
  );
}

2. 优化原代码的隐患 #

原代码在itemBuilder中直接给全局变量img赋值不安全，因为PageView会预加载前后页面，itemBuilder的执行顺序和当前显示页面不一定对应，直接用onPageChanged的value取对应数据才可靠。

这类问题属于高频问题，核心原因是PageView的onPageChanged仅响应页面切换动作，初始渲染第一页属于组件初始化流程，不属于"切换"动作，因此不会触发。

社区常见的解决思路有三种：

• 抽离逻辑函数+手动初始化调用：这是最通用的方案，把业务逻辑单独封装，既在onPageChanged中调用，也在数据加载完成后针对初始页调用，逻辑清晰不易出错。
• 监听PageController的page属性：通过controller.addListener()监听页面变化，能捕获初始页面状态，但需要处理page值为浮点数的情况（滚动过程中值会平滑变化），需判断稳定到整数页后再执行逻辑。
• 在itemBuilder中判断当前显示页：这种方式不可靠，因为itemBuilder会预加载页面，可能在页面未显示时就执行逻辑，且结合PageController的page值判断容易出现误差。

其中抽离逻辑+手动初始化调用是社区最推荐的方案。

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