Flutter PageView索引变化时如何仅更新指定子组件

子组件无法同步更新、无法正确展示位置的核心原因有3个：

• 父组件在onPageChanged触发时，如果直接调用setState会重建整个父组件下的所有子树，不符合你不刷新全父组件的性能要求；如果不更新状态，新的索引值又无法传递到子组件
• 你当前实现的Number组件中，所有指示器圆点样式完全一致，没有做选中/未选中的状态区分，就算拿到正确索引也无法标识当前浏览位置
• 直接传int类型index参数的方式，依赖父组件重建才能传递新值，无法做到仅刷新指示器区域

用ValueNotifier做局部状态推送，只有指示器组件会在索引变化时重建，性能开销最低，不需要引入第三方依赖。

1. 首先在父组件中声明索引监听对象，如果父组件是StatefulWidget记得在dispose生命周期释放资源：

// 父组件State中声明
final ValueNotifier<int> currentIndexNotifier = ValueNotifier(0);

@override
void dispose() {
  currentIndexNotifier.dispose();
  super.dispose();
}

2. 修改PageView.builder的页码变化回调，仅更新notifier存储的值，这一步不会触发父组件重建：

child: PageView.builder(
  scrollDirection: Axis.horizontal,
  onPageChanged: (currentIndex) {
    currentIndexNotifier.value = currentIndex;
  },
  itemCount: images.length,
  // 其余原有配置保持不变
)

3. 重写Number组件，用ValueListenableBuilder仅监听索引变化刷新自身，同时补全指示器的选中态样式：

class Number extends StatelessWidget {
  final List<File> images;
  final ValueNotifier<int> indexNotifier;

  const Number({required this.images, required this.indexNotifier, Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 5.h,
      width: double.infinity,
      alignment: Alignment.center,
      child: ValueListenableBuilder<int>(
        valueListenable: indexNotifier,
        builder: (context, activeIndex, _) {
          return Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: List.generate(images.length, (i) {
              final isActive = i == activeIndex;
              return Container(
                margin: EdgeInsets.symmetric(horizontal: 2.w),
                height: 3.h,
                width: isActive ? 8.w : 3.h,
                decoration: BoxDecoration(
                  color: isActive ? Colors.black : Colors.grey.shade400,
                  borderRadius: BorderRadius.circular(3.h),
                ),
              );
            }),
          );
        },
      ),
    );
  }
}

4. 父组件中使用Number组件时传入提前声明的notifier即可：

Number(images: images, indexNotifier: currentIndexNotifier)

如果你不想用ValueNotifier，也可以用Provider、Bloc等全局状态管理框架推送索引变化，但对于这个简单场景属于过度设计，ValueNotifier是Flutter官方提供的轻量状态能力，实现成本和性能表现都是最优的。
不要使用「给子组件传index参数+父组件setState」的实现方式，这种方式会触发父组件整个build流程，重建所有子组件，不符合你最初的性能优化诉求。

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