Flutter节点滑动插件diamond_node_slider的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter节点滑动插件diamond_node_slider的使用

diamond_node_slider 是一个Flutter插件，用于创建具有菱形或圆形节点的滑动条。它支持多种自定义选项，如轨道颜色、节点形状、初始值等，并且可以实现有过渡效果和无过渡效果的滑动。

功能特点

  1. 节点形状：支持菱形和圆形两种节点。
  2. 效果选择：可以实现有过渡值和无过渡值两种效果。
  3. 气泡显示：滑块上方可以显示当前值，同时可以在节点底部选择性地显示文本。
  4. 无节点模式：可以选择不显示任何节点。
  5. 初始值配置：可以通过设置初始比例值来控制滑块的起始位置。

使用方法

基本用法

DiamondNodeSlisder(
  activeTrackColor: Color(0xFF878E9A),
  unActiveTrackColor: Color(0xFFEBEBEB),
  width: 300.0,
  height: 2.5,
  divisions: 4,
  maxValue: 100,
  minValue: 0,
  textUnitStr: '%',
  valueChanged: (value, ratioV) {
    print('value===$value');
  },
)

最小值不为0

DiamondNodeSlisder(
  activeTrackColor: Colors.red,
  unActiveTrackColor: Color(0xFFEBEBEB),
  width: 300.0,
  height: 2.5,
  divisions: 5,
  maxValue: 125,
  minValue: 1,
  textUnitStr: 'x',
  valueChanged: (value, ratioV) {
    print('value===$value');
  },
)

节点文字不显示

DiamondNodeSlisder(
  activeTrackColor: Colors.blue,
  unActiveTrackColor: Color(0xFFEBEBEB),
  width: 300.0,
  height: 2.5,
  divisions: 4,
  maxValue: 80,
  minValue: 0,
  textShowBool: false,
  valueChanged: (value, ratioV) {
    print('value===$value');
  },
)

圆形节点与轨道高度设置

DiamondNodeSlisder(
  activeTrackColor: Colors.orange,
  unActiveTrackColor: Color(0xFFEBEBEB),
  width: 300.0,
  height: 5, // 轨道高度
  nodeWidth: 15, // 节点宽高
  divisions: 4,
  maxValue: 120,
  minValue: 0,
  isRhombus: false, // 非菱形
  valueChanged: (value, ratioV) {
    print('value===$value');
  },
)

直接跳到节点，无过渡

DiamondNodeSlisder(
  activeTrackColor: Colors.green,
  unActiveTrackColor: Color(0xFFEBEBEB),
  width: 300.0,
  height: 2.5,
  divisions: 4,
  maxValue: 150,
  minValue: 0,
  textUnitStr: 'm',
  toNodeBool: true,
  valueChanged: (value, ratioV) {
    print('value===$value');
  },
)

无节点

DiamondNodeSlisder(
  activeTrackColor: Colors.purple,
  unActiveTrackColor: Color(0xFFEBEBEB),
  width: 300.0,
  height: 5,
  divisions: 0, // 段数为0
  nodeWidth: 15,
  isRhombus: false,
  maxValue: 100,
  minValue: 0,
  textUnitStr: '%',
  textShowBool: false,
  valueChanged: (value, ratioV) {
    print('value===$value');
  },
)

设置初始值

DiamondNodeSlisder(
  ratioValue: _ratioValue,
  activeTrackColor: Color(0xFF878E9A),
  unActiveTrackColor: Color(0xFFEBEBEB),
  width: 300.0,
  height: 2.5,
  divisions: 4,
  maxValue: sliderMaxValue,
  minValue: sliderMinValue,
  textUnitStr: 'x',
  valueChanged: (value, ratioV) {
    setState(() {
      _currentValue = value;
      print('_currentValue===$_currentValue');

      _ratioValue = ratioV;
      print('ratioV===$_ratioValue');

      // 输入框赋值
      leverController.text = '${value}x';
    });
  },
)

完整示例代码

import 'package:diamond_node_slider/diamond_node_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SliderHomePage(),
    );
  }
}

class SliderHomePage extends StatefulWidget {
  const SliderHomePage({Key? key}) : super(key: key);

  @override
  State<SliderHomePage> createState() => _SliderHomePageState();
}

class _SliderHomePageState extends State<SliderHomePage> {
  int _currentValue = 0;
  double _ratioValue = 0.0;
  int sliderMaxValue = 20;
  int sliderMinValue = 0;

  TextEditingController leverController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _currentValue = 10; // 输入框 初始值
    _ratioValue = _currentValue / sliderMaxValue; // 10/20

    leverController.text = '${_currentValue}x'; // 给输入框赋值
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /// 常用
            DiamondNodeSlisder(
              activeTrackColor: Color(0xFF878E9A),
              unActiveTrackColor: Color(0xFFEBEBEB),
              width: 300.0,
              height: 2.5,
              divisions: 4,
              maxValue: 100,
              minValue: 0,
              textUnitStr: '%',
              valueChanged: (value, ratioV) {
                print('value===$value');
              },
            ),

            SizedBox(height: 30),

            /// 最小值不为0
            DiamondNodeSlisder(
              activeTrackColor: Colors.red,
              unActiveTrackColor: Color(0xFFEBEBEB),
              width: 300.0,
              height: 2.5,
              divisions: 5,
              maxValue: 125,
              minValue: 1,
              textUnitStr: 'x',
              valueChanged: (value, ratioV) {
                print('value===$value');
              },
            ),

            SizedBox(height: 30),

            /// 节点文字不显示
            DiamondNodeSlisder(
              activeTrackColor: Colors.blue,
              unActiveTrackColor: Color(0xFFEBEBEB),
              width: 300.0,
              height: 2.5,
              divisions: 4,
              maxValue: 80,
              minValue: 0,
              textShowBool: false,
              valueChanged: (value, ratioV) {
                print('value===$value');
              },
            ),

            SizedBox(height: 30),

            /// 圆形节点、设置轨道高度
            DiamondNodeSlisder(
              activeTrackColor: Colors.orange,
              unActiveTrackColor: Color(0xFFEBEBEB),
              width: 300.0,
              height: 5, // 轨道高度
              nodeWidth: 15, // 节点宽高
              divisions: 4,
              maxValue: 120,
              minValue: 0,
              isRhombus: false, // 非菱形
              valueChanged: (value, ratioV) {
                print('value===$value');
              },
            ),

            SizedBox(height: 30),

            /// 直接跳到节点，无过渡
            DiamondNodeSlisder(
              activeTrackColor: Colors.green,
              unActiveTrackColor: Color(0xFFEBEBEB),
              width: 300.0,
              height: 2.5,
              divisions: 4,
              maxValue: 150,
              minValue: 0,
              textUnitStr: 'm',
              toNodeBool: true,
              valueChanged: (value, ratioV) {
                print('value===$value');
              },
            ),

            SizedBox(height: 30),

            /// 无节点
            DiamondNodeSlisder(
              activeTrackColor: Colors.purple,
              unActiveTrackColor: Color(0xFFEBEBEB),
              width: 300.0,
              height: 5,
              divisions: 0, // 段数为0
              nodeWidth: 15,
              isRhombus: false,
              maxValue: 100,
              minValue: 0,
              textUnitStr: '%',
              textShowBool: false,
              valueChanged: (value, ratioV) {
                print('value===$value');
              },
            ),

            /*********************************************************************/
            SizedBox(height: 30),
            // 输入框、加减号
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                    child: Text('-', style: TextStyle(fontSize: 30)),
                    onPressed: () {
                      if (_currentValue > sliderMinValue) {
                        _currentValue--;
                        leverController.text = '${_currentValue}x'; // 更新输入框值
                        _ratioValue = _currentValue.toDouble() /
                            sliderMaxValue; // 更新slider进度值
                        setState(() {});
                      }
                    }),
                Container(
                  width: 200,
                  height: 40,
                  decoration: BoxDecoration(
                      color: Colors.grey[100],
                      borderRadius: BorderRadius.all(Radius.circular(4)),
                      border: Border.all(width: 1, color: Color(0xFFAEB4BB))),
                  child: TextField(
                    controller: leverController,
                    textAlign: TextAlign.center,
                    keyboardType: TextInputType.number,
                    inputFormatters: [
                      FilteringTextInputFormatter.allow(RegExp("[0-9]"))
                    ],
                    decoration: InputDecoration(
                        hintText: '杠杆值',
                        border: InputBorder.none,
                        hintStyle: TextStyle(color: Colors.grey)),
                    onChanged: (V) {
                      if (V.contains('x')) {
                        _currentValue = int.parse(V.replaceAll('x', ''));
                      } else {
                        _currentValue = int.parse(V);
                      }
                      if (_currentValue >= sliderMaxValue) _currentValue = sliderMaxValue;
                      leverController.text = '${_currentValue}x'; // 更新输入框值
                      _ratioValue = _currentValue.toDouble() / sliderMaxValue; // 更新slider进度值
                      setState(() {});

                      if (V == '') {
                        _currentValue = 0;
                        leverController.text = '${0}x'; // 更新输入框值
                        _ratioValue = 0.0 / sliderMaxValue; // 更新slider进度值
                        setState(() {});
                      }
                    },
                  ),
                ),
                TextButton(
                  child: Text('+', style: TextStyle(fontSize: 30)),
                  onPressed: () {
                    if (_currentValue < sliderMaxValue) {
                      _currentValue++;
                      leverController.text = '${_currentValue}x'; // 更新输入框值
                      _ratioValue = _currentValue.toDouble() /
                          sliderMaxValue; // 更新slider进度值
                      setState(() {});
                    }
                  },
                ),
              ],
            ),

            /// 有初始值
            DiamondNodeSlisder(
              ratioValue: _ratioValue,
              activeTrackColor: Color(0xFF878E9A),
              unActiveTrackColor: Color(0xFFEBEBEB),
              width: 300.0,
              height: 2.5,
              divisions: 4,
              maxValue: sliderMaxValue,
              minValue: sliderMinValue,
              textUnitStr: 'x',
              valueChanged: (value, ratioV) {
                setState(() {
                  _currentValue = value;
                  print('_currentValue===$_currentValue');

                  _ratioValue = ratioV;
                  print('ratioV===$_ratioValue');

                  // 输入框赋值
                  leverController.text = '${value}x';
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

参数名称 类型 描述
width double 滑动条长度
height double 滑动条高度
maxValue int? 最大值
minValue int? 最小值
divisions int 段数
unActiveTrackColor Color? 不活跃时的颜色
activeTrackColor Color? 活跃时的颜色
textUnitStr String 文字单位（如：%、x等）
textShowBool bool 是否显示节点下的文字
nodeWidth double 节点宽高
isRhombus bool 节点形状：true 表示菱形（默认），false 表示圆形
toNodeBool bool 滑动直接跳到节点，无过渡
ratioValue double? 百分率，范围:0-1, 初始值/maxValue
valueChanged Function(int) 回调函数，用于处理滑动条值变化事件

通过以上参数，您可以根据需要灵活配置 diamond_node_slider 的外观和行为。希望这些信息对您有所帮助！


更多关于Flutter节点滑动插件diamond_node_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter节点滑动插件diamond_node_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用diamond_node_slider插件的示例代码。这个插件允许你创建一个节点滑动视图，其中节点可以呈现为钻石形状。

首先，确保你已经在pubspec.yaml文件中添加了diamond_node_slider依赖：

dependencies:
  flutter:
    sdk: flutter
  diamond_node_slider: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下方式使用DiamondNodeSlider：

import 'package:flutter/material.dart';
import 'package:diamond_node_slider/diamond_node_slider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Diamond Node Slider Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Diamond Node Slider Demo'),
        ),
        body: Center(
          child: MyDiamondNodeSlider(),
        ),
      ),
    );
  }
}

class MyDiamondNodeSlider extends StatefulWidget {
  @override
  _MyDiamondNodeSliderState createState() => _MyDiamondNodeSliderState();
}

class _MyDiamondNodeSliderState extends State<MyDiamondNodeSlider> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return DiamondNodeSlider(
      nodes: [
        DiamondNode(
          label: 'Node 1',
          color: Colors.blue,
        ),
        DiamondNode(
          label: 'Node 2',
          color: Colors.green,
        ),
        DiamondNode(
          label: 'Node 3',
          color: Colors.red,
        ),
        DiamondNode(
          label: 'Node 4',
          color: Colors.purple,
        ),
      ],
      selectedIndex: selectedIndex,
      onNodeSelected: (index) {
        setState(() {
          selectedIndex = index;
        });
        print('Selected Node: $index');
      },
      nodePadding: EdgeInsets.symmetric(horizontal: 20.0),
      nodeSize: 50.0,
      labelStyle: TextStyle(fontSize: 16, color: Colors.white),
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，其中包含一个DiamondNodeSlider。
  2. DiamondNodeSlider接受一个nodes列表，每个节点都是一个DiamondNode对象，包含标签和颜色。
  3. selectedIndex属性用于指定当前选中的节点索引。
  4. onNodeSelected回调在节点被选中时触发，并更新selectedIndex状态。
  5. nodePadding、nodeSize和labelStyle属性用于自定义节点的布局和样式。

确保你根据实际需求调整这些参数和样式。如果你需要更多高级功能或自定义选项，请查阅diamond_node_slider的官方文档。

回到顶部