将文本放置在 CircularProgressIndicator 的中心

Question

我正在尝试将文本倒计时器放置在 CircularProgressIndicator 的中心。这是主体布局的代码：

return new Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Stack(
      children: <Widget>[
        Container(
          width: 200,
          height: 200,
          child: new CircularProgressIndicator(
            strokeWidth: 15,
            value: value,
          ),
        ),
        Align(
          alignment: FractionalOffset.center,
          child: Text("Test")
        )
      ],
    ),
    ...
  ],
);

添加 Align() 小部件会改变布局：

对此：

我也尝试过

Align(
  alignment: Alignment.center,
  child: Text("Test")
)

和

Center(
  child: Text("Test"),
)

而不是 Align() 小部件，但它们都产生相同的结果

Answer 1

那是因为你的

Stack

没有尺寸，为了解决你的问题，将你的

Stack

包裹在

SizedBox

里面，设置一个高度，然后

Center

Text

。

Column(
  children: <Widget>[
    SizedBox(
      height: 200.0,
      child: Stack(
        children: <Widget>[
          Center(
            child: Container(
              width: 200,
              height: 200,
              child: new CircularProgressIndicator(
                strokeWidth: 15,
                value: 1.0,
              ),
            ),
          ),
          Center(child: Text("Test")),
        ],
      ),
    ),
  ],
)

Answer 2

使用

Positioned

它们应与

Stacks

一起使用。

根据文档：

Positioned widget 必须是 Stack 的后代，并且从 Positioned widget 到其封闭 Stack 的路径必须仅包含 StatelessWidgets 或 StatefulWidgets（不能包含其他类型的 widgets，如 RenderObjectWidgets）。

另外，不要忘记将

Stack

包裹在

Container

或

Center

内，以便对盒子施加约束。

Answer 3

Column(
  children: <Widget>[
    SizedBox(
      height: 40,
      child: Stack(
        children: <Widget>[
          Container(
            width: 40,
            height: 40,
            child:
                new CircularProgressIndicator(
              value: 10,
              color: Colors.red,
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            top: 15,
            child: Text(
              bytesDownload!,
              textAlign:
                  TextAlign.center,
              style: TextStyle(
                fontSize: 10,
              ),
            ),
          ),
        ],
      ),
    ),
  ],
);

Answer 4

内部带有文本的圆形进度条的正确版本（2023，Flutter 3.16.0）

  Widget _circularProgressWithText({required int percentage, String? text}) {
    var value = percentage / 100.0;
    var size = 42.0;
    
    text ??= '$percentage%';

    return Stack(
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        Center(
          child: SizedBox(
            width: size,
            height: size,
            child: CircularProgressIndicator(
              strokeWidth: 3,
              value: value,
            ),
          ),
        ),
        Center(child: Text(text)),
      ],
    );
  }

Answer 5

只需将其包裹在 SizedBox() 中