showModalBottomSheet 中的 Flutter Range Slider 不更新 UI

Question

所以我有這個showModalBottomSheet()並且在其中我有幾個需要狀態的小部件，所以我用StatefulBuilder()包裝。 即使其他小部件正在按預期更新它們的數據和 UI，但RangeSlider()不會更新 UI（幻燈片），它只會更新數據。

我試過用StatefulBuilder()包裝RangeSlider() ) 但它仍然不起作用（幻燈片）。 我也嘗試過其他類似的解決方案我該如何解決這個問題。

這是我的代碼片段

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  shape: const RoundedRectangleBorder(
  borderRadius: BorderRadius.vertical(
  top: Radius.circular(12.0),)),
  builder:(_){
  
  return StatefulBuilder(builder: (BuildContext context, StateSetter setter){
    return SafeArea(
    child: Column(
     children:[
       ...
Wrap(
  children: List.generate(1, (index) {
    final selectable = facets[index];
    final facet = selectable.item;
    RangeValues _currentRangeValues = RangeValues(0, double.parse(facets.last.item.value));
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        showValueIndicator: ShowValueIndicator.always,
        thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 15),
      ),
      child: RangeSlider(
        min: 0,
        max: double.parse(facets.last.item.value),
        activeColor: AppColors.secondaryThemeColor,
        inactiveColor: AppColors.fontHeaderColor,
        labels: RangeLabels(
          _currentRangeValues.start.round().toString().replaceAllMapped(reg, mathFunc),
          _currentRangeValues.end.round().toString().replaceAllMapped(reg, mathFunc),
        ),
        values: _currentRangeValues,
        onChanged: (value) {
          setState(() {
            sVal = value.start.round();
            sFal = value.end.round();
            _currentRangeValues = value;
            facetPriceList.toggle(facet.value);
          });
        },
      ),
    );
      }),
     )       ...
      ]
     )
   );
  }


 }

)

這是截圖

Answer 1

因為你正在調用setState並且這將更新主類，如果你想在StatefulBuilder內部更新你需要調用 StatefulBuilder 的setState ，首先將你的StatefulBuilder更改為：

StatefulBuilder(builder: (context, innerSetState) {
  ...
}

然后在 RangeSlider 的onChanged中調用innerSetState而不是setState ：

innerSetState(() {
        sVal = value.start.round();
        sFal = value.end.round();
        _currentRangeValues = value;
        facetPriceList.toggle(facet.value);
      });

您的主要問題是您在構建方法中定義了_currentRangeValues 。 每次更新_currentRangeValues時，它都會被重置並重新定義。 因為您只想要不需要list. generate的facets中的第一項。 list. generate刪除它，然后像這樣在 return StatefulBuilder之前放置變量：

final selectable = facets[0];
final facet = selectable.item;
RangeValues _currentRangeValues = RangeValues(0, double.parse(facets.last.item.value));

return StatefulBuilder(builder: (context, innerSetState) {
  return ....
}

然后將您的wrap小部件更改為此：

Wrap(
  children: [
    SliderTheme(
      data: SliderTheme.of(context).copyWith(
        showValueIndicator: ShowValueIndicator.always,
        thumbShape:
            const RoundSliderThumbShape(enabledThumbRadius: 15),
      ),
      child: RangeSlider(
        min: 0,
        max: double.parse(facets.last.item.value),
        activeColor: AppColors.secondaryThemeColor,
        inactiveColor: AppColors.fontHeaderColor,
        labels: RangeLabels(
          _currentRangeValues.start
              .round()
              .toString()
              .replaceAllMapped(reg, mathFunc),
          _currentRangeValues.end
              .round()
              .toString()
              .replaceAllMapped(reg, mathFunc),
        ),
        values: _currentRangeValues,
        onChanged: (value) {
          innerSetState(() {
            sVal = value.start.round();
            sFal = value.end.round();
            _currentRangeValues = value;
            facetPriceList.toggle(facet.value);
          });
        },
      ),
    ),
  ],
)