Flutter-分段滑块

Posted 2023-02-03 大白龙

简述

首先说下非常抱歉，因为个人问题，已有一个多月没有更新了，上周五有个小姐姐问我一个分段滑块的效果，这里就简单写下一个小样作为一个记录。

效果图

分析

其实自带的Slider基本能满足我们的需求，但是这个小姐姐的需要是后台会返回一个数组段比如说[0,10,30,60,100,150],这个滑块只能滑动到数组段中的值，其实这个简单的方式就是直接在slider滑动的时候，判断当前value距离数组段中那个值最接近，然后直接设置slider的值为这个值就可以了。

代码实现

 ///在数组段中找到当前与value最接近的值
 void updateValue(double value) 
    var minValue = double.infinity;
    var result = 0.0;
    for (var element in widget.divisions) 
      double m = value - element;
      if (m.abs() < minValue) 
        result = element;
        minValue = m.abs();
      
    
    if (_value == result) 
      return;
    
    setState(() 
      _value = result;
      if (widget.onChanged != null) 
        widget.onChanged?.call(_value);
      
    );
  

完整代码

import 'package:flutter/material.dart';

///分段滑块
class DivisionsSlider extends StatefulWidget 
const DivisionsSlider(
  Key? key,
  required this.value,
  required this.onChanged,
  required this.divisions,
  this.onChangeStart,
  this.onChangeEnd,
  this.min = 0.0,
  this.max = 1.0,
  this.label,
  this.activeColor,
  this.inactiveColor,
  this.thumbColor,
  this.mouseCursor,
  this.semanticFormatterCallback,
  this.focusNode,
  this.autofocus = false,
) : super(key: key);

final double value;
final ValueChanged<double>? onChanged;
final ValueChanged<double>? onChangeStart;
final ValueChanged<double>? onChangeEnd;
final double min;
final double max;
final String? label;
final Color? activeColor;
final Color? inactiveColor;
final Color? thumbColor;
final MouseCursor? mouseCursor;
final SemanticFormatterCallback? semanticFormatterCallback;
final FocusNode? focusNode;
final bool autofocus;
final List<double> divisions;

@override
State<DivisionsSlider> createState() => _DivisionsSliderState();


class _DivisionsSliderState extends State<DivisionsSlider> 
late double _value;

@override
void initState() 
  super.initState();
  _value = widget.value;


@override
Widget build(BuildContext context) 
  return Slider(
    value: _value,
    onChanged: (value) 
      updateValue(value);
    ,
    onChangeStart: widget.onChangeStart,
    onChangeEnd: widget.onChangeEnd,
    min: widget.min,
    max: widget.max,
    label: widget.label,
    activeColor: widget.activeColor,
    inactiveColor: widget.inactiveColor,
    thumbColor: widget.thumbColor,
    mouseCursor: widget.mouseCursor,
    semanticFormatterCallback: widget.semanticFormatterCallback,
    focusNode: widget.focusNode,
    autofocus: widget.autofocus,
  );


void updateValue(double value) 
  var minValue = double.infinity;
  var result = 0.0;
  for (var element in widget.divisions) 
    double min = (value - element).abs();
    if (min < minValue) 
      result = element;
      minValue = min;
    
  
  if (_value == result) 
    return;
  
  setState(() 
    _value = result;
    if (widget.onChanged != null) 
      widget.onChanged?.call(_value);
    
  );

使用控件

  DivisionsSlider(
              value: defaultValue,
              onChanged: (value) 
                defaultValue = value;
                setState(() );
              ,
              divisions: const [0, 10, 30, 60, 100, 150],
              max: 150,
            ),

本文由 mdnice 多平台发布