时间戳

首页 > 解决方案 > 如何在 RangeSlider 颤振中有两个范围值

flutter - 如何在 RangeSlider 颤振中有两个范围值

问题描述

我需要一个显示一天中小时数的 RangeSlider。现在我通过 RangeValue(0,24) 显示它 我需要在左侧显示 0-12 AM，在右侧显示 1-12 PM 有没有办法像这样拆分 RangeValues

class ClockRangeWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => _ClockRangeWidget();
}

class _ClockRangeWidget extends State<ClockRangeWidget> {
RangeValues _currentRangeValues = const RangeValues(0, 24);

static String _valueToString(double value) {
return value.toStringAsFixed(0);
}

@override
Widget build(BuildContext context) {
return SliderTheme(
data: SliderThemeData(
    activeTrackColor: kPrimaryColor,
    inactiveTrackColor: Colors.grey[300],
    trackHeight: 6.0,
    thumbColor: Colors.white,
    activeTickMarkColor: kPrimaryColor,
    inactiveTickMarkColor:Colors.grey[300],
    valueIndicatorColor: Colors.grey,
    valueIndicatorTextStyle: TextStyle(
      color: Colors.white,
    ),
  ),
  child: RangeSlider(
    values: _currentRangeValues,
    min: 0,
    max: 24,
    divisions: 23,
    labels: RangeLabels(
      _currentRangeValues.start.round() >= 12 ? _currentRangeValues.start.round().toString() + '.00 PM' : _currentRangeValues.start.round().toString() + '.00 AM',
      _currentRangeValues.end.round() >= 12 ? _currentRangeValues.end.round().toString() + '.00 PM' : _currentRangeValues.end.round().toString() + '.00 AM',
    ),
    onChanged: (RangeValues values) {
      setState(() {
        _currentRangeValues = values;
      });
    },
  ),
);
 }
 }

标签： flutterdart

解决方案

增加divisions以24使滑块正确划分。然后你应该能够基于RangeValues.

class ClockRangeWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ClockRangeWidget();
}

class _ClockRangeWidget extends State<ClockRangeWidget> {
  RangeValues _currentRangeValues = const RangeValues(0, 24);

  static String _valueToString(double value) {
    return value.toStringAsFixed(0);
  }

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderThemeData(
        inactiveTrackColor: Colors.grey[300],
        trackHeight: 6.0,
        thumbColor: Colors.white,
        inactiveTickMarkColor: Colors.grey[300],
        valueIndicatorColor: Colors.grey,
        valueIndicatorTextStyle: TextStyle(
          color: Colors.white,
        ),
      ),
      child: RangeSlider(
        values: _currentRangeValues,
        min: 0,
        max: 24,
        divisions: 24,
        labels: RangeLabels(
          _getLabel(_currentRangeValues.start),
          _getLabel(_currentRangeValues.end),
        ),
        onChanged: (RangeValues values) {
          setState(() {
            _currentRangeValues = values;
          });
        },
      ),
    );
  }

  String _getLabel(double value) {
    if (value > 12.0) {
      return "${(value - 12.0).round()} PM";
    } else {
      return "${value.round()} AM";
    }
  }
}

推荐阅读