Flutter中是否有可实现滑动标尺选择器效果的库或Widget？

现成开源库方案 #

你可以直接使用已经封装好的成熟库快速接入，不需要从零开发：

• flutter_ruler_picker：功能完善，支持自定义刻度样式、量程范围、步长、单位、选中指示器效果，自带滑动对齐逻辑，支持数值选中回调，满足绝大多数常规场景需求。
• ruler_picker：轻量实现，体积更小，适合只需要基础标尺选择功能的场景，支持自定义刻度间隔和选中提示样式。

自定义实现方案 #

如果现有库不符合你的个性化定制需求，可以按以下思路自行实现：

• 绘制层可以选择CustomPaint或者ListView.builder两种方案：
  • 选择CustomPaint的话，提前计算好总刻度数量、小刻度宽度、长刻度（带数值标注）的间隔，滑动时根据手势偏移量实时重绘刻度的位置，性能更好，适合刻度数量多的场景。
  • 选择ListView.builder的话，把单个刻度作为独立Widget渲染，配合ScrollController监听滚动偏移，开发成本更低，更容易扩展样式。
• 必须实现滑动锚定逻辑：滑动停止后通过滚动控制器自动将偏移量对齐到最近的刻度位置，避免数值出现非步长的小数。
• 数值计算逻辑：通过 当前滚动偏移量 / 单刻度宽度 * 步长 + 量程最小值 的公式即可实时计算出当前选中的数值，同步更新到顶部的展示区域即可。

核心代码参考 #

// 常量定义
const double minValue = 0;
const double maxValue = 200;
const int step = 1;
const double tickWidth = 8; // 每个小刻度的宽度
const double longTickHeight = 40;
const double shortTickHeight = 20;

// 计算当前选中值
double calculateSelectedValue(double scrollOffset) {
  return (scrollOffset / tickWidth).round() * step + minValue;
}

// 滑动结束后自动对齐刻度
void alignToTick(ScrollController scrollController) {
  final targetOffset = (scrollController.offset / tickWidth).round() * tickWidth;
  scrollController.animateTo(
    targetOffset,
    duration: const Duration(milliseconds: 150),
    curve: Curves.easeOut,
  );
}

内容的提问来源于stack exchange，提问作者avinash