将文本放置在CircularProgressIndicator的中心

时间:2018-12-10 17:20:41

标签: android dart flutter flutter-layout

我正在尝试将文字倒数计时器放置在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()小部件可更改布局: Before

对此: After

我也尝试过

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

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

代替Align()小部件,但它们都产生相同的结果

2 个答案:

答案 0 :(得分:1)

那是因为您的Stack没有大小,因此要解决您的问题,请将Stack包裹在SizedBox内,设置高度,然后Center将{{ 1}}。

Text

答案 1 :(得分:0)

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

根据文档:

  

位置小部件必须是Stack的后代,并且从位置小部件到其封闭堆栈的路径必须仅包含StatelessWidgets或StatefulWidgets(不能包含其他类型的小部件,例如RenderObjectWidgets)。

此外,别忘了将Stack包裹在ContainerCenter中,以便在包装盒中放置约束。