ExyteChat 2.0.3

ExyteChat 2.0.3

×

由 Exyte 维护。

 
依赖于
SwiftUIIntrospect>= 0
ExyteMediaPicker>= 0
FloatingButton>= 0
ActivityIndicatorView>= 0
ExytePopupView>= 0
 

ExyteChat 2.0.3

     

聊天

一个完全可定制的消息单元格和一个内置媒体选择器的 SwiftUI 聊天 UI 框架

SPM Compatible Cocoapods Compatible Carthage Compatible License: MIT

特性

  • 使用分页显示您的消息，并允许您创建并“发送”新消息（发送意味着调用闭包，因为用户将提供实际的API调用）
  • 允许您传递用于消息和输入视图的自定义视图构建器
  • 内置图片和视频库/相机选择器，支持多种媒体资源选择
  • 在长按消息单元格时显示全屏菜单（自动显示大消息的滚动条）
  • 支持通过消息菜单“回复消息”。移除和编辑功能将很快推出
  • 支持语音记录、视频/图片和文本。更多内容类型将很快推出

用法

创建一个如下所示的聊天视图

@State var messages: [Message] = []

var body: some View {
    ChatView(messages: messages) { draft in
        yourViewModel.send(draft: draft)
    }
}

其中
messages - 要显示的消息列表
didSendMessage - 当用户按下发送按钮时调用的闭包

Message 是 Chat 用于内部实现的类型。在上面的代码中，它期望用户提供一个包含 Message 结构体的列表，并在 didSendMessage 闭包中返回一个 DraftMessage。您可以将它们映射到您自己的 Message 模型，该模型符合您的API要求。

自定义

您可以像这样自定义消息单元格

ChatView(messages: viewModel.messages) { draft in
    viewModel.send(draft: draft)
} messageBuilder: { message, positionInGroup, showAttachmentClosure in
    VStack {
        Text(message.text)
        if !message.attachments.isEmpty {
            ForEach(message.attachments, id: \.id) { at in
                AsyncImage(url: at.thumbnail)
            }
        }
    }
}

messageBuilder 的参数

  • message - 包含用户信息、附件等的信息
  • positionInGroup - 消息在其连续的用户消息集中的位置
  • showAttachmentClosure - 您可以向此闭包传递附件以使用 ChatView 的全屏媒体查看器

您可以像这样自定义输入视图（底部有按钮的文本字段）

ChatView(messages: viewModel.messages) { draft in
    viewModel.send(draft: draft)
} inputViewBuilder: { textBinding, attachments, state, style, actionClosure in
    Group {
        switch style {
        case .message: // input view on chat screen
            VStack {
                HStack {
                    Button("Send") { actionClosure(.send) }
                    Button("Attach") { actionClosure(.photo) }
                }
                TextField("Write your message", text: textBinding)
            }
        case .signature: // input view on photo selection screen
            VStack {
                HStack {
                    Button("Send") { actionClosure(.send) }
                }
                TextField("Compose a signature for photo", text: textBinding)
                    .background(Color.green)
            }
        }
    }
}

inputViewBuilder 的参数

  • textBinding 绑定到您自己的 TextField
  • attachments 是一个结构体，包含图片、视频、录音和您正在回复的消息
  • state - 输入视图的状态，如果可能的话由库自动控制，或者通过您的 actionClosure 调用来控制
  • style - .message 或 .signature（聊天界面或照片选择界面）
  • 在您的自定义按钮上点击时将调用 actionClosure。例如，如果要发送消息，请调用 actionClosure(.send)，那么库将重置文本和附件，并调用 didSendMessage 发送闭包

支持的内容类型

此库允许以任何组合方式发送以下内容

  • 带有/不带 Markdown 的文本
  • 照片/视频
  • 音频录制

即将推出

  • 用户的位置
  • 文档

修饰符

如果您没有使用自己的 messageBuilder
avatarSize - 默认头像为圆形，您可以在此处指定其直径
messageUseMarkdown - 默认消息单元格是否使用 Markdown
assetsPickerLimit - 用户在媒体选择器中可以选择的最大媒体数量
enableLoadMore(offset: Int, handler: @escaping ChatPaginationClosure) - 当用户滚动到从末尾开始的 offset-th 条消息时，调用处理函数，因此用户可以加载更多消息
chatNavigation(title: String, status: String? = nil, cover: URL? = nil) - 传递 Chat 弹幕导航栏的信息

示例

尝试 Chat 示例

  • 克隆存储库 git clone [email protected]:exyte/Chat.git
  • 打开终端并运行 cd <ChatRepo>/Example
  • 等待 SPM 完成下载包
  • 运行它！

安装

Swift 包管理器

dependencies: [
    .package(url: "https://github.com/exyte/Chat.git")
]

CocoaPods

pod 'ExyteChat'

Carthage

github "Exyte/Chat"

要求

  • iOS 16+
  • Xcode 14+

我们的其他开源SwiftUI库

PopupView - Toasts和弹出框库
Grid - 最强大的网格容器
ScalingHeaderScrollView - 带有吸附式标题的滚动视图，在滚动时缩小
AnimatedTabBar - 带有预设动画的标签栏
MediaPicker - 可定制的媒体选择器
ConcentricOnboarding - 动画引导流程
FloatingButton - 浮动按钮菜单
ActivityIndicatorView - 各种动画加载指示器
ProgressIndicatorView - 各种动画进度指示器
SVGView - SVG解析器
LiquidSwipe - 液体导航动画