【Flutter】自定义分段选择器Slider

【Flutter】ZFJ自定义分段选择器Slider

前言

在开发一个APP的时候,需要用到一个分段选择器,系统的不满足就自己自定义了一个;

可以自定义节点的数量、自定义节点的大小、自定义滑竿的粗细,自定义气泡的有无等等...

基本上满足你的常用需求。

效果

参数

复制代码
  /// 滑杆的宽度
  final double width;
  /// 滑杆的高度
  final double height;
  /// 最大值
  final int? maxValue;
  /// 最小值
  final int? minValue;
  /// 段数
  final int divisions;
  /// 滑块的宽度
  final double sliderWidth;
  /// 节点的宽度
  final double nodeWidth;
  /// 滑动跳到节点
  final bool toNodeBool;
  /// 滑竿回调
  final Function(int) valueChanged;
  /// 指定初始化的值 0-1
  final double value;
  /// 是否可以滑动,默认可以滑动
  final bool isEnabled;
  /// 是否显示气泡
  final bool isShowBubble;
  /// 气泡和节点单位
  final String unitText;
  /// 是否显示节点文字
  final bool isShowNodeText;
  /// 选中颜色
  final Color? activeTrackColor;
  /// 未选中颜色
  final Color? unActiveTrackColor;
  /// 节点背景颜色
  final Color? nodeBgColor;
  /// 气泡字体样式
  final TextStyle? bubbleValueStyle;
  /// 节点字体样式
  final TextStyle? nodeValueStyle;

事例

1、使用

复制代码
            // 1、段数:4,有气泡,有单位,有节点文字
            ZFJNodeSlisder(
              key: _slisderStateKey_0,
              width: kZFJScreenUtil.screenWidth - 32,
              maxValue: 100,
              value: 0.4,
              unitText: "%",
              divisions: 4,
              isEnabled: true,
              isShowBubble: true,
              valueChanged: (value) {
                print("----------> value = $value");
              },
            ),
            
            // 2、段数:1,有气泡,有单位,有节点文字
            ZFJNodeSlisder(
              key: _slisderStateKey_1,
              width: kZFJScreenUtil.screenWidth - 32,
              maxValue: 100,
              value: 0.4,
              unitText: "%",
              divisions: 1,
              activeTrackColor: Colors.red,
              isEnabled: true,
              isShowBubble: true,
              valueChanged: (value) {
                print("----------> value = $value");
              },
            ),
            
            // 3、段数:3,有气泡,没单位,有节点文字
            ZFJNodeSlisder(
              key: _slisderStateKey_2,
              width: kZFJScreenUtil.screenWidth - 32,
              maxValue: 100,
              value: 0.2,
              unitText: "%",
              divisions: 3,
              activeTrackColor: Colors.green,
              isEnabled: true,
              isShowBubble: true,
              valueChanged: (value) {
                print("----------> value = $value");
              },
            ),
            
            // 4、段数:4,有气泡,没单位,没节点文字
            ZFJNodeSlisder(
              key: _slisderStateKey_3,
              width: kZFJScreenUtil.screenWidth - 32,
              maxValue: 100,
              value: 0.1,
              unitText: "%",
              divisions: 4,
              activeTrackColor: Colors.yellow,
              isShowNodeText: false,
              isEnabled: true,
              isShowBubble: true,
              valueChanged: (value) {
                print("----------> value = $value");
              },
            ),

2、获取进度条的值

获取当前进度条的值参与计算等业务;

复制代码
_slisderStateKey.currentState?.value;

3、更新进度条的值

其他的事件更新进度条的值;

复制代码
_slisderStateKey.currentState?.updateValue(progress);

进度条全选

复制代码
_slisderStateKey.currentState?.selectedAll();

源码

喜欢的点个小心心吧⭐️

ZFJFlutterUntils/zfj_node_slisder.dart

相关推荐
你听得到112 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
wilinz2 小时前
Flutter Android 端接入百度地图踩坑记录
android·flutter
xiaoyan20155 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
0wioiw012 小时前
Flutter基础(前端教程⑧-数据模型)
前端·flutter·状态模式
TE-茶叶蛋1 天前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
怀君1 天前
Flutter——数据库Drift开发详细教程之迁移(九)
数据库·flutter
人生游戏牛马NPC1号1 天前
学习 Flutter (一)
android·学习·flutter
GeniuswongAir1 天前
如何在Flutter开发中系统性减少知识盲区
flutter
0wioiw01 天前
Flutter基础(前端教程②-卡片列表)
flutter
GeniuswongAir1 天前
Flutter多线程机制深度解析
flutter