我试图找到如何在PageView页面之间淡入淡出。
这是我的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),
)),
),
],
),
是否可以实现淡入淡出过渡?我搜索了堆栈溢出,但是我唯一能找到的就是这个包: https://pub.dev/packages/transformer_page_view#-readme-tab-
问题是它没有控制器,所以我的smoothPageIndactor无法正常工作。 (https://pub.dev/packages/smooth_page_indicator)
谢谢!
答案 0 :(得分:1)
您可以在下面复制粘贴运行完整代码
您可以使用TransformerPageView.children
和TransformerPageController
TransformerPageController controller = TransformerPageController();
...
Expanded(
flex: 5,
child: TransformerPageView.children(
pageController: controller,
transformer: ScaleAndFadeTransformer(),
工作演示
完整代码
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
),
)
],
),
),
);
}
}