我正在为我的应用程序制作一个加载屏幕。我使用的是 CircularProgressIndicator
小部件,但我想知道是否有办法使它的高度和宽度变大,因为它太小了。
所以,有人可以帮助我吗?
我正在为我的应用程序制作一个加载屏幕。我使用的是 CircularProgressIndicator
小部件,但我想知道是否有办法使它的高度和宽度变大,因为它太小了。
所以,有人可以帮助我吗?
您可以将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,
)
],
),
),
);
只需将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
简单始终是强大的,用变换小部件来包装它
Transform.scale(
scale: 0.5,
child: CircularProgressIndicator(),
)
transform
保持了小部件的位置,而center
小部件不保持约束的宽度和高度。 - Michael Codes如果您将指示器包装在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),
),
),
),
],
);
这是解决方案,对我起了作用
Center(
heightFactor: 1,
widthFactor: 1,
child: SizedBox(
height: 16,
width: 16,
child: CircularProgressIndicator(
strokeWidth: 1.5,
),
),
)
SizedBox(
height: 16,
width: 16,
child: Center(
child: CircularProgressIndicator(
strokeWidth: 1.5,
)
)
),
Container(
width: 50.0,
height: 20.0,
child: (CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Colors.green,
),
backgroundColor: Colors.red,
value: 0.2,
))),
Container(
alignment: Alignment.topCenter,
child:CircularProgressIndicator()
),
SizedBox(
height: 15.0,
width: 15.0,
child: Transform.scale(
scale: 2,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(
Color(Colors.blue),
),
),
),
),
我能防止CircularProgressIndicator
在顶部、底部、左侧和右侧被裁剪的唯一方法是将其包装在一个Padding
中,并将填充设置为指示器线条宽度的一半。
Padding(
padding: EdgeInsets.all(5),
child: SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
strokeWidth: 10,
)
)
)
不确定为什么这突然成为了一个问题,之前我使用圆形进度指示器已经多年了,没有遇到过任何问题。