snapping_page_scroll

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个增强 PageView 功能的 Flutter 包，通过启用平滑、基于速度的滚动并自动吸附到最近的页面，提供更直观流畅的用户体验。非常适合用于类似幻灯片的界面或内容滑块，其中精确的页面对齐至关重要。该插件可在所有主要平台上运行，包括移动设备、网页和桌面端，确保行为一致。它设计轻量且易于集成到现有项目中。

适合场景

轮播滑块
图像画廊
引导页
产品展示
交互式教程

主要特点

基于速度的滚动
自动页面吸附
跨平台支持
最小设置
平滑动画
可自定义的吸附行为

适合对象

开发交互式 UI 的开发者
具有多页面内容的应用程序
寻求精致滚动效果的设计师
需要响应式导航的项目
移动和Web应用

使用建议

可能需要调整以获得最佳抓取灵敏度
不适合非页面滚动布局
性能取决于内容复杂度
对高级滚动逻辑的自定义有限

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Snapping Page Scroll

A plugin that acts similar to a PageView but either snaps to the closest page or scrolls multiple pages and then snaps, based on how fast the user scrolls.

If the user scrolls faster than a certain threshold, page snapping will be disabled until friction slows the velocity to below that threshold, leading to page snapping being enabled again.

If the user scrolls slower than the threshold, the widget will act like a regular PageView with pageSnapping: true.

Usage

To use this plugin, add snapping_page_scroll as a dependency in your pubspec.yaml file.

Example

import 'package:flutter/material.dart';
import 'package:snapping_page_scroll/snapping_page_scroll.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  Widget customCard(String text) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(20, 100, 20, 100),
      child: Card(
        child: Text(text),
      ),
    );
  }

  final controller = PageController(
    viewportFraction: 0.75,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.amber,
        appBar: AppBar(),
        body: SnappingPageScroll(
          controller: controller,
          children: <Widget>[
            customCard('Card 1'),
            customCard('Card 2'),
            customCard('Card 3'),
            customCard('Card 4'),
            customCard('Card 5'),
            customCard('Card 6'),
          ],
        ),
      ),
    );
  }
}

搜索插件、代码仓与 APP 分类

安装插件