Zef*_*ndo 3 flutter flutter-animation
我使用Tween[Color]、NotificationListener[ScrollNotification]和 Appbar制作简单的动画来改变 Appbar 的颜色。我想在这种情况下滚动屏幕时更改颜色 Appbar 和操作图标:
if (notification.metrics.pixels == notification.metrics.minScrollExtent) {
Future.delayed(Duration(seconds: 0), () => controllerAppbar.reverse());
} else {
Future.delayed(Duration(seconds: 0), () => controllerAppbar.forward());
}
Run Code Online (Sandbox Code Playgroud)
当我滚动屏幕并达到两个条件时,我收到此错误,但我得到了我想要的结果。
???????? Exception caught by widgets library ???????????????????????????????????
Class 'Color' has no instance method '-'.
Receiver: Instance of 'Color'
Tried calling: -(Instance of 'Color')
The relevant error-causing widget was
AnimatedBuilder
Run Code Online (Sandbox Code Playgroud)
我怎么修?
class AppBarAnimationColor extends StatefulWidget {
final Duration duration;
final AnimationController appBarAnimationController;
AppBarAnimationColor({
@required this.appBarAnimationController,
this.duration = const Duration(seconds: 1),
});
@override
AppBarAnimationColorState createState() => AppBarAnimationColorState();
}
class AppBarAnimationColorState extends State<AppBarAnimationColor>
with SingleTickerProviderStateMixin {
Animation<Color> appbarColor, iconColor;
@override
void initState() {
super.initState();
appbarColor = Tween<Color>(begin: Colors.transparent, end: colorPallete.primaryColor)
.animate(widget.appBarAnimationController);
iconColor = Tween<Color>(begin: colorPallete.primaryColor, end: colorPallete.white)
.animate(widget.appBarAnimationController);
}
@override
void dispose() {
widget.appBarAnimationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: appbarColor,
builder: (_, __) => AppBar(
actions: [
IconButton(
icon: Icon(FontAwesomeIcons.bars),
onPressed: () => '',
color: iconColor.value,
)
],
elevation: 0,
backgroundColor: appbarColor.value,
),
);
}
}
Run Code Online (Sandbox Code Playgroud)
class _WelcomeScreenState extends State<WelcomeScreen>
with TickerProviderStateMixin {
AnimationController _appbarAnimationController;
@override
void initState() {
super.initState();
_appbarAnimationController =
AnimationController(vsync: this, duration: kThemeAnimationDuration);
}
@override
void dispose() {
_appbarAnimationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return NotificationListener<ScrollNotification>(
onNotification: (notification) => commonF.handleScrollNotification(
notification,
controllerAppbar: _appbarAnimationController,
),
child: SafeArea(
child: Scaffold(
extendBodyBehindAppBar: true,
body: Stack(
fit: StackFit.expand,
children: [
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(height: 1000),
],
),
),
Positioned(
child: AppBarAnimationColor(
appBarAnimationController: _appbarAnimationController,
),
top: 0,
left: 0,
right: 0,
),
],
)
),
),
);
}
}
Run Code Online (Sandbox Code Playgroud)
bool handleScrollNotification(
ScrollNotification notification, {
AnimationController controllerAppbar,
}) {
if (notification.metrics.pixels == notification.metrics.minScrollExtent) {
Future.delayed(Duration(seconds: 0), () => controllerAppbar.reverse());
} else {
Future.delayed(Duration(seconds: 0), () => controllerAppbar.forward());
}
return false;
}
Run Code Online (Sandbox Code Playgroud)
您正在使用 Tween,而不是使用 ColorTween。Tween 用于值更改,如 int、float。
appbarColor = ColorTween(begin: Colors.transparent, end: colorPallete.primaryColor)
.animate(widget.appBarAnimationController);
iconColor = ColorTween(begin: colorPallete.primaryColor, end: colorPallete.white)
.animate(widget.appBarAnimationController);
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
801 次 |
| 最近记录: |