Question

我正在尝试为我的应用程序创建加载屏幕，正在使用CircularProgressIndicator小部件，但是我想知道是否有办法使它的高度和宽度变大，但它太小了。 / p>

那么，有人可以帮我吗？

我将不胜感激。

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或容器中：

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上出现这种令人困惑的行为。颤振团队对新文档的回答很有帮助，解释说如果无法确定小部件的对齐方式，则可以忽略小部件的所需大小。

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

Answer 3

如果使用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),
        ),
      ),
    ),
  ],
);

Answer 4

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

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

Answer 5

这是对我有用的解决方案

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

Answer 6

这可能有用

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

Answer 7

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

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

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

Answer 8

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

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

Answer 9

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

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

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

Answer 10

版本：

implementation 'com.google.android.material:material:1.5.0-alpha01'

您可以使用以下属性设置大小：

app:indicatorSize="180dp"
app:trackThickness="10dp"

完整的 xml 项目将类似于：

<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:indicatorSize="180dp"
    app:trackThickness="10dp"
    app:trackColor="@color/colorPrimary"
    app:indicatorColor="@color/colorPrimaryDark"
    android:layout_gravity="center_horizontal"
    android:progress="80"
    app:trackCornerRadius="8dp"
    android:layout_marginTop="30dp"/>

请注意：您需要将 XML Display Theme 设置为“MeterialTheme”才能看到 UI 更新。

Answer 11

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

如何设置CircularProgressIndicator的大小？

11 个答案: