如何将大小设置为 CircularProgressIndicator？

Posted 2023-02-23

【中文标题】如何将大小设置为 CircularProgressIndicator？

【英文标题】：How to set size to CircularProgressIndicator?

【发布时间】：2019-01-24 20:24:01

【问题描述】：

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

那么，有人可以帮我解决这个问题吗？

【参考方案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,
              )
            ],
          ),
        ),
      );

【讨论】：

这样做，圆圈没有正确显示，并被裁剪为 Box 尺寸。

确保您的孩子是 Center(child: CircularProgressIndicator()) 否则指标将不适合尺寸框。

@AndresCastro 你知道为什么进度指示器必须在 Center 小部件内吗？

可以在 Center 或 Align 中，但它应该有一个有约束的父级

添加 Center 或 Align 作为 SizedBox 的父级

【参考方案2】：

请测试你的答案。

只需将 CircularProgressIndicator 放置在 SizedBox 或容器中：

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

【讨论】：

这非常有帮助，谢谢！即使您将 SizedBox 替换为 Container，UI 也可以正常工作！

它不是@AshwinBalani。至少在我的情况下不起作用，因此可以安全地得出结论，您的假设不正确。

再说一遍——它与 SizedBox 或 Container 无关，并且接受的答案是不正确的。如果没有对齐，这些小部件的大小将被忽略。 Flutter终于添加了关于它的注释。 github.com/flutter/website/issues/4992#event-4033238437

@rahulserver 你能分享你的代码伙伴吗？也许我可以帮忙

【参考方案3】：

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

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

【讨论】：

这行得通。其他解决方案会生成椭圆而不是圆形。

这很好用。其他解决方案可能有效也可能无效，具体取决于您的小部件树/父小部件。

【参考方案4】：

如果你用Column Widget 包裹它，你可以更好地控制指标的大小。它没有伤害，但可以完成工作。就我而言，是在按钮内使用小型加载指示器。

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

【讨论】：

你绝对是对的。这是正确答案

是的，这也对我有用！如果你想在高度方面有一个最小的对话框，只需给列这个附加属性：mainAxisSize: MainAxisSize.min

【参考方案5】：

这可能很有用

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

【参考方案6】：

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

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

【参考方案7】：

这是对我有用的解决方案

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

【参考方案8】：

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

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

不知道为什么这突然成为一个问题，我多年来一直在使用循环进度指示器，之前没有任何问题。

【参考方案9】：

您可以使用此示例更好地处理小部件指示器显示。

SizedBox(
        height: 15.0,
        width: 15.0,
            child: Transform.scale(
              scale: 2,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                    valueColor: AlwaysStoppedAnimation<Color>(
                      Color(Colors.blue),
                ),
              ),
            ),
          ),

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

【参考方案10】：

bool isLoading = false;

Widget build(BuildContext context) 
  return isLoading
    ? _loadingIndicator()
    : FlatButton.icon(
    icon: Icon(Icons.arrow_forward),
    label: Text('Go to'),
    onPressed: () async 
      setState(() => isLoading = true);
      // Async code ---> Then
      setState(() => isLoading = false);
    ,
  );


Widget _loadingIndicator() 
  return Padding(
    padding: EdgeInsets.symmetric(vertical: 12.0),
    child: SizedBox(
      child: CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
        strokeWidth: 3.0,
      ),
      height: 25.0,
      width: 25.0,
    ),
  ) ;

【讨论】：

请描述一下你的答案。