我该怎么改变 CircularProgressIndicator
的颜色?
颜色的值是一个 Animation<Color>
实例,但我希望有一种更简单的方法来改变颜色,而不必处理动画。
这对我有效:
CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.white))
1)使用valueColor
属性
CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
),
2) 在主MaterialApp
widget中设置accentColor
。
这是最好的方法,因为您不想在每次使用CircularProgressIndicator
widget时都设置颜色。
MaterialApp(
title: 'My App',
home: MainPAge(),
theme: ThemeData(accentColor: Colors.blue),
),
3) 使用 Theme
小部件
Theme(
data: Theme.of(context).copyWith(colorScheme: ColorScheme(
primary: Colors.red,
// You should set other properties too
)),
child: new CircularProgressIndicator(),
)
对于单一颜色组合,
CircularProgressIndicator(
valueColor:AlwaysStoppedAnimation<Color>(Colors.red),
);
用于多颜色更改/设置。
class MyApp extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyApp> with TickerProviderStateMixin {
AnimationController animationController;
@override
void dispose() {
// TODO: implement dispose
super.dispose();
animationController.dispose();
}
@override
void initState() {
super.initState();
animationController =
AnimationController(duration: new Duration(seconds: 2), vsync: this);
animationController.repeat();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Color Change CircularProgressIndicator"),
),
body: Center(
child: CircularProgressIndicator(
valueColor: animationController
.drive(ColorTween(begin: Colors.blueAccent, end: Colors.red)),
),
),
);
}
}
accentColor
可以用于小部件的前景色。它会改变所有前景小部件的颜色,包括 circularprogressbar
。使用方式如下:
void main() => runApp(
MaterialApp(
title: 'Demo App',
home: MainClass(),
theme: ThemeData(accentColor: Colors.black),
),
);
backgroundColor设置浅色,看起来像是圆形的浅色背景颜色,valueColor是加载颜色,它将在灰色背景色上显示编译加载圆圈。
CircularProgressIndicator(
backgroundColor: Colors.gray,
valueColor: AlwaysStoppedAnimation<Color>(Colors.black)
)
new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: new CircularProgressIndicator(),
);
参考资料: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d
progressIndicatorTheme
可以定义进度指示器的主题。ThemeData(
progressIndicatorTheme: ProgressIndicatorThemeData(color: Colors.white),
)
valueColor:new AlwaysStoppedAnimation<Color>(Colors.yellow),
accentColor
已被弃用,不再起作用。要在ThemeData中全局设置它,请按如下方式设置:
浅色主题:
theme: ThemeData(
colorScheme: ColorScheme.dark(
primary: Colors.pink,
),
),
暗黑主题:
theme: ThemeData(
colorScheme: ColorScheme(
primary: Colors.pink,
),
),
局部设置:
如果您只想在本地为一个小部件设置,只需像这样设置 CircularProgressIndicator
的属性:
CircularProgressIndicator(
backgroundColor:Colors.white,
valueColor: AlwaysStoppedAnimation<Color>(Colors.pink),
),
只需在您应用程序的主题数据中编写此代码
ThemeData(
progressIndicatorTheme: ProgressIndicatorThemeData(
color: Colors.grey.shade700,),)
The argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
。 - Zane Campbell