一个 Flutter 包，可构建列表视图并在小部件进入屏幕时通知

inview_notifier_list

一个 Flutter 包，可构建 ListView 或 CustomScrollView，并在小部件进入给定区域内的屏幕时通知。

一个Flutter包，用于构建一个 ListView 或 CustomScrollView，并在小部件位于提供的区域内屏幕上时发出通知。

示例 1	示例 2	示例3（自动播放视频）
示例4（自定义滚动视图）

用例

• 当用户滚动时自动播放视频。

• 为仅在用户可见区域内的帖子/内容添加实时更新侦听器。

  注意：如果您有其他用例，请更新此部分并创建PR。

安装

只需将该包添加到 `pubspec.yaml` 文件中的依赖项中

dependencies:
  inview_notifier_list: ^2.0.0

基本用法

步骤 1

将 InViewNotifierList 添加到您的窗口小部件树中

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: InViewNotifierList(
		...
      ),
    );
  }
}

步骤 2

向 InViewNotifierList 小部件添加 必需 的属性 isInViewPortCondition。这是定义小部件重叠区域应被视为当前可见的函数。

typedef bool IsInViewPortCondition(
  double deltaTop,
  double deltaBottom,
  double viewPortDimension,
);

它接受3个参数

1. deltaTop：小部件从列表视图顶部到视口顶部的距离（0.0）。

2. deltaBottom：小部件从列表视图底部到视口顶部的距离（0.0）。

3. viewPortDimension：视口的高度或宽度，取决于提供的 srollDirection 属性。下图展示了如果 srollDirection 为 Axis.vertical 的值。

   

这里有一个示例，只有当小部件的顶部在视口的一半以上，并且小部件的底部在视口的一半以下时，它才会返回 true。它在 示例1 中显示。

InViewNotifierList(
  isInViewPortCondition:
      (double deltaTop, double deltaBottom, double viewPortDimension) {
    return deltaTop < (0.5 * viewPortDimension) &&
        deltaBottom > (0.5 * viewPortDimension);
  },
),

步骤3

添加 IndexedWidgetBuilder，它按需构建子项。它就像 ListView.builder 一样。

InViewNotifierList(
    isInViewPortCondition:(...){...},
    itemCount: 10,
    builder: (BuildContext context, int index) {
      return child;
    }

),

步骤4

使用 InViewNotifierWidget 来获取所需小部件是否可见的通知。

InViewNotifierWidget 包含以下属性

1. id：一个 **必需** 的字符串属性。对于每个需要通知的小部件，它都应该是唯一的。
2. builder：一个用于为给定索引创建小部件的函数签名。该函数定义并返回应被通知为可见的小部件。请参阅 InViewNotifierWidgetBuilder。
3. child：要传递给构建器的子小部件。

InViewNotifierWidget(
  id: 'unique-Id',
  builder: (BuildContext context, bool isInView, Widget child) {
    return Container(
      child: Text(
        isInView ? 'in view' : 'not in view',
      ),
    );
  },
)

就是这样，完成了！

完整的代码

InViewNotifierList(
  isInViewPortCondition:
      (double deltaTop, double deltaBottom, double vpHeight) {
    return deltaTop < (0.5 * vpHeight) && deltaBottom > (0.5 * vpHeight);
  },
  itemCount: 10,
  builder: (BuildContext context, int index) {
    return InViewNotifierWidget(
      id: '$index',
      builder: (BuildContext context, bool isInView, Widget child) {
        return Container(
          height: 250.0,
          color: isInView ? Colors.green : Colors.red,
          child: Text(
            isInView ? 'Is in view' : 'Not in view',
          ),
        );
      },
    );
  },
);

运行提供的 示例 应用，并查看文件夹中的完整代码。

GitHub

https://github.com/rvamsikrishna/inview_notifier_list