Flutter中如何正确展示-1到+1区间的性格测试结果指示图

推荐适用Flutter包 #

• syncfusion_flutter_sliders：支持高度自定义滑块轨道、标记样式，可将轨道设置为两端标注-1和+1的渐变条，隐藏默认滑块手柄后替换为你需要的指针样式，直接绑定得分为组件value即可自动完成定位，官方提供了大量新手友好的自定义样式示例。
• flutter_xlider：轻量自定义滑块组件，支持自定义左右极值、轨道分段样式、自定义手柄，无需额外处理坐标换算，直接将-1~+1区间的得分设为组件value即可实现对应位置定位。

无第三方包手动实现方案 #

你不需要复杂的绘图知识，只要完成得分到横向偏移量的换算即可，核心实现逻辑如下：

1. 先定义标尺容器的总宽度，以及标记点的宽度参数
2. 换算公式：-1到+1的总区间跨度为2，标记点距离标尺左边缘的横向偏移量为 (得分 + 1) / 2 * 标尺总宽度
3. 布局使用Stack组件嵌套，底层放置标尺背景，上层用Positioned组件放置标记点，绑定计算得到的偏移量即可，得分更新时调用setState刷新就能动态调整标记点位置

极简示例代码参考：

// 用户实际得分，取值范围-1~+1
double userScore = 0.3;
// 标尺总宽度
const double sliderTotalWidth = 300;
// 自定义标记点的宽度
const double markerWidth = 20;

@override
Widget build(BuildContext context) {
  // 计算标记点横向偏移量，减去标记点宽度的一半是为了让标记点中心对准计算位置
  final offsetX = (userScore + 1) / 2 * sliderTotalWidth - markerWidth / 2;
  return Stack(
    alignment: Alignment.centerLeft,
    children: [
      // 底层标尺背景
      Container(
        width: sliderTotalWidth,
        height: 8,
        decoration: BoxDecoration(
          gradient: const LinearGradient(colors: [Colors.blue, Colors.red]),
          borderRadius: BorderRadius.circular(4),
        ),
      ),
      // 上层标记点
      Positioned(
        left: offsetX,
        child: Container(
          width: markerWidth,
          height: markerWidth,
          decoration: const BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle,
            boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 3, spreadRadius: 1)],
          ),
        ),
      )
    ],
  );
}

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