android 将文本置于CircularProgressIndicator的中心

mpbci0fu 于 2022-11-27 发布在 Android

关注(0)|答案(4)|浏览(164)

我尝试在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（）小部件，但它们都产生相同的结果

android

来源：https://stackoverflow.com/questions/53710583/placing-text-in-the-center-of-a-circularprogressindicator

4条答案

按热度按时间

kb5ga3dv1#

这是因为你的Stack没有大小，所以要解决你的问题，把你的Stack Package 在SizedBox里面，设置一个高度，然后Center Package 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")),
                      ],
                    ),
                  ),
                ],
              )

赞(0）回复(0）举报 2022-11-27

2vuwiymt2#

使用Positioned它们应该与Stacks一起使用。
根据文件：
定位小部件必须是堆栈的后代，并且从定位小部件到其封闭堆栈的路径必须仅包含StatelessWidgets或StatefulWidgets（而不是其他类型的小部件，如RenderObjectWidgets）。
另外，不要忘记将Stack Package 在Container或Center中，以便对盒子进行约束。

赞(0）回复(0）举报 2022-11-27

uyhoqukh3#

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

赞(0）回复(0）举报 2022-11-27

j9per5c44#

只需将其 Package 在SizedBox（）中
https://i.stack.imgur.com/fJfaL.png

赞(0）回复(0）举报 2022-11-27