flutter - flutter中同步PageView和Slider的换页

Question

在我的应用程序中，我有一个 PageView 和一个 Slider。当我滚动 PageView 时，我希望 Slider 改变它的值，当我滑动 Slider 时，我希望 的页面>PageView 也要改变。为此，我将状态设为 Slider 的 value，在 onChanged 中，我将更改其值，在 onChangeEnd 会将 PageView 动画化到所需位置:

Slider(
   value: _sliderValue,
   onChanged: (val) {
      setState(() {
         _sliderValue = val;
      });
   },
   onChangeEnd: (val) {
      _controller.animateToPage(val.toInt(),
          duration: Duration(milliseconds: 300), curve: Curves.ease);
      },
   max: (pages.length - 1).toDouble())

并且在 PageView 中，我还必须更新 _sliderValue，因此当我滚动 PageView 时它会起作用:

PageView.builder(
  onPageChanged: (page) {
    setState(() {
       _sliderValue = page.toDouble();
    });
  },
)

问题是，我现在有 2 个地方需要更改 _sliderValue - 一个在 onChanged 中，以便 Slider 响应，一个在onPageChanged 用于滚动。当我反复按下 slider 时，这会使 slider 震动。

有什么办法可以解决这个问题吗？

Answer 1

实际上，这种情况下的问题在于，对于每次页面更改，都会触发 PageView 的 onPageChanged 回调。例如，如果我们在第 1 页并使用 Slider 移动到第 5 页，那么 onPageChanged 将被调用 4 次(对于第 2-3-4-5 页)结果 Slider 的值状态将重复更改 4 次。这会导致 Slider 跳到所有地方。

我试图通过在 onPageChanged 中设置一个 Timer 来修复它，以便在触发 setState 之前等待一定的时间，所以它仅在最后一页更改完成后触发。

// Define a Timer object in your state
Timer _timer;

PageView.builder(
  onPageChanged: (page) {
    // If there is a Timer running, cancel it
    if (_timer != null) {
      _timer.cancel();
    }
    // Setup a new Timer
    _timer = Timer(Duration(milliseconds: 300), () {
      setState(() {
        _sliderValue = page.toDouble();
      });
    });
  },
)

这可能看起来很老套，而且结果实际上并不完美(当您手动滚动页面时，Slider 必须等待 300 毫秒才能更新其值)但它仍然是一个改进。如果有人有更好的解决方案，我很高兴听到。