如何在Flutter中实现如图所示的等级指示器？

我已通过ClipPath成功制作出右侧的自定义形状，但需要帮助实现左侧的指示器，该指示器用于显示用户当前等级以及后续的奖励等级。

实现左侧等级指示器的可行方案 #

• 自定义View绘制方案
  编写自定义View，在onDraw()方法中动态绘制等级标记：

  1. 计算每个标记的横向间距，根据总等级数平分可用宽度
  2. 对当前等级绘制高亮样式（比如填充箭头），其他等级绘制普通标记（比如圆点）
     核心代码示例：

  override fun onDraw(canvas: Canvas) {
      super.onDraw(canvas)
      val markSize = 20f
      val spacing = (width - paddingStart - paddingEnd) / (totalLevelCount - 1)
      val centerY = height / 2f
  
      for (level in 0 until totalLevelCount) {
          val x = paddingStart + spacing * level
          if (level == currentLevel) {
              // 绘制当前等级的箭头指示器
              val arrowPath = Path().apply {
                  moveTo(x, centerY - markSize)
                  lineTo(x + markSize, centerY)
                  lineTo(x, centerY + markSize)
                  close()
              }
              canvas.drawPath(arrowPath, highlightPaint)
          } else {
              // 绘制普通等级圆点
              canvas.drawCircle(x + markSize/2, centerY, markSize/2, normalPaint)
          }
      }
  }
  

• 布局组合方案
  用LinearLayout横向排列多个View，通过样式区分当前和后续等级：

  1. 准备两个Drawable：一个是当前等级的箭头背景，一个是普通等级的圆点背景
  2. 在布局中横向排列对应数量的View，给当前等级的View设置箭头背景，其余设置圆点背景
     布局示例片段：

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:gravity="center_vertical"
      android:paddingHorizontal="16dp">
  
      <View
          android:layout_width="20dp"
          android:layout_height="40dp"
          android:background="@drawable/current_level_arrow" />
  
      <View
          android:layout_width="16dp"
          android:layout_height="16dp"
          android:layout_marginStart="32dp"
          android:background="@drawable/normal_level_dot" />
  
      <!-- 根据等级数量重复添加普通标记View -->
  </LinearLayout>
  

内容的提问来源于stack exchange，提问作者Pramit Likhan Sarker