flutter 双滑块的进度条

最新推荐文章于 2024-07-06 22:37:06 发布

冰天糖葫芦

最新推荐文章于 2024-07-06 22:37:06 发布

阅读量1.8k

点赞数 2

分类专栏： flutter 文章标签： slider 范围选择双滑块进度条

本文链接：https://blog.youkuaiyun.com/u014465652/article/details/115065522

版权

flutter 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在Flutter项目中使用syncfusion_flutter_sliders插件实现双滑块进度条，详细讲解了配置、属性设置及自定义样式，并提供了代码示例，展示了功能强大的SfRangeSlider在价格区间选择场景的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需要进行价格区间选择，网上找到一个flutter带双滑块的进度条插件很好用，推荐给大家：

syncfusion_flutter_sliders: ^18.4.48-beta

这个插件是国外一家知名插件公司提供的，功能强大，他们还有其他插件，比如图表，日历，等等，具体可在https://pub.flutter-io.cn/上搜索syncfusion，自行查看；今天说明一下双滑块的实现：

首先在yaml文件中导入本插件，然后在要用本插件的文件引用：

import 'package:syncfusion_flutter_sliders/sliders.dart';

然后使用代码：

SfRangeSlider(
                min: 0.0,
                max: 1000.0,
                values: _values,
                interval: 200,
                showTicks: true,
                showLabels: true,
                stepSize: 100,
                labelFormatterCallback:
                    (dynamic actualValue, String formattedText) {
                  return actualValue == 1000 ? '不限' : '¥$formattedText';
                },
                inactiveColor: Colors.grey[200],
                minorTicksPerInterval: 1,
                onChanged: (SfRangeValues values) {
                  print("here is change!!!");
                  setState(() {
                    _values = values;
                  });
                },
              ),

其中属性：min是最小值，

max最大值，

values:是默认滑块所在位置格式为：

SfRangeValues _values = SfRangeValues(0.0, 800.0);

interval是标签间隔，设为200 就是每个200显示一个标签，

showTicks是是否显示刻度，

showLabels是是否显示标签，

stepSize是最小滑动距离，

labelFormatterCallback是对标签进行定制，上面的代码意思是标签值不是1000的话标签显示人民币符号加数字，如果是1000的话标签显示不限。

inactiveColor:未选中的进度条颜色，或者说是进度条背景色。

activeColor：选中范围的进度条颜色。

minorTicksPerInterval：两个大刻度之间显示的小刻度数量。

onChanged：变化监听。

另外如果想要更多样式需要使用核心包：

syncfusion_flutter_core: ^18.4.48

引用文件：

import 'package:syncfusion_flutter_core/theme.dart';

代码：

SfRangeSliderTheme(
              data: SfRangeSliderThemeData(
                  thumbColor: Colors.white,
                  thumbRadius: 12,
                  thumbStrokeWidth: 2,
                  thumbStrokeColor: Colors.deepOrange),
              child: SfRangeSlider(
                min: 0.0,
                max: 1000.0,
                values: _values,
                interval: 200,
                showTicks: true,
                showLabels: true,
                stepSize: 100,
                labelFormatterCallback:
                    (dynamic actualValue, String formattedText) {
                  return actualValue == 1000 ? '不限' : '¥$formattedText';
                },
                inactiveColor: Colors.grey[200],
                minorTicksPerInterval: 1,
                onChanged: (SfRangeValues values) {
                  print("here is change!!!");
                  setState(() {
                    _values = values;
                  });
                },
              ),
            ),

也就是在

SfRangeSlider外面套一层：

SfRangeSliderTheme并在data中写入样式数据就可以了上面的代码主要修改滑块的样式，当然也可以修改其他样式。

以下是实现的效果图：