我有一个包含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还是很陌生,至今还找不到任何东西。
编辑:这就是我希望它们的外观。
Swiping across quickly.
And slowly.
我正在添加gfycat链接,因为下载的gif播放速度太慢。
答案 0 :(得分:4)
您可以使用TweenSequence
在多个补间之间切换。与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")),
],
),
),
);
}
}