Flutter 带有里程碑/步骤分隔符的循环式进度指示器（例如1/3、2/3、3/3）

你好，弗利特社区

我要创建此自定义CircularProgressIndicator：

对于文本，我构建了一个堆栈：

堆栈(
儿童：[
容器(
身高：75.0，
宽度：75.0，
子对象：循环压缩机指示器(
冲程宽度：6.0，
背景颜色：颜色。来自RGBO（230、230、230、1.0），
valueColor:始终停止动画(
颜色。来自RGBO（252,90,73,1.0）），
数值：0.4，
),
),
定位(
子：容器(
身高：75.0，
宽度：75.0，
儿童：中心(
儿童：文本（“第2页，共6页”），
),
),
),
],
),

我想画六条线，从中心到终点旋转+60°（步数/360°），但我不知道怎么做

有没有一种优雅的方式来实现这一点

来自德国的欢呼声

编辑（1）： 我找到了一个解决方案，但我不满意：

堆叠(
儿童：[
容器(
身高：75.0，
宽度：75.0，
子对象：循环压缩机指示器(
冲程宽度：6.0，
背景颜色：颜色。来自RGBO（230、230、230、1.0），
valueColor:始终停止动画(
颜色。来自RGBO（252,90,73,1.0）），
价值：2/6，
),
),
定位(
身高：75.0，
宽度：75.0，
儿童：中心(
孩子：定制油漆(
画家：拉丝镭线(
金额：6，
厚度：4，
长度：75，
颜色：颜色。白色），
),
),
),
定位(
子：容器(
身高：75.0，
宽度：75.0，
儿童：中心(
儿童：文本（“第2页，共6页”），
),
),
),
],
),

这一类的拉丝半径：

class DrawRadialLines扩展了CustomPainter{
油漆；
最终双层厚度；
最终双倍金额；
最终双倍长度；
最终颜色；
DrawRadialLines（{this.this.this.amount，this.length，this.color}）{
_油漆=油漆（）
…颜色=这个
..冲程宽度=此厚度
..strokeCap=strokeCap.round；
}
@凌驾
空心油漆（帆布，尺寸）{
最终双冲程厚度=厚度；
最终双旋转直线=360/数量；
最终双倍长度=长度/2+冲程厚度；
canvas.rotate（-90*（3.1415926/180））；//旋转使其从顶部开始
对于（int i=0；i

它将输出以下内容：

---

但是，还有更优雅的解决方案吗？

您可以向新的

堆栈添加分隔符，如下所示：

首先，将
alignmentdirective.center
添加到堆栈中，并将新堆栈添加到现有堆栈中

Stack(
  alignment: AlignmentDirectional.center,
  children: [
    Container(
      height: 75.0,
      width: 75.0,
      child: CircularProgressIndicator(
        strokeWidth: 6.0,
        backgroundColor: Color.fromRGBO(230, 230, 230, 1.0),
        valueColor: AlwaysStoppedAnimation<Color>(Color.fromRGBO(252, 90, 73, 1.0)),
        value: 0.4,
      ),
    ),
    Positioned(
      child: Container(
        height: 75.0,
        width: 75.0,
        child: Center(
          child: Text("2 of 6"),
        ),
      ),
    ),
    Stack(
      children: buildSeparators(6),
    ),
  ],
),

这是可以改进的，但这就是想法

List<Widget> buildSeparators(int nbSeparators) {
  var sep = <Widget>[];
  for (var i = 0; i < nbSeparators; i++) {
    sep.add(
      Transform.rotate(
        angle: i * 1 / nbSeparators * 2 * pi,
        child: Container(
          width: 10,
          height: 81,
          child: Column(
            children: <Widget>[
              Container(
                width: 8,
                height: 10,
                color: Colors.white,
              )
            ],
          ),
        ),
      ),
    );
  }
  return sep;
}