Flutter多功能数据处理插件flutter_multitype的使用

Flutter多功能数据处理插件flutter_multitype的使用

🔥🔥🔥 使用 flutter_multitype 可以更方便和灵活地为 Flutter 的 ListView 创建多种类型。

安装

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_multitype: ^0.9.0

在需要用到的地方导入该包：

import 'package:flutter_multitype/multitype.dart';

功能

flutter_multitype 可用于解耦和提高可读性，当 ListView 中的项目具有不同的布局，并且动态不可确定时。

使用

第一步：创建数据类

例如：

class CategoryName {
  String? title;

  CategoryName(this.title);
}

class CategorySubContent {
  String? title;
  String? url;

  CategorySubContent(this.title, this.url);
}

第二步：创建一个扩展 ItemViewBinder 的类

例如：

class CategoryViewBinder extends ItemViewBinder<CategoryName> {
  @override
  Widget buildWidget(BuildContext context, CategoryName item, int index) {
    return const Text("Category"); // 显示分类名称
  }
}

class ContentViewBinder extends ItemViewBinder<List<CategorySubContent>> {
  @override
  Widget buildWidget(BuildContext context, List<CategorySubContent> item, int index) {
    return const Text("Content"); // 显示子内容
  }
}

第三步：注册类型并设置 ListView

例如：

class _MediaPageState extends State<MediaPage> {
  List<dynamic> items = Data.getMediaData(); // 获取数据
  MultiTypeAdapter adapter = MultiTypeAdapter.newInstance((adapter) {
    adapter.register(CategoryViewBinder()); // 注册分类视图绑定器
    adapter.register(ContentViewBinder()); // 注册内容视图绑定器
    adapter.setDebugViewBinderEnable(isEnable: true); // 开启调试视图绑定器
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Media Page"), // 设置标题
      ),
      body: ListView.builder(
        itemCount: items.length, // 设置列表项数量
        itemBuilder: (context, index) {
          return adapter.getItemBuilder(context, index, items[index]); // 返回适配器构建的项目
        },
      ),
    );
  }
}

这样就完成了多类型项目的 ListView 构建。

高级用法

一对一到多对一

一个数据绑定多个视图，例如：

/// 聊天消息将绑定四个视图：TextMeViewBinder、TextOtherViewBinder、UnknownMeViewBinder、UnknownOtherViewBinder
MultiTypeAdapter adapter = MultiTypeAdapter.newInstance((adapter) {
  adapter.registerOneToMany<ChatMessage>((position, item) {
    var message = item as ChatMessage;
    if (message.isMe == true) { // 如果是来自自己的消息
      switch (message.type) {
        case 0:
          {
            return TextMeViewBinder(); // 消息类型为0时返回TextMeViewBinder
          }
        default:
          {
            return UnknownMeViewBinder(); // 其他情况返回UnknownMeViewBinder
          }
      }
    } else { // 如果是来自其他人的消息
      switch (message.type) {
        case 1:
          {
            return TextOtherViewBinder(); // 消息类型为1时返回TextOtherViewBinder
          }
        default:
          {
            return UnknownOtherViewBinder(); // 其他情况返回UnknownOtherViewBinder
          }
      }
    }
  });
});

注册未支持的数据

如果某些项目的数据未被注册，它们将绑定到 unsupportedViewBinder。例如：旧版本接收到新版本的数据时，可以显示此 unsupportedViewBinder 提示用户更新应用。但如果你的数据类型相同，此功能不适用。你可以将其用于不同类型的数据。

void registerUnsupportedViewBinder(ItemViewBinder unsupportedViewBinder)

调试简便

如果某些项目的数据未被注册，在同时注册了 unsupportedViewBinder 和 debugViewBinder 时，debugViewBinder 将覆盖 unsupportedViewBinder。不用担心，debugViewBinder 在生产环境中不会显示，它仅在 !bool.fromEnvironment("dart.vm.product") 时显示。

void setDebugViewBinderEnable({bool isEnable = !inProduction, ItemViewBinder? debugViewBinder})