Flutter MVVM下StreamBuilder结合PageView滑动预览异常问题

两个核心错误导致页面重复、滑动卡顿：

• PageView.builder构建逻辑错误：itemBuilder回调提供了index参数标记当前要构建的页面序号，但你所有页面都传入了当前选中页的sliderViewObject.sliderObject，没有按index取对应页数据，导致预渲染的前后页都显示当前页内容，滑动过渡时就会出现重复。
• ViewModel索引计算bug：goNext()和goPrevious()方法错误使用后缀自增/自减运算符，索引判断逻辑完全失效，会触发不必要的全局重建，造成卡顿。
• Stream传递的数据结构不合理：只向流中发送当前选中的单页数据，PageView懒加载前后页时拿不到对应页的内容，只能重复使用当前页数据。

1. 修改数据结构，传递完整页面列表 #

调整SliderViewObject，新增完整的引导页列表字段，不要只传递当前选中的单页数据：

class SliderViewObject {
  final List<SliderObject> sliderList;
  final int numOfSlides;
  final int currentSlideIndex;
  SliderViewObject(this.sliderList, this.numOfSlides, this.currentSlideIndex);
}

修改ViewModel的数据发送方法，传入完整列表：

void _postDataToView() {
  inputSliderViewObject.add(
      SliderViewObject(_list, _list.length, _currentIndex));
}

2. 修复索引计算逻辑 #

修正goNext()、goPrevious()的自增自减逻辑，去掉错误的中间变量赋值：

@override
int goNext() {
  _currentIndex++;
  if (_currentIndex >= _list.length) {
    _currentIndex = 0;
  }
  return _currentIndex;
}

@override
int goPrevious() {
  _currentIndex--;
  if (_currentIndex < 0) {
    _currentIndex = _list.length - 1;
  }
  return _currentIndex;
}

3. 修正PageView构建逻辑 #

PageView的itemBuilder必须根据回调返回的index参数，从完整列表中取对应页的数据渲染，不要使用全局当前选中的页数据：

body: PageView.builder(
  controller: _pageController,
  itemCount: sliderViewObject.numOfSlides,
  onPageChanged: (index) {
    _viewModel.onPageChanged(index);
  },
  itemBuilder: (context, index) {
    // 按索引取对应页数据，解决页面重复问题
    return OnBoardingPage(sliderViewObject.sliderList[index]);
  },
),

4. 规范Widget写法 #

将OnBoardingPage中的成员变量改为final，符合StatelessWidget的不可变规范，避免隐式状态问题：

class OnBoardingPage extends StatelessWidget {
  final SliderObject _sliderObject;
  const OnBoardingPage(this._sliderObject, {Key? key}) : super(key: key);

  // 原有build逻辑保持不变
}

• 当前使用的Curves.bounceInOut动画曲线带回弹效果，会让滑动看起来不跟手，如果不需要回弹效果可以替换为Curves.easeInOut，滑动体验更流畅。
• 底部指示器区域不需要在每次页面切换时全量重建，可以单独抽离成StatefulWidget或者用ValueListenableBuilder仅刷新指示器部分，进一步减少不必要的性能开销。

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