页面浏览之间的淡入淡出动画 [英] Flutter fade animation between page views
本文介绍了页面浏览之间的淡入淡出动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图找到如何在PageView页面之间淡入淡出.
这是我的pageView:
PageView(控制器:控制器，孩子们: [容器(装饰:BoxDecoration(图片:DecorationImage(图片:AssetImage("assets/image4.jpg")，适合:BoxFit.cover)，)，孩子:中心(子代:文字('myText'，样式:TextStyle(颜色:Colors.white，fontSize:40.0)，))，)，容器(装饰:BoxDecoration(图片:DecorationImage(图片:AssetImage("assets/image2.jpg")，适合:BoxFit.cover)，)，孩子:中心(子代:文字('myText'，样式:TextStyle(颜色:Colors.white，fontSize:40.0)，))，)，容器(装饰:BoxDecoration(图片:DecorationImage(图片:AssetImage("assets/image3.jpg")，适合:BoxFit.cover)，)，孩子:中心(子代:文字('myText'，样式:TextStyle(颜色:Colors.white，fontSize:40.0)，))，)，]，)， 是否可以实现淡入淡出过渡?我搜索了堆栈溢出，但是我唯一能找到的就是这个包:
完整代码
import'package:flutter/material.dart';导入'package:smooth_page_indicator/smooth_page_indicator.dart';导入'package:transformer_page_view/transformer_page_view.dart';ScaleAndFadeTransformer类扩展了PageTransformer {最终双倍缩放；最后的双淡入淡出；ScaleAndFadeTransformer({双倍渐变:0.3，双倍比例:0.8}):_fade =淡入淡出，_scale =比例;@override窗口小部件转换(窗口小部件项，TransformInfo信息){双重位置= info.position;double scaleFactor =(1-position.abs())*(1-_scale);double fadeFactor =(1-position.abs())*(1-_fade);双重不透明度= _fade + fadeFactor;双倍比例= _scale + scaleFactor;返回新的不透明度(不透明度:不透明度，子级:new Transform.scale(规模:规模，子:项目，)，);}}void main(){runApp(MyApp());}MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回MaterialApp(标题:"Flutter演示"，主题:ThemeData(primarySwatch:Colors.blue，visualDensity:VisualDensity.adaptivePlatformDensity，)，主页:MyHomePage(标题:"Flutter演示首页")，);}}类MyHomePage扩展了StatefulWidget {MyHomePage({Key key，this.title}):超级(key:key);最终的字符串标题；@override_MyHomePageState createState()=>_MyHomePageState();}类_MyHomePageState扩展State< MyHomePage>{TransformerPageController控制器= TransformerPageController();@override窗口小部件build(BuildContext context){返回脚手架(appBar:AppBar(标题:文本(widget.title)，)，身体:中心(子:列(mainAxisAlignment:MainAxisAlignment.center，子代:< Widget> [展开(弹性:5子代:TransformerPageView.children(pageController:控制器，变压器:ScaleAndFadeTransformer()，孩子们: [容器(装饰:BoxDecoration(图片:DecorationImage(图像:NetworkImage('https://picsum.photos/250?image=9')，适合:BoxFit.cover)，)，孩子:中心(子代:文字('myText'，样式:TextStyle(颜色:Colors.white，fontSize:40.0)，))，)，容器(装饰:BoxDecoration(图片:DecorationImage(图片:NetworkImage('https://picsum.photos/250?image=10')，适合:BoxFit.cover)，)，孩子:中心(子代:文字('myText'，样式:TextStyle(颜色:Colors.white，fontSize:40.0)，))，)，容器(装饰:BoxDecoration(图片:DecorationImage(图片:NetworkImage('https://picsum.photos/250?image=11')，适合:BoxFit.cover)，)，孩子:中心(子代:文字('myText'，样式:TextStyle(颜色:Colors.white，fontSize:40.0)，))，)，]，)，)，展开(弹性:1，子级:SmoothPageIndicator(控制器:控制器，//PageController数:3，效果:WormEffect()，//您首选的效果)，)]，)，)，);}} I'm trying to find how to fade between PageView pages.
This is my pageView:
PageView(
controller: controller,
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image4.jpg"),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image2.jpg"),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image3.jpg"),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
],
),
Is it possible to implement a fade transition? I searched stack overflow but the only thing I could find was this package: https://pub.dev/packages/transformer_page_view#-readme-tab-
The problem is that it hasn't a controller so my smoothPageIndactor wouldn't work. (https://pub.dev/packages/smooth_page_indicator)
Thanks!
解决方案
You can copy paste run full code below
You can use TransformerPageView.children and TransformerPageController
TransformerPageController controller = TransformerPageController();
...
Expanded(
flex: 5,
child: TransformerPageView.children(
pageController: controller,
transformer: ScaleAndFadeTransformer(),
working demo
full code
import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:transformer_page_view/transformer_page_view.dart';
class ScaleAndFadeTransformer extends PageTransformer {
final double _scale;
final double _fade;
ScaleAndFadeTransformer({double fade: 0.3, double scale: 0.8})
: _fade = fade,
_scale = scale;
@override
Widget transform(Widget item, TransformInfo info) {
double position = info.position;
double scaleFactor = (1 - position.abs()) * (1 - _scale);
double fadeFactor = (1 - position.abs()) * (1 - _fade);
double opacity = _fade + fadeFactor;
double scale = _scale + scaleFactor;
return new Opacity(
opacity: opacity,
child: new Transform.scale(
scale: scale,
child: item,
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TransformerPageController controller = TransformerPageController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 5,
child: TransformerPageView.children(
pageController: controller,
transformer: ScaleAndFadeTransformer(),
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image:
NetworkImage('https://picsum.photos/250?image=9'),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://picsum.photos/250?image=10'),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://picsum.photos/250?image=11'),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
],
),
),
Expanded(
flex: 1,
child: SmoothPageIndicator(
controller: controller, // PageController
count: 3,
effect: WormEffect(), // your preferred effect
),
)
],
),
),
);
}
}
这篇关于页面浏览之间的淡入淡出动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
