Question

在我的应用中，我有一个PageView和一个Slider。滚动PageView时，我期望Slider会改变其值，而滑动Slider时，我期望PageView的页面也会改变。为此，我将状态设为{{1}的value，并在Slider中更改其值，并在onChanged中使{{ 1}}移至所需位置：

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

问题是，我现在有2个地方可以更改PageView-在PageView.builder( onPageChanged: (page) { setState(() { _sliderValue = page.toDouble(); }); }, )中更改一个，以便_sliderValue可以响应，在onChanged中更改一个，以便滚动。当我反复按它时，这会使滑块震颤。

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

Answer 1

请使用val.round（）而不是val.toInt（）。

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

Answer 2

实际上，这种情况下的问题在于，对于每个页面更改，都会触发onPageChanged的{{1}}回调。例如，如果我们在第1页上，并使用PageView移至第5页，则Slider将被调用4次（对于2-3-4-5页），因此该值onPageChanged的状态将重复更改4次。这会导致Slider的重击在所有位置上跳跃。

我试图通过在Slider内放置Timer来解决此问题，以等待一定的时间后才触发onPageChanged，因此它仅在完成最后的页面更改后才会触发

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(); }); }); }, )必须等待300毫秒才能更新其值），但这仍然是一个改进。如果有人有更好的解决方案，我很高兴听到。

在Flutter中同步PageView和Slider的页面更改

2 个答案: