我正在尝试创建一个 flutter 应用程序,其中背景图像根据来自 API 的数据而变化。我编写了以下代码以使用 AnimationController
使屏幕淡入。和 Animation
double ,但是每当我尝试加载应用程序时,我得到的只是黑屏。
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() => runApp(RootWidget());
class RootWidget extends StatefulWidget {
@override
_RootWidgetState createState() => _RootWidgetState();
}
class _RootWidgetState extends State<RootWidget> with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_animation =
Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeOut
));
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
home: AnimatedOpacity(
opacity: _animation.value,
duration: Duration(milliseconds: 1000),
child: Scaffold(
appBar: AppBar(
title: Text('Vuetiful Mobile'),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/Sunny-photo.jpg'),
fit: BoxFit.cover
)
),
child: Container(
color: Color.fromARGB(100, 0, 0, 0),
child: Center(
child: Text('Temp', style: TextStyle(color: Colors.white))
)
)
),
),
),
);
}
}
最佳答案
您应该选择使用 AnimationController
或 AnimatedOpacity
小部件,但不是两者兼而有之。AnimatedOpacity
已经是 opacity 的动画版本,因此向其中添加 Controller 并不能满足您的要求;它自己处理所有必要的动画逻辑。您只需要提供一个不透明度,它就会在给定的持续时间和给定的曲线上对其进行动画处理。
可能更简单的解决方案是坚持使用 AnimatedOpacity
并摆脱 Controller 。然后使用后帧回调设置不透明度值:
class _RootWidgetState extends State<RootWidget> {
double opacity = 0;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
opacity = 1;
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
home: AnimatedOpacity(
opacity: opacity,
curve: Curves.easeOut,//Add your curve here
duration: Duration(milliseconds: 1000),//Set your desired duration
child: Scaffold(
appBar: AppBar(
title: Text('Vuetiful Mobile'),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/Sunny-photo.jpg'),
fit: BoxFit.cover
)
),
child: Container(
color: Color.fromARGB(100, 0, 0, 0),
child: Center(
child: Text('Temp', style: TextStyle(color: Colors.white))
)
)
),
),
),
);
}
}
这个解决方案也最终变得更有效率,因为 flutter 不必为每个滴答重建尽可能多的东西。或者,您可以保留
AnimationController
并更改 AnimatedOpacity
至Opacity
:class _RootWidgetState extends State<RootWidget> with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
_controller.addListener(() {
setState((){});
});
_controller.forward();
_animation =
Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeOut
));
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.green),
home: Opacity(
opacity: _animation.value,
child: Scaffold(
appBar: AppBar(
title: Text('Vuetiful Mobile'),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/Sunny-photo.jpg'),
fit: BoxFit.cover
)
),
child: Container(
color: Color.fromARGB(100, 0, 0, 0),
child: Center(
child: Text('Temp', style: TextStyle(color: Colors.white))
)
)
),
),
),
);
}
}
关于Flutter淡入淡出动画总是显示黑屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63161035/