flutter - 在 Flutter 中的 PageView 页面的背景颜色之间创建渐变?
问题描述
我有一个 4 页的 PageView,设置如下:
PageView(
children: [
_buildPage(color: Colors.orange[600]),
_buildPage(color: Colors.deepPurple[400]),
_buildPage(color: Colors.yellow[300]),
_buildPage(color: Colors.blue[400]),
],
),
在每个页面中,我都有一个容器,其中包含作为参数传入的颜色:
Widget _buildPage({color: Color}) {
return Container(
color: color,
...
我想拥有它,这样每当我在页面上滑动时,一个页面的颜色就会作为渐变淡入新页面的颜色。有可能这样做吗?我对 Flutter 很陌生,对此我一无所知。
编辑:这就是我希望它们的样子。
我正在添加 gfycat 链接,因为下载的 gif 播放速度太慢。
解决方案
您可以使用 aTweenSequence
在多个补间之间进行转换。结合ColorTween
定义颜色过渡。
然后你可以AnimatedBuilder
通过听你的PageController
.
class Home extends StatefulWidget {
@override
HomeState createState() {
return new HomeState();
}
}
class HomeState extends State<Home> {
PageController pageController;
Animatable<Color> background;
@override
void initState() {
_initialize();
super.initState();
}
void _initialize() {
background = TweenSequence<Color>([
TweenSequenceItem(
weight: 1.0,
tween: ColorTween(
begin: Colors.orange[600],
end: Colors.deepPurple[400],
),
),
TweenSequenceItem(
weight: 1.0,
tween: ColorTween(
begin: Colors.deepPurple[400],
end: Colors.yellow[300],
),
),
TweenSequenceItem(
weight: 1.0,
tween: ColorTween(
begin: Colors.yellow[300],
end: Colors.blue[400],
),
),
]);
pageController = PageController();
}
@override
void reassemble() {
pageController.dispose();
_initialize();
super.reassemble();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedBuilder(
animation: pageController,
builder: (context, child) {
final color = pageController.hasClients ? pageController.page / 3 : .0;
return DecoratedBox(
decoration: BoxDecoration(
color: background.evaluate(AlwaysStoppedAnimation(color)),
),
child: child,
);
},
child: PageView(
controller: pageController,
children: [
Center(child: Text("Orange")),
Center(child: Text("Purple")),
Center(child: Text("Lime")),
Center(child: Text("Blue")),
],
),
),
);
}
}
推荐阅读
- python - Tkinter 中的 Lambda
- mysql - MySQL 查询结果没有返回一些应该在结果中的行
- azure - Azure - 创建具有租户管理员权限的服务主体
- java - 无法从其他动态壁纸应用程序访问动态壁纸
- html - Django:表格模板
- c# - 如何从另一个应用程序访问 .NET Core 3.1 COM 对象?
- animation - 在透视投影动画中计算球体 2D 速度
- typescript - 构建可以丰富 Typscript 中对象的函数的最佳方法是什么
- laravel - 如何通过 laravel 中的第一级 hasMANy 获取第二级 hasMany 关系的计数
- laravel - Laravel\Socialite 的 Facebook“继续为”按钮