Flutter标尺滑动选择插件ruler

Flutter标尺滑动选择插件ruler_slider的使用

标题

Flutter标尺滑动选择插件ruler_slider的使用

内容

这个包提供了一个高度可定制的水平标尺滑动器（Ruler Slider）用于Flutter。它允许用户在标尺界面中滚动并选择值，支持自定义刻度标记、标签、对齐行为等。

特性

可定制的刻度标记（颜色、大小和间距）
选中的刻度标记颜色
未选中的刻度标记颜色
刻度标记间距
显示当前值的标签样式
自定义特定间隔的标签
调整标尺、刻度标记、标签和固定条的外观
返回所选值的回调函数

截图

这里有一些截图展示RulerSlider的实际效果：

参数

minValue: (double) 最小值
maxValue: (double) 最大值
initialValue: (double) 初始值，默认为minValue和maxValue之间的中点
rulerWidth: (double) 标尺宽度
rulerHeight: (double) 标尺高度
selectedBarColor: (Color) 选中刻度标记的颜色
unselectedBarColor: (Color) 未选中刻度标记的颜色
tickSpacing: (double) 每个刻度标记间的间距
valueTextStyle: (TextStyle) 显示当前值的标签样式
customLabels: (List<String>) 自定义标签列表
onChanged: (ValueChangedCallback) 回调函数，返回所选值
showFixedBar: (bool) 是否显示中心固定条
fixedBarColor: (Color) 固定条的颜色
fixedBarWidth: (double) 固定条的宽度
fixedBarHeight: (double) 固定条的高度
showFixedLabel: (bool) 是否显示固定标签
fixedLabelColor: (Color) 固定标签的颜色
scrollSensitivity: (double) 调整滚动灵敏度
enableSnapping: (bool) 启用或禁用对齐行为
majorTickInterval: (int) 大刻度标记间隔（例如每5或10个刻度）
labelInterval: (int) 显示标签的间隔（例如每10个刻度）
labelVerticalOffset: (double) 标签的垂直偏移量
showBottomLabels: (bool) 是否显示底部标签
labelTextStyle: (TextStyle) 底部标签的自定义样式
majorTickHeight: (double) 大刻度标记的高度
minorTickHeight: (double) 小刻度标记的高度

示例

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

ionicwang 1楼•5 天前

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

当然，以下是一个关于如何在Flutter项目中使用ruler_slider插件的示例代码。ruler_slider是一个用于创建标尺滑动选择的Flutter插件，非常适合需要精确数值选择的场景。

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

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

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

接下来，在你的Dart文件中使用RulerSlider组件。以下是一个完整的示例，展示如何在Flutter应用中使用ruler_slider：

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

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

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

class MyRulerSlider extends StatefulWidget {
  @override
  _MyRulerSliderState createState() => _MyRulerSliderState();
}

class _MyRulerSliderState extends State<MyRulerSlider> {
  double selectedValue = 0.0;

  @override
  Widget build(BuildContext context) {
    return RulerSlider(
      min: 0.0,
      max: 100.0,
      step: 1.0,
      value: selectedValue,
      onChanged: (value) {
        setState(() {
          selectedValue = value;
        });
      },
      builder: (context, value, child) {
        return Container(
          child: Center(
            child: Text(
              '${value.toInt()}',
              style: TextStyle(fontSize: 24),
            ),
          ),
          decoration: BoxDecoration(
            color: Colors.blueAccent,
            borderRadius: BorderRadius.circular(10),
          ),
        );
      },
      rulerBuilder: (context, index, isLabel) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 4.0),
          child: Text(
            '${index.toDouble()}',
            style: TextStyle(
              color: isLabel ? Colors.black : Colors.grey,
              fontSize: isLabel ? 14 : 12,
            ),
          ),
        );
      },
      labelInterval: 10.0, // 每10个单位显示一个标签
    );
  }
}

代码解释：

依赖导入：
- 导入flutter/material.dart和ruler_slider/ruler_slider.dart。
主应用入口：
- MyApp是一个无状态小部件，定义了应用的基本结构和主题。
标尺滑动组件：
- MyRulerSlider是一个有状态小部件，用于管理标尺滑动的状态。
- selectedValue变量存储当前选中的值。
RulerSlider组件：
- min和max定义了标尺的最小值和最大值。
- step定义了滑动时的步长。
- value绑定当前选中的值。
- onChanged回调在值改变时被调用，用于更新状态。
- builder参数用于自定义滑块的显示样式。
- rulerBuilder参数用于自定义标尺的显示样式，包括标签的间隔和样式。
- labelInterval定义了标签的间隔。

这个示例展示了如何使用ruler_slider插件创建一个简单的标尺滑动选择组件，并自定义滑块和标尺的样式。你可以根据实际需求进一步调整参数和样式。