Flutter实现Inshorts新闻App滑动效果及PageView底部启动问题
Flutter实现Inshorts新闻App滑动切换效果:PageView无法从底部加载页面
我需要在Flutter中实现类似Inshorts新闻App的滑动切换动画,目前已经编写了对应的PageTransformer代码,但遇到一个问题:无法让PageView从底部开始加载页面。尝试修改了部分代码逻辑,但问题仍未解决。
以下是我编写的代码:
import 'dart:math' as math; // 自定义PageTransformer抽象类(或使用第三方包中的对应类) abstract class PageTransformer { Widget transform(Widget child, TransformInfo info); } class TransformInfo { final double? position; TransformInfo({this.position}); } class InshortsPageTransformer extends PageTransformer { @override Widget transform(Widget child, TransformInfo info) { double position = info.position ?? 0; double rotation = position * 0.2; double scale = math.max(0.8, 1 - position.abs()); if (position < -1) { rotation = 0; child = Opacity( opacity: 0, child: child, ); } else if (position <= 0) { child = Opacity( opacity: 1, child: child, ); child = Transform( transform: Matrix4.identity() ..setEntry(3, 2, 0.001) ..rotateY(rotation) ..scale(scale), alignment: Alignment.center, child: child, ); } else if (position <= 1) { child = Opacity( opacity: 1, child: child, ); child = Transform( transform: Matrix4.identity() ..setEntry(3, 2, 0.001) ..rotateY(rotation) ..scale(scale), alignment: Alignment.center, child: child, ); } else { rotation = 0; child = Opacity( opacity: 0, child: child, ); } return Transform( transform: Matrix4.identity() ..setEntry(3, 2, 0.001) ..rotateY(rotation) ..scale(scale), alignment: Alignment.center, child: child, ); } } 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 ?? 0; double scaleFactor = (1 - position.abs()) * (1 - _scale); double fadeFactor = (1 - position.abs()) * (1 - _fade); double opacity = _fade + fadeFactor; double scale = _scale + scaleFactor; return Opacity( opacity: opacity, child: Transform.scale( scale: scale, child: item, ), ); } }
内容的提问来源于stack exchange,提问作者ShikharVayuz
相关产品推荐
相关产品推荐

