flutter_xlider
支持 RTL 和众多选项及自定义的 Material Design 滑块和范围滑块，适用于 Flutter。
开始使用
单个滑块
一个单个滑块
FlutterSlider(
values: [300],
max: 500,
min: 0,
onDragging: (lowerValue, upperValue) {
_lowerValue = lowerValue;
_upperValue = upperValue;
setState(() {});
},
)
要制作从右到左的滑块，请使用 rtl: true
FlutterSlider(
...
rtl: true,
...
)
范围滑块
滑块的简单示例
FlutterSlider(
values: [30, 420],
rangeSlider: true,
max: 500,
min: 0,
onDragging: (lowerValue, upperValue) {
_lowerValue = lowerValue;
_upperValue = upperValue;
setState(() {});
},
)
处理器
您可以使用 handler 和 rightHandler 属性来自定义处理程序。
自定义处理程序需要 width 和 height，因此我们使用 SizedBox 作为包装器
如果您使用 rangeSlider，那么如果您想自定义处理程序，还应该定义 rightHandler
这里有一个带有自定义处理程序和轨道的范围滑块
FlutterSlider(
...
handler: SizedBox(
width: 20,
height: 50,
child: Container(
child: Icon(
Icons.view_headline,
color: Colors.black54,
size: 13,
),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.black.withOpacity(0.12))),
),
),
rightHandler: SizedBox(
width: 20,
height: 50,
child: Container(
child: Icon(
Icons.view_headline,
color: Colors.black54,
size: 13,
),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.black.withOpacity(0.12))),
),
),
...
)
处理程序缩放动画
您可以使用 handlerAnimation 控制处理程序的缩放动画类型、持续时间和缩放大小。
handlerAnimation 接受一个 FlutterSliderHandlerAnimation 类，该类具有以下 4 个属性
FlutterSlider(
...
handlerAnimation: FlutterSliderHandlerAnimation(
curve: Curves.elasticOut,
reverseCurve: Curves.bounceIn,
duration: Duration(milliseconds: 500),
scale: 1.5
),
...
)
如果您不想要缩放动画，则只需将 scale 属性设置为 1 即可。
如果您不想要 reverseCurve，则忽略它。默认为 null
轨道条
要自定义轨道条，您可以使用 FlutterSliderTrackBar。 您可以在此处查看详细信息
FlutterSlider(
...
trackBar: FlutterSliderTrackBar(
activeTrackBarColor: Colors.redAccent,
activeTrackBarHeight: 5,
leftInactiveTrackBarColor: Colors.greenAccent.withOpacity(0.5),
),
...
)
工具提示
为了自定义您的工具提示，您可以使用 FlutterSliderTooltip 类。 您可以在此处查看所有属性
FlutterSlider(
...
tooltip: FlutterSliderTooltip(
textStyle: TextStyle(fontSize: 17, color: Colors.white),
boxStyle: FlutterSliderTooltipBox(
decoration: BoxDecoration(
color: Colors.redAccent.withOpacity(0.7)
)
)
),
...
)
工具提示前缀
您可以使用 leftPrefix、leftSuffix、rightPrefix、rightSuffix 在工具提示内容周围添加所需的控件。
FlutterSlider(
...
tooltip: FlutterSliderTooltip(
leftPrefix: Icon(Icons.attach_money, size: 19, color: Colors.black45,),
rightSuffix: Icon(Icons.attach_money, size: 19, color: Colors.black45,),
),
...
)
工具提示数字格式
您可以使用 NumberFormat 类自定义工具提示数字
这是一个示例
FlutterSlider(
...
tooltip: FlutterSliderTooltip(
numberFormat: intl.NumberFormat(),
// numberFormat: intl.compact(),
),
...
)
您可以在 NumberFormat 中找到更多信息
控件
跳转
默认情况下，滑块处理程序会流畅移动，如果将 jump 设置为 true，处理程序将在间隔之间跳转
FlutterSlider(
...
jump: true,
...
)
间隔数
离散间隔的数量
FlutterSlider(
...
divisions: 25,
...
)
忽略步骤
如果您的配置要求某些步骤不可用，您可以使用 ignoreSteps 属性。
此属性接受一个简单的类来定义 from 和 to 范围。
FlutterSlider(
...
ignoreSteps: [
FlutterSliderIgnoreSteps(from: 8000, to: 12000),
FlutterSliderIgnoreSteps(from: 18000, to: 22000),
],
...
)
最小距离
使用范围滑块时，可以使用 minimumDistance 选项定义两个处理程序之间的最小距离
FlutterSlider(
...
minimumDistance: 300,
...
)
最大距离
这是最小距离的相反，使用范围滑块时，可以使用 maximumDistance 选项定义两个处理程序之间的最大距离
FlutterSlider(
...
maximumDistance: 300,
...
)
始终显示工具提示
如果此属性设置为 true，工具提示将始终显示。如上面的示例所示
FlutterSlider(
...
alwaysShowTooltip: true,
...
)
触摸区域
您可以控制处理程序的触摸区域大小。默认触摸区域为 2
范围在 1 到 5 之间
FlutterSlider(
...
touchZone: 2,
...
)
要查看处理程序的触摸区域，请将 displayTestTouchZone 设置为 true 并测试您的滑块
FlutterSlider(
...
displayTestTouchZone: true,
...
)
disabled
要禁用滑块，可以使用 disabled。
FlutterSlider(
...
disabled: true,
...
)
RTL
使滑块从右到左
FlutterSlider(
...
rtl: true,
...
)
事件
有 3 个事件
onDragStarted：拖动开始时触发
onDragCompleted 拖动结束时触发
onDragging 拖动时持续触发
以上三个函数都返回两个 double 值：Lower Value 和 Upper Value
FlutterSlider(
...
onDragging: (lowerValue, upperValue) {
_lowerValue = lowerValue;
_upperValue = upperValue;
setState(() {});
},
...
)
