项目地址:https://github.com/Wenlong-Guo/flutter_multitype

• 关于Flutter Multitype
• 安装
• 功能
• 用法
• 其他用法
  • 一对多
  • 注册未知类型的布局
  • 调试模式
• 截图
  • 聊天类App例子
  • 媒体类App例子
  • 博客类App例子
• 感谢
• 关于作者

关于Flutter Multitype

更容易、更灵活的创建Flutter ListView Item Widget。

安装

添加 flutter_multitype: ^0.9.2 到你的 pubspec.yaml 文件中:

dependencies:
  flutter_multitype: ^0.9.2

导入将使用的文件

import 'package:flutter_multitype/multitype.dart';

功能

flutter_multitype 当 ListView 中的项目具有
不同类型的布局并且是动态不确定的时候,可以帮您根据数据类型找到对应的item widget

用法

一对一绑定数据和视图

第一步,创建一个实体类,例如:

class CategoryName {
  String? title;

  CategoryName(this.title);
}

class CategorySubContent {
  String? title;
  String? url;

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

第二步,创建一个类继承ItemViewBinder<T>,例如:

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]);
        },
      ),
    );
  }
}

多类型Item Widget就完成啦!

其他用法

一对多

一对多绑定数据,例如:

/// ChatMessage will be bind TextMeViewBinder、TextOtherViewBinder、UnknownMeViewBinder、UnknownOtherViewBinder four Widget
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();
        }
      default:
        {
          return UnknownMeViewBinder();
        }
    }
  } else {
    switch (message.type) {
      case 1:
        {
          return TextOtherViewBinder();
        }
      default:
        {
          return UnknownOtherViewBinder();
        }
    }
  }
});

注册未知类型的布局

如果某个实体类没有注册，它将被绑定unsupportedViewBinder。例如：
旧的版本收到新版本数据，您可以显示此 unsupportedViewBinder 以提示用户更新应用程序。
但是如果你的数据是同一个数据类型的，这个功能就不适合了。
你可以在一对多的时候做到这个效果。

void registerUnsupportedViewBinder(ItemViewBinder unsupportedViewBinder)

调试模式

如果某个数据类型没有注册,它将绑定debugViewBinder.
如果同时注册unsupportedViewBinder和debugViewBinder，debugViewBinder
将覆盖unsupportedViewBinder。
别担心，debugViewBinder 永远不会在正式版中显示，它只是
显示在 !bool.fromEnvironment("dart.vm.product") 中。

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

截图

聊天类App例子

screenshots_03.jpg

媒体类App例子

[图片上传中...(screenshots_01.jpg-f75e9c-1657684194551-0)]

博客类App例子

screenshots_01.jpg

感谢

MultiType

关于作者

GitHub  : Wenlong-Guo
Email     : guowenlong20000@sina.com