Flutter 修改Slider 滑杆刻度

在使用Flutter自带的Slider组件时,使用divisions字段后,滑杆会显示刻度小点,需求是隐藏刻度

实现方式:自定义tickMarkShape,强制修改activeTickMarkColor和inactiveTickMarkColor

import 'package:flutter/material.dart';

/// Created by bawomingtian on 9.12.21.
/// 隐藏Slider滑杆刻度
class AllocateRoundSliderTickMarkShape extends RoundSliderTickMarkShape {
  @override
  void paint(PaintingContext context, Offset center,
      {RenderBox parentBox,
      SliderThemeData sliderTheme,
      Animation enableAnimation,
      TextDirection textDirection,
      Offset thumbCenter,
      bool isEnabled}) {
    sliderTheme = sliderTheme.copyWith(
        trackHeight: sliderTheme.trackHeight,
        activeTrackColor: sliderTheme.activeTrackColor,
        inactiveTrackColor: sliderTheme.inactiveTrackColor,
        disabledActiveTrackColor: sliderTheme.disabledActiveTrackColor,
        disabledInactiveTrackColor: sliderTheme.disabledInactiveTrackColor,
        activeTickMarkColor: Colors.transparent,
        inactiveTickMarkColor: Colors.transparent,
        disabledActiveTickMarkColor: sliderTheme.disabledActiveTickMarkColor,
        disabledInactiveTickMarkColor: sliderTheme.disabledInactiveTickMarkColor,
        thumbColor: sliderTheme.thumbColor,
        disabledThumbColor: sliderTheme.disabledThumbColor,
        overlayColor: sliderTheme.overlayColor,
        valueIndicatorColor: sliderTheme.valueIndicatorColor,
        trackShape: sliderTheme.trackShape,
        tickMarkShape: sliderTheme.tickMarkShape,
        thumbShape: sliderTheme.thumbShape,
        overlayShape: sliderTheme.overlayShape,
        valueIndicatorShape: sliderTheme.valueIndicatorShape,
        showValueIndicator: sliderTheme.showValueIndicator,
        valueIndicatorTextStyle: sliderTheme.valueIndicatorTextStyle);

    super.paint(context, center,
        parentBox: parentBox,
        sliderTheme: sliderTheme,
        enableAnimation: enableAnimation,
        textDirection: textDirection,
        thumbCenter: thumbCenter,
        isEnabled: isEnabled);
  }
}

在SliderTheme中使用

 @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      alignment: Alignment.topCenter,
      child: SliderTheme(
        data: SliderTheme.of(context).copyWith(
            trackShape: BalanceShape(),
            trackHeight: widget.trackHeight,
            activeTickMarkColor: Colors.white,
            inactiveTickMarkColor: Colors.white,
            tickMarkShape: AllocateRoundSliderTickMarkShape(),
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: widget.thumbRadius),
            valueIndicatorShape: PaddleSliderValueIndicatorShape(),
            valueIndicatorTextStyle: TextStyle(fontSize: 14.0)),
        child: Slider(
          value: value,
          onChanged: (data) {
            setState(() {
              value = data;
            });
          },
          onChangeStart: (data) {
            print('start:$data');
          },
          onChangeEnd: (data) {
            print('end:$data');
          },
          min: widget.min,
          max: widget.max,
          label: "$value",
          divisions: 10,
          activeColor: activeColor,
          inactiveColor: inactiveColor,
          semanticFormatterCallback: (double newValue) {
            return '${newValue.round()} dollars}';
          },
        ),
      ),
    );
  }

你可能感兴趣的:(flutter)