在AppStore中如何实现左右滑动,因为使用PageView会居中显示,不会居左显示,目前没有找到解决方案,我使用的方案是ListView+自定义physics实现的。
代码
SizedBox(
width: 200,
height: 400,
child: ListView.builder(
scrollDirection: Axis.horizontal,
physics: const MyScreenPagePhysics(
viewportDimension: 200 + 20 * 2, //需要计算viewport宽度
),
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: [
CachedNetworkImage(
//图标
width: 200,
height: 400,
fit: BoxFit.fill,
imageUrl:
"https://is1-ssl.mzstatic.com/image/thumb/Purple221/v4/07/b1/d7/07b1d7f0-76b1-e292-541b-c04a2eede928/AppIcon-1x_U007emarketing-0-7-0-sRGB-85-220.png/512x512bb.jpg",
placeholder: (context, url) =>
LoadingAnimationWidget.threeArchedCircle(
color: Colors.white,
size: 20,
).center(),
errorWidget: (context, url, error) =>
const Icon(Icons.error_outline_rounded),
).border(color: Colors.blue),
],
),
);
},
itemCount: 2,
),
)
MyScreenPagePhysics.dart源码
import 'package:flutter/cupertino.dart';
import 'dart:math' as math;
class MyScreenPagePhysics extends ScrollPhysics {
final double viewportDimension;
const MyScreenPagePhysics({
super.parent,
required this.viewportDimension,
});
@override
MyScreenPagePhysics applyTo(ScrollPhysics? ancestor) {
return MyScreenPagePhysics(
parent: buildParent(ancestor),
viewportDimension: viewportDimension,
);
}
double _getPage(ScrollMetrics position) {
return position.pixels / position.viewportDimension;
}
double _getPixels(ScrollMetrics position, double page) {
return math.min(
position.maxScrollExtent,
page * position.viewportDimension,
);
}
double _getTargetPixels(
ScrollMetrics position, Tolerance tolerance, double velocity) {
double page = _getPage(position);
if (velocity < -tolerance.velocity) {
page -= 0.5;
} else if (velocity > tolerance.velocity) {
page += 0.5;
}
return _getPixels(position, page.roundToDouble());
}
@override
Simulation? createBallisticSimulation(
ScrollMetrics _position, double velocity) {
ScrollMetrics position = _position.copyWith(
viewportDimension: viewportDimension,
);
if ((velocity <= 0.0 && position.pixels <= position.minScrollExtent) ||
(velocity >= 0.0 && position.pixels >= position.maxScrollExtent)) {
return super.createBallisticSimulation(position, velocity);
}
final Tolerance tolerance = toleranceFor(position);
final double target = _getTargetPixels(position, tolerance, velocity);
if (target != position.pixels) {
return ScrollSpringSimulation(spring, position.pixels, target, velocity,
tolerance: tolerance);
}
return null;
}
}
效果图