将文本置于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() 小部件外，还有其他小部件可用，但它们都会产生相同的结果。

- Kornel

Answer 1

这是因为你的Stack没有尺寸，因此为了解决问题，请将你的Stack包装在SizedBox中，设置一个高度，并Center文本。

    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")),
                      ],
                    ),
                  ),
                ],
              )

- diegoveloper

Answer 2

使用Positioned，它们应该与Stacks一起使用。

根据文档：

一个 Positioned widget 必须是 Stack 的子孙节点，并且从 Positioned widget 到其封闭的 Stack 的路径必须仅包含 StatelessWidgets 或 StatefulWidgets（不包括其他类型的 widgets，如 RenderObjectWidgets）。

此外，不要忘记将您的 Stack 包装在 Container 或 Center 中，以便对框施加约束。

- Daksh Gargas

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,
                                                  ),
                                                )),
                                          ],
                                        ),
                                      ),
                                    ],
                                  )

- kamran khan

---

回答需要提供更多的支持信息。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认您的答案是否正确。您可以在帮助中心找到关于如何撰写好答案的更多信息。 - undefined

回答需要支持信息 您的回答可以通过提供更多的支持信息来改进。请[编辑]以添加进一步的细节，例如引用或文档，以便他人可以确认您的回答是否正确。您可以在帮助中心找到关于如何撰写良好回答的更多信息。 - moken

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)),
      ],
    );
  }

- yuralife

Answer 5

只需将其包装在SizedBox()中

https://istack.dev59.com/fJfaL.webp

- Aryan Agrawal