【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

相关推荐
消失的旧时光-19432 小时前
Flutter 异步进阶:Isolate 与 compute 的性能优化实践
flutter
nicepainkiller4 小时前
Flutter Loading 的封装
flutter
Bigger6 小时前
🚀 Flutter iOS App 上架 App Store 全流程(图文详解)
flutter·ios·app
_大学牲9 小时前
Flutter 之魂 Dio🔥:四两拨千斤的网络库
前端·数据库·flutter
HuWentao10 小时前
如何创建自我更新的通用项目脚本
前端·flutter
QuantumLeap丶15 小时前
《Flutter全栈开发实战指南:从零到高级》- 08 -导航与路由管理
flutter·ios·dart
折翅鵬18 小时前
Flutter兼容性问题:Could not get unknown property ‘flutter‘ for extension ‘android‘
android·flutter
Zender Han1 天前
Flutter 状态管理详解:深入理解与使用 Bloc
android·flutter·ios
技术男1 天前
flutter中怎么局部刷新
flutter
恋猫de小郭1 天前
Flutter 也有类 React Flow 的节点流程编辑器,快来了解下刚刚开源的 vyuh_node_flow
android·前端·flutter