Flutter滚动吸附插件scroll_snap_widgets的使用

描述

scroll_snap_widgets 是一个 Flutter 插件，用于在水平或垂直可滚动的 ListView 中显示自定义项目，并具有项目吸附功能。当用户滚动这些项目时，它会自动停止在一个项目上，以获得良好的用户体验。该插件仅使用 ScrollView 和 ScrollController 来实现这种行为，而不是使用 PageView。

特性

• 自动吸附功能：ScrollSnapWidgets 小部件提供了自动吸附功能。
• 完全可定制：支持自定义项目。
• 控制器类：ScrollSnapWidgetsController 提供了多种函数和自定义选项：
  • isFirst() 和 isLast()：检查用户是否在可滚动区域的第一个或最后一个项目。
  • animateNext()、animatePrevious()、jumpNext()、jumpPrevious()：程序化地导航到下一个或上一个项目。
  • animateStart()、animateEnd()、jumpStart()、jumpEnd()：直接程序化地跳转到起始点或结束点。
  • dispose()：资源清理方法。

开始使用

基本要求

• 项目必须具有相同的大小（高度或宽度，取决于滚动方向）。
• 当滚动方向为 水平 时：
  • itemSize = 宽度
  • widgetSize = 高度
• 当滚动方向为 垂直 时：
  • itemSize = 高度
  • widgetSize = 宽度

确保在 itemBuilder 中使用与 itemSize 相同的高度或宽度。

使用示例

水平滚动示例

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HorizontalItems(),
    );
  }
}

class HorizontalItems extends StatefulWidget {
  @override
  _HorizontalItemsState createState() => _HorizontalItemsState();
}

class _HorizontalItemsState extends State<HorizontalItems> {
  static const double itemWidth = 150;
  final ScrollSnapWidgetsController _controller =
      ScrollSnapWidgetsController(size: itemWidth);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Horizontal Items')),
      body: Column(
        children: [
          ScrollSnapWidgets(
            controller: _controller,
            widgetSize: 300,
            scrollDirection: Axis.horizontal,
            itemSize: itemWidth,
            itemCount: 10,
            itemBuilder: (itemIndex) => Container(
              width: itemWidth,
              color: Colors.primaries[itemIndex % Colors.primaries.length],
              child: Center(child: Text('Item $itemIndex')),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () => _controller.animatePrevious(),
                child: Text('Previous'),
              ),
              ElevatedButton(
                onPressed: () => _controller.animateNext(),
                child: Text('Next'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

垂直滚动示例

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VerticalItems(),
    );
  }
}

class VerticalItems extends StatefulWidget {
  @override
  _VerticalItemsState createState() => _VerticalItemsState();
}

class _VerticalItemsState extends State<VerticalItems> {
  static const double itemHeight = 300;
  final ScrollSnapWidgetsController _controller =
      ScrollSnapWidgetsController(size: itemHeight);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Vertical Items')),
      body: Column(
        children: [
          Expanded(
            child: ScrollSnapWidgets(
              controller: _controller,
              widgetSize: double.infinity,
              scrollDirection: Axis.vertical,
              itemSize: itemHeight,
              itemCount: 10,
              itemBuilder: (itemIndex) => Container(
                height: itemHeight,
                color: Colors.primaries[itemIndex % Colors.primaries.length],
                child: Center(child: Text('Item $itemIndex')),
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () => _controller.animatePrevious(),
                child: Text('Previous'),
              ),
              ElevatedButton(
                onPressed: () => _controller.animateNext(),
                child: Text('Next'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

其他信息

这是我的第一个发布的包，希望它能帮到你。如果有任何问题，请在 GitHub 的 issues 部分发布。欢迎贡献新的功能和修复错误。感谢你的支持！

结论

scroll_snap_widgets 是一个非常实用的 Flutter 插件，可以为你的应用添加流畅的滚动吸附效果。通过上述示例，你可以快速上手并将其集成到你的项目中。希望这些示例对你有所帮助！