如何将大小设置为 CircularProgress 指示器？

小开

最佳答案

您可以将 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,
)
],
),
),
);

小开

这个可能有用

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

小开

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

小开

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

小开

请测试你的答案。

只需将 CircularProgress 指示符放在 SizedBox 或容器中:

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

... 仍然导致循环进步指标填补可用的空间。SizedBox 不约束 CircularProgressIndicator (这看起来像是 Flutter 中的 bug)。

然而，用 Center 包装它将使其工作:

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

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

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

小开

这就是解决方案，对我很有效

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

小开

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

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

小开

唯一的方法，我可以防止被剪裁的 CircularProgressIndicator从顶部，底部，左边和右边是通过包装它在一个 Padding与填充设置为一半的行程宽度的指示器。

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

虽然不知道为什么这突然成了一个问题，但是我已经使用循环进度指标很多年了，以前从来没有出现过问题。

小开

这对我来说很有效，重要的是在进度指示器周围包围一个中心

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

小开

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

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

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

小开

在 Container 中添加对齐属性

Container(
alignment: Alignment.topCenter,
child:CircularProgressIndicator()
),

小开

您应该为 Container 或 SizedBox 提供与高度相同的宽度。如果宽度和高度不同，CircularProgressIndicator 将变成椭圆。

只有在需要调整大小的自定义时，容器才更可取。

 const SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
color: Colors.blue,
strokeWidth: 10,
),
),

或者

   const Container(
width: 100,
height: 100,
decoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.amber),
child: const CircularProgressIndicator(
color: Colors.red,
strokeWidth: 20,
),
)

小开

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

您还可以为 CircularProgress 指示器和其他一些属性设置颜色。