如何将一些小部件添加到 Flutter 行中的兄弟姐妹的 position

Question

我正在尝试制作一个类似于百分比指标但以离散方式的离散进度指标。

我想在当前进度 position 的 position 处添加一些指南小部件或箭头，类似于图像。 （实际上并没有实现，它是小部件检查器的视图，但我想获得该图像的结果，即行的顶部或底部。）

但是，问题是，我怎样才能获得该行的子小部件的 position 并添加一些堆叠的小部件？

class LinearDiscreteIndicator extends StatelessWidget {
  final int numTotal;
  final int numCurrent;
  final double? width;
  final double lineHeight;
  final double margin;
  final Color fillColor;
  final Color emptyColor;
  final Radius barRadious;
  final MainAxisAlignment alignment;
  final Widget? progressWidget;

  const LinearDiscreteIndicator({
    Key? key,
    required this.numTotal,
    required this.numCurrent,
    this.width,
    required this.lineHeight,
    this.margin = 2,
    this.fillColor = Colors.blue,
    this.emptyColor = Colors.grey,
    this.barRadious = const Radius.circular(2),
    this.alignment = MainAxisAlignment.start,
    this.progressWidget,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        SizedBox(
          height: lineHeight,
          width: width,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: alignment,
            children: List.generate(numTotal, (index) => index)
                .map(
                  (e) => Expanded(
                    child: Padding(
                      padding: EdgeInsets.only(
                        right: e == (numTotal - 1) ? 0 : margin,
                      ),
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(barRadious),
                          color: e > numCurrent ? emptyColor : fillColor,
                        ),
                      ),
                    ),
                  ),
                )
                .toList(),
          ),
        ),
      ],
    );
  }
}

这是我当前的小部件 class 代码，但我不确定如何在当前进度的 position 处启用类似工具提示的小部件。

Answer 1

position = ((item width + margin) * numCurrent ) - (item width/2)

注意：-（项目宽度/2）用于获取 numCurrent 小部件的中心