SuperAPI AI 工具集

cometchat-flutter-v5-customization

前端与建站

查看项目

更新于 10-16 11:55

技能介绍

CometChat Flutter UIKit v5 的定制能力按由浅入深分为四个层级。

一、用途 该技能用于在标准属性配置之外,对 CometChat Flutter UIKit v5 进行界面与消息渲染层面的深度定制,包括自定义气泡、模板、数据源装饰器、插槽视图与格式化器。

二、四个定制层级 第一层:Props。直接向组件传入属性实现开关类定制。示例中 CometChatMessageList 可设置 user、hideEditMessageOption、hideReactionOption、receiptsVisibility 等属性。

第二层:Slot Views(插槽视图)。通过回调属性替换特定 UI 区域。示例中 CometChatConversations 提供 subtitleView 与 trailingView,当回调返回 null 时回退到默认渲染。CometChatMessageHeader 提供 listItemView。各组件可用插槽如下:CometChatConversations 支持 subtitleView、listItemView、trailingView、leadingView、titleView;CometChatMessageHeader 支持 subtitleView、listItemView、trailingView;CometChatMessageList 支持 headerView、footerView、loadingStateView、emptyStateView、errorStateView;CometChatUsers 与 CometChatGroups 均支持 subtitleView、listItemView、leadingView、titleView、trailingView。

第三层:Text Formatters(文本格式化器)。用于转换消息文本的展示方式。内置格式化器包括:CometChatEmailFormatter(邮箱可点击)、CometChatPhoneNumberFormatter(电话号码可点击)、CometChatUrlFormatter(URL 可点击)、CometChatMentionsFormatter(处理 @提及并提供点击回调)。资料建议将同一组格式化器同时传给 CometChatMessageList 与 CometChatMessageComposer 以保持一致。

第四层:DataSource Decorator Pattern(数据源装饰器模式)。这是最深的定制层级。ChatConfigurator 采用装饰器模式,以 MessagesDataSource 为基础:ChatConfigurator 之下是 DataSource 接口,再下是默认实现 MessagesDataSource,最上层是 ExtensionDecorator 进行包装与覆盖。每个扩展都有对应装饰器,例如 PollsExtensionDecorator 继承 DataSourceDecorator,并在 getAllMessageTemplates 中追加投票模板。扩展通过 UIKitSettingsBuilder 注册,示例中设置 extensions 为 CometChatUIKitChatExtensions.getDefaultExtensions(),aiFeature 为 CometChatUIKitChatAIFeatures.getDefaultAiFeatures()。

可用扩展及其装饰器:Polls / PollsExtensionDecorator(投票创建与投票气泡)、Stickers / StickersExtensionDecorator(贴纸键盘与气泡)、Link Preview / LinkPreviewExtensionDecorator(URL 预览卡片)、Message Translation / MessageTranslationExtensionDecorator(翻译选项)、Image Moderation / ImageModerationExtensionDecorator(NSFW 过滤)、Collaborative Document / CollaborativeDocumentExtensionDecorator(共享文档)、Collaborative Whiteboard / CollaborativeWhiteboardExtensionDecorator(共享白板)、Thumbnail Generation / ThumbnailGenerationExtensionDecorator(图片缩略图)。CometChatCallingExtension 同样使用该模式:继承 ExtensionsDataSource,在 addExtension 中通过 ChatConfigurator.enable 启用 CallingExtensionDecorator。

三、消息模板与选项菜单 CometChatMessageTemplate 定义消息类型的渲染方式,需指定 type 与 category,并通过 contentView 返回自定义气泡内容。选项菜单方面,CometChatConversations 可通过 setOptions 替换全部长按选项,或通过 addOptions 在现有选项上追加,选项为 CometChatOption,含 id、title、onClick。CometChatMessageHeader 可通过 options 返回消息头部选项列表,选项支持 iconWidget 图标。

四、检查清单与限制 资料给出的定制检查清单包括:先从 Props(第一层)开始,再深入更深的层级;插槽视图返回 null 以回退默认渲染;文本格式化器在 MessageList 与 Composer 之间保持一致;扩展通过 UIKitSettingsBuilder.extensions 注册;自定义模板需指定 type 与 category。资料未提供各层级的具体限制条件、性能影响说明以及完整 API 参数列表,这些内容暂未提供。