Flutter页面滚动吸附插件snapping_page_scroll的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter页面滚动吸附插件snapping_page_scroll的使用

Snapping Page Scroll

Snapping Page Scroll 是一个Flutter插件，它的行为类似于PageView，但根据用户的滚动速度，它要么吸附到最近的页面，要么滚动多个页面然后吸附。如果用户滚动的速度超过了某个阈值，页面吸附功能将被禁用，直到摩擦力使速度降低到该阈值以下，此时页面吸附功能再次启用。如果用户滚动的速度低于阈值，该小部件将像一个带有pageSnapping: true属性的普通PageView一样工作。

GIF展示插件的工作方式

使用方法

要使用此插件，请在您的pubspec.yaml文件中添加snapping_page_scroll作为依赖项。

dependencies:
  flutter:
    sdk: flutter
  snapping_page_scroll: ^最新版本号 # 请替换为实际的版本号

然后运行flutter pub get来安装这个包。

示例代码

下面是一个完整的示例demo，展示了如何使用SnappingPageScroll：

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(
        elevation: 4.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15.0),
        ),
        child: Center(
          child: Text(
            text,
            style: TextStyle(fontSize: 24.0, color: Colors.black),
          ),
        ),
      ),
    );
  }

  final controller = PageController(
    viewportFraction: 0.75, // 设置每个页面占据屏幕的比例
  );

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

说明

  • customCard 方法用于创建自定义卡片样式。
  • PageController 的 viewportFraction 属性设置每个页面占据屏幕的比例，默认是1.0（即整个屏幕宽度），这里设置为0.75，表示每个页面只占屏幕宽度的75%。
  • SnappingPageScroll 组件接收 controller 和 children 参数，children 是一个包含所有页面的小部件列表。

通过这个示例，你可以看到当用户快速滑动时，页面不会立即吸附；而当用户缓慢滑动时，页面会自动吸附到最近的页面。这使得用户体验更加流畅和自然。


更多关于Flutter页面滚动吸附插件snapping_page_scroll的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter页面滚动吸附插件snapping_page_scroll的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 snapping_page_scroll 插件来实现 Flutter 页面滚动吸附效果的代码示例。这个插件允许页面在滚动时自动吸附到指定的位置，常用于创建类似分页视图的效果。

首先，确保你已经在 pubspec.yaml 文件中添加了 snapping_page_scroll 依赖：

dependencies:
  flutter:
    sdk: flutter
  snapping_page_scroll: ^最新版本号  # 请替换为实际的最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，是一个简单的示例代码，展示如何使用 snapping_page_scroll 来实现页面滚动吸附效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Snapping Page Scroll Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SnappingPageScrollDemo(),
    );
  }
}

class SnappingPageScrollDemo extends StatefulWidget {
  @override
  _SnappingPageScrollDemoState createState() => _SnappingPageScrollDemoState();
}

class _SnappingPageScrollDemoState extends State<SnappingPageScrollDemo> {
  final List<Color> colors = [Colors.red, Colors.green, Colors.blue, Colors.yellow];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Snapping Page Scroll Demo'),
      ),
      body: SnappingList(
        itemCount: colors.length,
        itemBuilder: (context, index) {
          return Container(
            color: colors[index],
            child: Center(
              child: Text(
                'Page ${index + 1}',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          );
        },
        itemExtent: 300.0, // 每个页面的高度
        controller: SnappingPageController(), // 控制器，用于控制吸附行为
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含一个 SnappingList 组件。这个组件接受以下参数：

  • itemCount：列表中的项目数量。
  • itemBuilder：用于构建每个项目的函数。
  • itemExtent：每个页面的高度（在这个例子中为 300.0）。
  • controller：SnappingPageController 实例，用于控制页面的吸附行为。

SnappingList 是 snapping_page_scroll 插件提供的一个组件，它负责处理页面的滚动和吸附逻辑。在这个例子中，我们为每个页面设置了不同的背景颜色，并在页面中心显示了一个文本标签。

这个简单的示例应该可以帮助你理解如何使用 snapping_page_scroll 插件来实现页面滚动吸附效果。如果你有更复杂的需求，可以查阅该插件的官方文档以获取更多高级用法和配置选项。

回到顶部