Flutter组件可见性检测插件widgets_visibility_provider的使用

Flutter组件可见性检测插件widgets_visibility_provider的使用

标题

widgets_visibility_provider

内容

• 简介

  • widgets_visibility_provider 是一个监听 scrollview 内部 child 的的库。
  • 它可以帮助你实现类似 Instagram 显示评论框的效果。

• 示例图片

  • Screenshot
  • Screenshot1

• 如何使用

  1 第一步

  • 使用 WidgetsVisibilityProvider 包裹 scrollview（如 CustomScrollView, ListView 等）。

  WidgetsVisibilityProvider(
    condition: (PositionData positionData) =&gt null,
    child: SomeWidget(
      child: ListView.builder( // CustomScrollView, GridView...
        ...some code...
      ),
    ),
  )
  

  2 第二步

  • 使用 VisibleNotifierWidget 包裹子 widget。

  ListView.builder(
    itemCount: itemCount,
    itemBuilder: (context, index) => VisibleNotifierWidget(
      data: index,
      builder: (context, notification, positionData) => ...,
      listener: (context, notification, positionData) {
        ...
      },
      child: child(),
      condition: (
        previousNotification,
        previousPositionData,
        currentNotification,
        currentPositionData,
      ) =>...,
    ),
  )
  

  • 同样适用于 SliverToBoxAdapter 和 SliverList。

  3 第三步

  • 如果你想获取所有范围内的 widget 信息，可以使用 WidgetsVisibilityBuilder 或者 WidgetsVisibilityListener 或者 WidgetsVisibilityConsumer 在 WidgetsVisibilityProvider 子 widget 中。

  WidgetsVisibilityBuilder(
    builder: (context, event) => someWidget,
    buildWhen: (previous, current)=>...,
  )
  
  WidgetsVisibilityListener(
    listenWhen: (previous, current)=>...,
    listener: (context, event) {
      ...
    },
    child: child,
  )
  
  WidgetsVisibilityConsumer(
    builder: (context, event) => someWidget,
    buildWhen: (previous, current)=>...,
    listenWhen: (previous, current)=>...,
    listener: (context, event) {
    }
  )
  

• 关于数据对象

  • PositionData

    class PositionData extends Equatable {
      final double startPosition;
      final double endPosition;
      final double viewportSize;
      final dynamic data;
    
      ...other code
    }
    

  • WidgetsVisibilityEvent

    class WidgetsVisibilityEvent extends Equatable {
      final ScrollNotification notification;
      final List<PositionData> positionDataList;
    
      ...other code
    }
    

示例代码

import 'package:example/instagram_show_comment.dart';
import 'package:example/monitor_children.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(child: List()),
      ),
    );
  }
}

class List extends StatelessWidget {
  const List({
    Key key,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          child: Text('Monitor Children'),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (_) => MonitorChildren())),
        ),
        ElevatedButton(
          child: Text('Instagram show comment'),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (_) => InstagramShowComment())),
        )
      ],
    );
  }
}