将文本置于 CircularProgressIndicator 的中心

Question

我正在尝试在 CircularProgressIndicator 的中心放置一个文本倒数计时器。这是body布局的代码：

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