Flutter数据可见性管理插件visibility_data_manager的使用

Visibility Data Manager

管理可见小部件的数据。

概述

本指南重点介绍了visibility_data_manager库的功能，提供了高效使用该库监控小部件可见性和管理与可见小部件相关数据的见解。它演示了如何在用户与其父级小部件内的滚动小部件交互时有效地利用该库。

关键功能

• 可见性监控： 轻松跟踪滚动容器内小部件的可见状态。
• 跟踪公共数据： 公共数据可以依赖于可见的小部件。
• 依赖公共数据： 可管理的小部件可以依赖于公共数据的变化。
• 股票交易所订单簿： 实现‘依赖公共数据’场景的真实应用（开发中）。

场景

展示涵盖了各种场景，包括：

• 基本场景： 小部件跟踪自己的可见状态。
• 跟踪公共数据场景： 小部件通知可见性管理器其可见性，管理器跟踪公共数据。
• 依赖公共数据场景： ‘小部件数据’连接到可管理的小部件。管理器从可见小部件的数据更新公共数据，并通知小部件新的公共数据。
• 股票交易所订单簿： 实现‘依赖公共数据’场景的真实应用（开发中）。

基本场景

GitHub链接

小部件跟踪自己的可见状态。

库提供了一个State混入类，为小部件提供currentVisible状态和changeVisible流。

只需用VisiblityManagerIsVisible.isVisible包装您的ListView：

class IsVisiblePage StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return VisiblityManagerIsVisible.isVisible(
            child: ListView(
                children: [
                    ItemWidget()
                ],),);
    }
}

然后在您的项目中使用IsVisible混入类：

class ItemWidget extends StatefulWidget {
    @override
    State<ItemWidget> createState() => _ItemWidgetState();
}

class _ItemWidgetState extends State<ItemWidget> with IsVisible{
    @override
    Widget build(BuildContext context) {
        return Card(
            child: Text(
            currentVisible?'visible':'invisible',
            style: TextStyle(color: currentVisible?Colors.black:Colors.grey),
        ),);
    }
}

跟踪公共数据场景

GitHub链接

小部件通知可见性管理器其可见性，管理器跟踪公共数据。

实现公共数据存储：

class NumOfVisibleStore extends VisiblityCommonDataStore<int> {
    int numOfVisible = 0;

    @override
    void update(int num) {
        if (numOfVisible != num) {
            numOfVisible = num;
            super.update(num);
        }
    }
}

在管理器小部件中初始化存储：

class _NumOfVisibleState extends State<NumOfVisible> {
    final store = NumOfVisibleStore();

创建onVisiblityChange函数：

void onVisiblityChange<TCommon>({
    VisiblityCommonDataStore<TCommon>? dataStore,
    required VisiblityStore visiblyStore}) {
    if (dataStore is NumOfVisibleStore) {
    (dataStore as NumOfVisibleStore)
        .update(visiblyStore.getVisibleKeys().length);
    }
}

用VisiblityManagerCommonData.commonData<TCommon>包装您的ListView：

@override
Widget build(BuildContext context) {
    return VisiblityManagerCommonData.commonData<int>(
        store: store,
        onChange: onVisiblityChange,
        child: ListView(
            children: items,
        ),);
    }
}

用VisiblityManageble包装您的项目，并在创建项目时使用键：

void addItem() {
    final Key key = UniqueKey();
    items = List<Widget>.from([
      ...items,
      Card(
        child: VisiblityManageble(
        key: key,
        builder: () => Text(
            '$key ${store.numOfVisible}',
    ),),)]);
    setState(() {});
}

依赖可计算数据场景

GitHub链接

‘值数据’连接到可管理的小部件。管理器从可见小部件的‘值数据’更新‘可计算数据’并通知小部件新的‘可计算数据’。

实现可计算数据存储：

class MaxVisibleValueStore extends VisiblityCalculableDataStore<double, double> {
    double maxValue = 0;

    @override
    double? calculate(List<Key> keys) {
        maxValue = 0;
        for (var key in keys){
            maxValue = max(maxValue, registred[key]??0);
        }
        super.calculate(keys);
        return maxValue;
    }

    @override
    void update(double data) {
        if (maxValue != data) {
            maxValue = data;
            super.update(data);
        }
    }
}

在管理器小部件中初始化存储：

class _NumOfVisibleState extends State<NumOfVisible> {
    final store = MaxVisibleValueStore();

创建onVisiblityChange函数：

void onVisiblityChange<TValue, TCommon>({
    VisiblityCalculableDataStore<TValue, TCommon>? dataStore,
    required VisiblityStore visiblyStore
    }) {
        if (dataStore is MaxVisibleValueStore) {
            final double? maxValue = (dataStore as MaxVisibleValueStore).calculate(visiblyStore.getVisibleKeys());
        store.update(maxValue??0);
        Future.delayed(Duration.zero, () async{ setState(() {});}); 
    }
}

用VisiblityManagerCalculableData.calculable<TValue, TCommon>包装您的ListView：

@override
Widget build(BuildContext context) {
    return VisiblityManagerCalculableData.calculable<double, double>(
      store: store,
      onChange: onVisiblityChange,
      child: ListView(
        children: items,
      ),);
    }
}

用VisiblityManageble包装您的项目，并在创建它们时设置initValue和使用键：

void addItem() {
    double value = Random().nextDouble();
    items = List<Widget>.from([
        ...items,
        VisiblityManageble(
            key: ValueKey(value),
            initValue: value,
            builder: () => Text('value: $value maxValue: ${store.maxValue}')
        )
    ]);
    setState(() {});
}