flutter 实现AppStore左右滑动

在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;
  }
}

效果图
在这里插入图片描述

相关推荐

  1. vue + element 实现鼠标左右滑动效果

    2024-07-10 17:22:01       42 阅读
  2. qml实现双指左右滑动,上下滑动

    2024-07-10 17:22:01       4 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-10 17:22:01       5 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-10 17:22:01       5 阅读
  3. 在Django里面运行非项目文件

    2024-07-10 17:22:01       4 阅读
  4. Python语言-面向对象

    2024-07-10 17:22:01       5 阅读

热门阅读

  1. 人形机器人强化学习控制分类

    2024-07-10 17:22:01       10 阅读
  2. 小抄 20240708

    2024-07-10 17:22:01       8 阅读
  3. sklearn基础教程

    2024-07-10 17:22:01       12 阅读
  4. 图形渲染基础-GPU驱动的渲染管线

    2024-07-10 17:22:01       12 阅读
  5. 数据库的基本概念

    2024-07-10 17:22:01       11 阅读
  6. 图形渲染基础-Unity渲染管线介绍

    2024-07-10 17:22:01       12 阅读
  7. spring xml实现bean对象(仅供自己参考)

    2024-07-10 17:22:01       10 阅读
  8. Tomcat异常处理【Spring源码学习】

    2024-07-10 17:22:01       14 阅读
  9. Leetcode101 判断二叉树是否对称

    2024-07-10 17:22:01       7 阅读
  10. 【深入剖析】Kylin架构全景及其组件详解

    2024-07-10 17:22:01       9 阅读