根据圆圈均匀间隔，忽略文本占用的空间答案

【问题标题】：Space this evenly according to the circles, ignoring the space taken up by the text根据圆圈均匀间隔，忽略文本占用的空间
【发布时间】：2021-02-05 00:18:17
【问题描述】：

我在颤振中有这个 widge

我使用进度条是因为最终会有进度，这是一个例子

class MyWidget extends StatelessWidget {
  const MyWidget({
    Key key,
  }) : super(key: key);

  final double containersWidth = 510;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: containersWidth,
      padding: EdgeInsets.only(top: 12.0),
      child: Stack(
        children: [
          Positioned(
            top: 14.0,
            width: containersWidth,
            child: LinearProgressIndicator(
              value: 0,
              backgroundColor: Colors.amberAccent,
              minHeight: 3,
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.redAccent),
            ),
          ),
          Container(
            width: containersWidth,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _Circle(),
                _Circle(),
                _Circle(),
                _Circle(),
                _Circle(),
                _Circle(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _Circle extends StatelessWidget {
  const _Circle({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 30.0,
          height: 30.0,
          decoration: new BoxDecoration(
            color: Colors.amberAccent,
            shape: BoxShape.circle,
          ),
        ),
      ],
    );
  }
}

这会产生一个像这样的布局，这很好

现在，我需要在每个圆圈下添加一个标签，但要保持与图像相同的空间，但是当我这样做时，

class _Circle extends StatelessWidget {
  const _Circle({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 30.0,
          height: 30.0,
          decoration: new BoxDecoration(
            color: Colors.amberAccent,
            shape: BoxShape.circle,
          ),
        ),
        Text('example')
      ],
    );
  }
}

容器的宽度增加了，由于空间是从容器的中心开始计算的，所以我得到了这样的东西

我需要像第一张图片中那样放置圆圈，以及圆圈下方的标签，居中，但不计入容器宽度的一部分。

我尝试使用 Positioned 来包装标签，但它不起作用，因为溢出是隐藏的，而且我无法定位以圆圈为中心的文本。非常感谢任何帮助。

编辑：

这是使用定位时的样子

使用以下代码

class _Circle extends StatelessWidget {
  const _Circle({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: 30.0,
          height: 30.0,
          decoration: new BoxDecoration(
            color: Colors.amberAccent,
            shape: BoxShape.circle,
          ),
        ),
        Positioned(
          top: 14,
            child: Text('example')
        )
      ],
    );
  }
}

溢出是隐藏的，此外，我不知道如何使文本相对于堆栈（和圆圈）居中

我在想我必须使用 SizedOverflow 框，我会看看我能不能弄明白

【问题讨论】：

标签： flutter widget flutter-layout

【解决方案1】：

我能够像这样解决它

class MyWidget extends StatelessWidget {
  const MyWidget({Key key}) : super(key: key);

  final double containersWidth = 510;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 30,
      alignment: Alignment.center,
      width: containersWidth,
      padding: EdgeInsets.only(top: 12.0),
      child: Stack(
        //mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          LinearProgressIndicator(
            value: 0,
            backgroundColor: Colors.yellowAccent,
            minHeight: 3,
            valueColor: new AlwaysStoppedAnimation<Color>(Colors.yellowAccent),
          ),
          Container(
            // color: Colors.redAccent.withAlpha(100),
            width: containersWidth,
            child:  Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _Circle(),
                _Circle(),
                _Circle(),
                _Circle(),
                _Circle(),
                _Circle(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _Circle extends StatelessWidget {    
  const _Circle({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedOverflowBox(
      size: Size(30, 47.3),
      child: Column(
        children: [
          Container(
            width: 30.0,
            height: 30.0,
            decoration: new BoxDecoration(
              color: Colors.yellowAccent,
              shape: BoxShape.circle,
            ),
          ),
          SizedBox(height: 4.3,),
          Text("example"),
        ],
      ),
    );
  }
}

如果我的代码有问题，请告诉我

这是结果

【讨论】：