如何将小圆圈均匀地对齐成一个大圆圈？

Question

我已经制作了一个大的圆形容器，现在我想将不同的小圆形容器同样地对齐。 我怎么能做到这一点而不一直调整位置？ 有没有更好的方法，即使我改变小圆圈的大小，位置也保持不变？

这是一段代码：

return Material(
        color: Colors.black,
        child: Center(
          child: Stack(
            textDirection: TextDirection.ltr,
            children: [
              DialBottomCircle,
              Positioned(
                //maybe as buttons
                child: CircleNumbers(
                  textNumber: '0',
                ),
                bottom: 0,
                top: 260.0,
                left: 245.0,
              ),
              Positioned(
                  child: CircleNumbers(
                    textNumber: '9',
                  ),
                  bottom: -70.0,
                  top: 225.0,
                  left: 175.0),

Answer 1

使用CustomMultiChildLayout ，如下所示：

  @override
  Widget build(BuildContext context) {
    var numbers = List.generate(10, (index) => '$index');
    return Material(
      shape: CircleBorder(),
      color: Colors.red,
      child: CustomMultiChildLayout(
        delegate: FooDelegate(numbers.length),
        children: [
          for (var i = 0; i < numbers.length; i++)
            LayoutId(
              id: i,
              child: Material(
                elevation: 4,
                color: Colors.white,
                shape: CircleBorder(),
                clipBehavior: Clip.antiAlias,
                child: InkWell(
                  splashColor: Colors.orange,
                  onTap: () => print('${numbers[i]} pressed'),
                  child: FittedBox(
                    child: Text(numbers[i]),
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  );

class FooDelegate extends MultiChildLayoutDelegate {
  final int numChildren;

  FooDelegate(this.numChildren);

  @override
  void performLayout(Size size) {
    final s = Size.square(size.shortestSide / 6.5);
    final radius = (size.shortestSide - s.shortestSide) * 0.45;
    final childConstraints = BoxConstraints.tight(s);
    final delta = ((size - s) as Offset) / 2;
    for (var i = 0; i < numChildren; i++) {
      layoutChild(i, childConstraints);
      var angle = i * math.pi / 6;
      var offset = Offset(math.cos(angle), math.sin(angle)) * radius;
      positionChild(i, offset + delta);
    }
  }

  @override
  bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) => true;
}