logo标签列表

如何设置CircularProgressIndicator的大小?

flutter
181

我正在为我的应用程序制作一个加载屏幕。我使用的是 CircularProgressIndicator 小部件，但我想知道是否有办法使它的高度和宽度变大，因为它太小了。

所以，有人可以帮助我吗？

15个回答
255

您可以将CircularProgressIndicator包装在Center中，然后使用SizedBox定义大小：

       @override
        Widget build(BuildContext context) {
          return Container(
            child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  SizedBox(
                    child: Center(
                      child: CircularProgressIndicator()
                    ),
                    height: 200.0,
                    width: 200.0,
                  ),
                  SizedBox(
                    child: Center(
                      child: CircularProgressIndicator()
                    ),
                    height: 50.0,
                    width: 50.0,
                  ),
                  SizedBox(
                    child: Center(
                      child: CircularProgressIndicator()
                    ),
                    height: 10.0,
                    width: 10.0,
                  )
                ],
              ),
            ),
          );
5
这样做会导致圆圈显示不正确，并被盒子尺寸裁剪。 - fvisticot
65
确保您的孩子是 Center(child: CircularProgressIndicator())，否则指示器将不适合尺寸框。 - Andres Castro
1
@AndresCastro 你有没有想法为什么进度指示器必须放在一个 Center 组件内？ - Andrei
2
可以在居中或对齐，但必须有一个具有约束条件的父级。 - diegoveloper
2
将Center或Align作为您的SizedBox的父级添加 - diegoveloper
显示剩余5条评论
83
请测试您的答案。

只需将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

1
这非常有帮助，谢谢！即使您将SizedBox替换为Container，UI仍然有效！ - Ashwin Balani
它并不适用于@AshwinBalani。至少在我的情况下没有起作用，因此可以安全地得出结论，你的假设是不正确的。 - rahulserver
1
再次强调--这与SizedBox或Container无关，而且被接受的答案是错误的。如果没有对齐方式，这些小部件的大小将被忽略。Flutter终于添加了一条相关说明。https://github.com/flutter/website/issues/4992#event-4033238437 - user48956
@rahulserver，能否和我分享你的代码呢？也许我可以帮忙。 - Ashwin Balani
66

简单始终是强大的，用变换小部件来包装它

Transform.scale(
  scale: 0.5,
  child: CircularProgressIndicator(),
)
2
这个方法可行。其他解决方案会导致椭圆而不是圆形。 - Nero
这个很好用。其他解决方案可能会或可能不会起作用，这取决于您的小部件树/父小部件。 - Purvik Rana
这是完美的！ - Sajad Rahmanipour
这应该是最受欢迎的答案，因为transform保持了小部件的位置，而center小部件不保持约束的宽度和高度。 - Michael Codes
31

如果您将指示器包装在Column小部件中，则可以更好地控制其大小。这样做没有害处，但可以完成工作。 在我的情况下，我是在按钮内使用一个小型加载指示器。

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),
        ),
      ),
    ),
  ],
);
1
你绝对是正确的。这是正确的答案。 - Joseph Ofem
是的，这对我也起作用了！如果你想要一个高度最小的对话框，只需给该列添加以下属性：mainAxisSize: MainAxisSize.min - stan
我喜欢Flutter，但有时Flutter也会让人感到很烦......哈哈 - chichi
16

这是解决方案，对我起了作用

Center(
        heightFactor: 1,
        widthFactor: 1,
        child: SizedBox(
          height: 16,
          width: 16,
          child: CircularProgressIndicator(
            strokeWidth: 1.5,
          ),
        ),
      )
10
这对我有用。重要的是在进度指示器周围加上中心。
SizedBox(
  height: 16,
  width: 16,
  child: Center(
   child: CircularProgressIndicator(
    strokeWidth: 1.5,
   )
  )
),
5
这可能是有用的。
Container(
          width: 50.0,
          height: 20.0,
          child: (CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(
              Colors.green,
            ),
            backgroundColor: Colors.red,
            value: 0.2,
          ))),
2
在容器内添加对齐属性。
Container(
       alignment: Alignment.topCenter,
       child:CircularProgressIndicator()
    ),
您的回答可以通过提供额外的支持信息来改善。请[编辑]以添加更多细节，例如引用或文档，以便其他人可以确认您的回答是否正确。您可以在帮助中心找到有关如何撰写良好答案的更多信息。 - Community
1
你可以使用这个示例来更好地处理小部件指示器的显示。
SizedBox(
        height: 15.0,
        width: 15.0,
            child: Transform.scale(
              scale: 2,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                    valueColor: AlwaysStoppedAnimation<Color>(
                      Color(Colors.blue),
                ),
              ),
            ),
          ),

这将允许您更改指示器的大小并更好地在框或按钮内进行控制。
1

我能防止CircularProgressIndicator在顶部、底部、左侧和右侧被裁剪的唯一方法是将其包装在一个Padding中，并将填充设置为指示器线条宽度的一半。

  Padding(
    padding: EdgeInsets.all(5),
    child: SizedBox(
      width: 100,
      height: 100,
      child: CircularProgressIndicator(
        strokeWidth: 10,
      )
    )
  )

不确定为什么这突然成为了一个问题，之前我使用圆形进度指示器已经多年了，没有遇到过任何问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接