一旦有分歧，滑块就会变得迟缓

Question

滑块的动画通常是这样的：

这是我尝试添加 值标签时滑块的样子:

这是示例代码：

          Slider(
              value: sliderValue,
              activeColor: color,
              min: 0.0,
              max: 100.0,
              divisions: 2000,    //TO COMMENT
              label: sliderValue.toStringAsFixed(2),    //TO COMMENT
              onChanged: (value) {
                setState(() {
                  sliderValue = value;
                });
              }),

在这段代码中，如果我注释掉标记的 //TO COMMENT 行，即 divisions 和 label 属性，`标签会按预期消失，动画是 再次平滑。

我认为这是由于 divisions 造成的，任何数量，即使只是 100 也不会以任何方式改变 lag。

Additionally, it seems that the label property does not work on its own. It needs the divisions property to also be set so that the value label can be displayed.

解决方法是什么，以便我可以实现具有第一张图片平滑度的滑块，但具有默认值标签 或者什么看起来一样？

Answer 1

// create class 

 // .yaml > another_xlider: ^1.0.0 

import 'package:another_xlider/another_xlider.dart';
import '../res/res_controller.dart';
import '../utils/utils_controller.dart';
import 'package:flutter/material.dart';

class RangeBar extends StatelessWidget {
  final List<double>? values;
  final double? min;
  final double? max;
  final Function(int, dynamic, dynamic)? onDragging;

  const RangeBar(
      {Key? key,
      @required this.values,
      @required this.onDragging,
      @required this.min,
      @required this.max})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FlutterSlider(
        values: values!,
        // pre set values
        rangeSlider: true,
        handlerAnimation: FlutterSliderHandlerAnimation(
            curve: Curves.elasticOut,
            reverseCurve: Curves.bounceIn,
            duration: Duration(milliseconds: 500),
            scale: 1.5),
        jump: true,
        min: min ?? 0,
        max: max ?? 0,
        touchSize: Sizes.s13,
        trackBar: FlutterSliderTrackBar(
          activeTrackBar: BoxDecoration(color: AppColors.orange),
        ),
        tooltip: FlutterSliderTooltip(
          boxStyle: FlutterSliderTooltipBox(
            decoration: BoxDecoration(
              color: Colors.greenAccent,
              borderRadius: BorderRadius.all(Radius.circular(Sizes.s5)),
              border: Border.all(
                color: AppColors.steelGray,
              ),
            ),
          ),
          positionOffset: FlutterSliderTooltipPositionOffset(top: -Sizes.s15),
          alwaysShowTooltip: true,
          textStyle:
              TextStyles.defaultRegular.copyWith(fontSize: FontSizes.s11),
       
        ),
        onDragging: onDragging);
  }
}

// try to call 

  Container(
  child: _size(),
   )


 Widget _size() {
    {
      double sizeMin;
      double sizeMax;

        sizeMin =  0;
        sizeMax =  0;

        sizeMax = sizeMin.round() == sizeMax.round() ? sizeMax + 1 : sizeMax;

        return RangeBar(
          values: [
          // add values
          ],
          min: sizeMin,
          max: sizeMax.ceilToDouble(),
          onDragging: (p0, lowerValue, upperValue) {
            
            log(lowerValue);
            log(upperValue);
           
          },
        );
      
      return C0();
    }
  }

Answer 2

如果你查看源代码，你会发现 _positionAnimationDuration 负责为滑块设置动画

改为

static const Duration _positionAnimationDuration = Duration.zero;

更改 source-code 会影响其他项目，而是创建一个本地 dart 文件，粘贴完整的滑块代码并进行更改。

假设我们已经创建了 customSlider.dart 文件 .确保在我们的 customSlider.dart 上用 import 'package:flutter/cupertino.dart'; 或 material 替换一些（./xyz.dart）顶级导入。然后替换 _positionAnimationDuration.

要使用它，请导入文件

import 'customSlider.dart' as my_slider;
...
//use case 
my_slider.Slider(....)

一旦有分歧，滑块就会变得迟缓

Slider becomes laggy once there are divisions

flutter

dart

flutter-layout

flutter-animation