Flutter水平阻塞滚动物理插件horizontal_blocked_scroll_physics的使用

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

Flutter水平阻塞滚动物理插件horizontal_blocked_scroll_physics的使用

Horizontal Blocked ScrollPhysics

Build Status License: MIT Pub

这是一个ScrollPhysics类，它阻止了水平轴上的移动。

如何使用

这个ScrollPhysics的API相当直接。我们有两种不同的类：

  • LeftBlockedScrollPhysics：将阻止向左的移动。
  • RightBlockedScrollPhysics：将阻止向右的移动。

阻止移动

LeftBlockedScrollPhysics();

这将允许内容向右滚动，并阻止任何向左的滚动。有一个例外，即用户正在向左滑动（这是被阻止的），但如果运动没有完成，屏幕将能够向左移动。请注意，文本将回到中心位置。

或者，如果你想阻止向右的移动并允许向左滚动：

RightBlockedScrollPhysics();

为什么我们提供了两个类

你可能已经注意到我们提供了两个类而不是只提供一个使用属性来改变物理行为的类。这是因为Scrollable类中的一个优化不允许使用相同的类型，即使是一个新的实例，来改变Scrollable物理行为。

物理可以动态更改，但只有在提供的对象的类发生变化时，新的物理才会生效。仅仅构造一个新的实例是不足以使物理重新应用的。（这是因为最终使用的对象是动态生成的，这可能是相对昂贵的，而且每帧都推测性地创建这个对象以查看是否应该更新物理是低效的。）

这就是为什么Flutter有特定的ScrollPhysics，如NeverScrollableScrollPhysics和AlwaysScrollableScrollPhysics。

示例代码

下面是一个完整的示例demo，展示了如何在Flutter中使用horizontal_blocked_scroll_physics插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: PageView(
        physics: RightBlockedScrollPhysics(),
        children: <Widget>[
          Center(child: Text('1')),
          Center(child: Text('2')),
          Center(child: Text('3')),
          Center(child: Text('4')),
        ],
      ),
    );
  }
}

在这个例子中，PageView使用了RightBlockedScrollPhysics()，这意味着用户可以向左滚动，但是不能向右滚动。你可以根据需要更改为LeftBlockedScrollPhysics()来实现相反的效果。


更多关于Flutter水平阻塞滚动物理插件horizontal_blocked_scroll_physics的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter水平阻塞滚动物理插件horizontal_blocked_scroll_physics的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用horizontal_blocked_scroll_physics插件的一个示例代码案例。这个插件允许你在水平滚动视图（如ListView或ScrollView）中实现阻塞滚动的物理效果。

首先，你需要确保你的Flutter项目中已经添加了horizontal_blocked_scroll_physics依赖。你可以在你的pubspec.yaml文件中添加如下依赖：

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

然后，运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何使用horizontal_blocked_scroll_physics来实现水平阻塞滚动效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Horizontal Blocked Scroll Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal Blocked Scroll Demo'),
        ),
        body: HorizontalBlockedScrollView(
          itemCount: 20, // 假设有20个可滚动的项目
          itemBuilder: (context, index) {
            return Container(
              width: double.infinity, // 让每个项目占据整行
              height: 100,
              color: Colors.primary.withOpacity(0.7 - index * 0.05),
              child: Center(
                child: Text(
                  'Item $index',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            );
          },
          blockedScrollPhysics: BlockedScrollPhysics(
            // 你可以根据需要调整这些参数
            blockFraction: 0.2, // 阻塞比例（例如，20%的滚动范围会被阻塞）
            blockOffset: 0.0,   // 阻塞偏移量（滚动到哪个位置开始阻塞）
            blockBehavior: BlockBehavior.stop, // 阻塞行为（stop 或 bounce）
          ),
        ),
      ),
    );
  }
}

// 自定义一个HorizontalBlockedScrollView组件
class HorizontalBlockedScrollView extends StatelessWidget {
  final int itemCount;
  final Widget Function(BuildContext context, int index) itemBuilder;
  final BlockedScrollPhysics blockedScrollPhysics;

  HorizontalBlockedScrollView({
    required this.itemCount,
    required this.itemBuilder,
    required this.blockedScrollPhysics,
  });

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      physics: blockedScrollPhysics.applyTo(BouncingScrollPhysics()),
      itemCount: itemCount,
      itemBuilder: itemBuilder,
    );
  }
}

在这个示例中：

  1. 我们创建了一个MyApp组件，它包含一个Scaffold，其中包含一个自定义的HorizontalBlockedScrollView组件。
  2. HorizontalBlockedScrollView组件是一个包装了ListView.builder的自定义组件，它接受itemCount、itemBuilder和blockedScrollPhysics作为参数。
  3. BlockedScrollPhysics被用来配置阻塞滚动的行为，包括阻塞比例（blockFraction）、阻塞偏移量（blockOffset）和阻塞行为（blockBehavior）。
  4. ListView.builder被设置为水平滚动（scrollDirection: Axis.horizontal），并且应用了blockedScrollPhysics。

你可以根据需要调整BlockedScrollPhysics的参数，以达到所需的滚动效果。

回到顶部