如何设置CircularProgressIndicator的大小？

Question

我正在尝试为我的应用程序创建一个加载屏幕,我正在使用CircularProgressIndicator小部件,但我想知道是否有办法使它的高度和宽度更大,它太小了.

那么,有人可以帮助我吗？

我会感激任何反馈.

Answer 1

你可以用你的CircularProgressIndicator一个内部SizedBox小部件

   @override
    Widget build(BuildContext context) {
      return Container(
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                child: CircularProgressIndicator(),
                height: 200.0,
                width: 200.0,
              ),
              SizedBox(
                child: CircularProgressIndicator(),
                height: 50.0,
                width: 50.0,
              ),
              SizedBox(
                child: CircularProgressIndicator(),
                height: 10.0,
                width: 10.0,
              )
            ],
          ),
        ),
      );

Answer 2

请测试您的答案。

只需将 CircularProgressIndicator 放在 SizedBox 或 Container 中：

main() =>
    runApp(
        SizedBox(width: 30, height: 30, child: CircularProgressIndicator()));

... 仍然会导致 CircularProgressIndicator 填充可用空间。SizedBox 不限制 CircularProgressIndicator（这似乎是 Flutter 中的一个错误）。

但是，用 Center 包装它会使其工作：

main() =>
    runApp(Center(child: 
        SizedBox( width: 30, height: 30, child: CircularProgressIndicator())));

我在 Github 上抱怨了这种令人困惑的行为。Flutter 团队通过新文档做出了有益的回应，解释说如果无法确定小部件的对齐方式，则可能会忽略其所需的大小。

https://github.com/flutter/website/pull/5010/commits/3070c777a61b493b46cdde92fa7afc21de7adf25

Answer 3

这是解决方案，对我有用

Center(
        heightFactor: 1,
        widthFactor: 1,
        child: SizedBox(
          height: 16,
          width: 16,
          child: CircularProgressIndicator(
            strokeWidth: 1.5,
          ),
        ),
      )

Answer 4

如果你用ColumnWidget包裹它，你可以更好地控制指示器的大小。它不会受到伤害，但可以完成工作。在我的情况下是在按钮内使用一个小的加载指示器。

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Center(
      child: Container(
        height: 20,
        width: 20,
        margin: EdgeInsets.all(5),
        child: CircularProgressIndicator(
          strokeWidth: 2.0,
          valueColor : AlwaysStoppedAnimation(Colors.white),
        ),
      ),
    ),
  ],
);

Answer 5

简单总是强大的，用转换小部件包装它

Transform.scale(
  scale: 0.5,
  child: CircularProgressIndicator(),
)

Answer 6

这对我有用。重要的是围绕进度指示器包裹一个中心

SizedBox(
  height: 16,
  width: 16,
  child: Center(
   child: CircularProgressIndicator(
    strokeWidth: 1.5,
   )
  )
),

Answer 7

这可能有用

Container(
          width: 50.0,
          height: 20.0,
          child: (CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(
              Colors.green,
            ),
            backgroundColor: Colors.red,
            value: 0.2,
          ))),