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

插件详情v0.1.8

snaplist

一个小型库,可用来创建带有项目吸附功能的列表。

近 30 天下载
46
喜欢数
33
Pub 分数
40

安装插件

flutter pub add snaplist

插件介绍

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

SnapList 是一个轻量级的 Flutter 包,可为列表提供流畅的吸附行为,使用户在滚动项目时能自动对齐到最近的项目边界。它通过在滚动过程中提供精确对齐和视觉反馈,增强了图像画廊或类似幻灯片界面的用户体验。设计简洁,可无缝集成到现有列表结构中,无需复杂的配置。非常适合创建直观、触控友好的列表交互。

适合场景

  • 图片轮播
  • 可滚动的商品网格
  • 交互式滑块
  • 入门屏幕
  • 垂直/水平吸顶列表

主要特点

  • 平滑的吸附动画
  • 可自定义的快照间隔
  • 最小设置
  • 支持垂直和水平滚动
  • 内置对齐选项

适合对象

  • 开发交互式列表 UI 的开发者
  • 专注于手势导航的设计人员
  • 包含大量图像内容的应用程序
  • 以移动设备为先的应用程序,支持触摸输入

使用建议

  • 仅限基本的吸附逻辑
  • 无内置分页指示器
  • 需要手动处理滚动事件
  • 未针对超大数据集进行优化
  • 不支持自定义缓动曲线

原始 README

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

awesome flutter pub package

snaplist

A small cozy library that allows you to make snappable list views.

Issues and Pull Requests are really appreciated!

Snaplist supports different and even dynamically sized children to be listed and correctly snapped.

Showcase

Showscase gif

Include to your project

In your pubspec.yaml root add:

dependencies:
  snaplist: ^0.1.8

Include

The library does provide StatefulWidget which is called SnapList.

Include the widget like this: import 'package:snaplist/snaplist.dart';

Usage

Use it as you'd use any widget:

Widget build(BuildContext context) {
  return SnapList(
    sizeProvider: (index, data) => Size(100.0, 100.0),
    separatorProvider: (index, data) => Size(10.0, 10.0),
    builder: (context, index, data) => SizedBox(),
    count: 1,
  );
}

Snaplist uses gesture detection for swiping the list, so, please, be sure that the gestures you apply to the widgets inside are not overlapping for best user experience.

Properties

There are 4 required fields:

  • sizeProvider is a provider of each widget size. The library will wrap each built widget to a sized box of specified size. This is required so snapping calculations will work correctly.
  • separatorProvider is similar to sizeProvider, but this size will be used to build the list separators.
  • builder works like a regular Flutter builder all of us are familiar with. It will pass you the context, current item index and some additional data.
  • count - Children count as in a ListView.

The data which is provided to each provider and the builder is a combination of three fields:

  • center - is the position which is now displayed and referenced as the center widget.
  • next - is the position which the user is scrolling to. It is -1 if idle.
  • progress - is the scroll and snip progress. The values are from 0 to 100.

Snaplist defaults to horizontal scrolling. You can set axis to Axis.vertical for vertical scrolling.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。