可配置项

大约 6 分钟

可配置项

chatroom_uikit 的组件中包含各种属性,你可以根据需求进行设置。

chatroom_uikit 主要包括如下组件:

组件名称组件介绍
ChatroomLocal 组件可以设置 UIKit 所有 UI 组件的语言。
ChatRoomUIKit 组件提供基础的聊天室页面。
ChatroomMessageListView 组件聊天室消息区域组件,用于显示发送或者接收到的消息。
ChatroomParticipantsListView 组件聊天室成员列表组件,包括聊天室成员和禁言成员的管理。
ChatroomGiftMessageListView 组件聊天室打赏消息区域组件,用于显示打赏的礼物。
ChatroomGlobalBroadcastView 组件聊天室全局广播组件,用于向 app 下的所有聊天室发送消息。
ChatInputBar 组件聊天室底部工具栏区域,可以与消息输入组件互相切换,支持添加自定义按钮。
ChatRoomGiftListView 组件发送礼物组件,用于发送礼物,礼物来源由开发者指定。
ChatroomReportListView 组件聊天室举报组件。

ChatroomLocal 组件

UIKit 支持多国语言切换,目前内置中文和英文,可以扩展其他语言。

例如:若要 UIKit 使用英文显示,可以如下设置:

final FlutterLocalization _localization = FlutterLocalization.instance;
_localization.init(mapLocales: [
  const MapLocale('zh', ChatroomLocal.zh),
  const MapLocale('en', ChatroomLocal.en),
], initLanguageCode: 'zh');

...

return MaterialApp(
      title: 'Flutter Demo',
      supportedLocales: _localization.supportedLocales,
      localizationsDelegates: _localization.localizationsDelegates,
      ...
);

ChatRoomUIKit 组件

ChatRoomUIKit 组件为聊天室组件,可以用来快速提供聊天室页面,并提供了聊天室事件监听和输入组件的自定义。

示例如下:

ChatroomController controller =
        ChatroomController(roomId: widget.roomId, ownerId: widget.ownerId);
...


Widget build(BuildContext context) {
  return ChatRoomUIKit(
          controller: controller,
          inputBar: ChatInputBar( // 自定义你需要的输入样式
            actions: [
              InkWell(
                onTap: () => controller.showGiftSelectPages(),
                child: Padding(
                  padding: const EdgeInsets.all(3),
                  child: Image.asset('images/send_gift.png'),
                ),
              ),
            ],
          ),
          child: (context) {
            // 返回你的 widget
            return Container();
          },
        );
}

ChatroomMessageListView 组件

聊天室消息区域组件 ChatroomMessageListView 提供消息的显示,聊天室接收到的文本消息、表情消息、礼物消息以及发送成功的消息会显示在该区域。

可以在消息区域中对消息进行操作,例如,翻译文本消息为目标语言、撤销消息和消息上报等。你可以通过长按消息列表项弹出菜单进行相应操作。

数据上报组件支持自定义选项,可以自定义选项上报不同内容。

示例代码如下:

ChatroomController controller =
        ChatroomController(roomId: widget.roomId, ownerId: widget.ownerId);
...


Widget build(BuildContext context) {
  return ChatRoomUIKit(
          controller: controller,
          inputBar: ChatInputBar( // 自定义你需要的输入样式
            actions: [
              InkWell(
                onTap: () => controller.showGiftSelectPages(),
                child: Padding(
                  padding: const EdgeInsets.all(3),
                  child: Image.asset('images/send_gift.png'),
                ),
              ),
            ],
          ),
          child: (context) {
            return Stack(
              children: [
                const Positioned(
                  left: 16,
                  right: 78,
                  height: 204,
                  bottom: 90,
                  child: ChatroomMessageListView(), // 添加消息列表并设置位置
                )
              ],
            );
          },
        );
}

ChatroomMessageListView 提供的属性如下表所示:

属性是否必需描述
onTap消息列表点击事件。
onLongPress消息列表长按事件。
itemBuilder消息列表项 build,可以用于自定义显示样式。
reportControllerChatReportController 用于自定义举报内容,默认使用 DefaultReportController
controllerChatroomMessageListController, 用于配置默认长按事件,默认使用 DefaultMessageListController

ChatroomParticipantsListView 组件

聊天室成员组件可以显示和管理聊天室成员,聊天室所有者、禁言列表以及管理权限。

聊天室所有者可以修改成员状态,例如,对成员禁言或踢出聊天室。

提示

该组件不支持自定义。

ChatroomGiftMessageListView 组件

聊天室打赏消息区域组件 ChatroomGiftMessageListView 用于展示发送的礼物效果,礼物消息可以显示在消息列表,也可以显示在该组件单独对礼物进行显示。

示例代码如下:

ChatroomController controller =
        ChatroomController(roomId: widget.roomId, ownerId: widget.ownerId);
...


Widget build(BuildContext context) {
  return ChatRoomUIKit(
          controller: controller,
          inputBar: ChatInputBar( // 自定义你需要的输入样式
            actions: [
              InkWell(
                onTap: () => controller.showGiftSelectPages(),
                child: Padding(
                  padding: const EdgeInsets.all(3),
                  child: Image.asset('images/send_gift.png'),
                ),
              ),
            ],
          ),
          child: (context) {
            return Stack(
              children: [
              const Positioned(
                left: 16,
                right: 100,
                height: 84,
                bottom: 300,
                child: ChatroomGiftMessageListView(), // 设置礼物展示区域
              ),
                const Positioned(
                  left: 16,
                  right: 78,
                  height: 204,
                  bottom: 90,
                  child: ChatroomMessageListView(), // 添加消息列表并设置位置
                )
              ],
            );
          },
        );
}

ChatroomGiftMessageListView 提供的属性如下表所示:

属性是否必需描述
giftWidgetBuilder单个礼物展示的 builder。
placeholder默认图片占位符,当礼物图片下载成功之前用于占位。

ChatroomGlobalBroadcastView 组件

全局广播通知组件 ChatroomGlobalBroadcastView 接收和显示全局全局广播,也是通过添加消息到队列排队显示。

简单示例如下:

ChatroomController controller =
        ChatroomController(roomId: widget.roomId, ownerId: widget.ownerId);
...


Widget build(BuildContext context) {
  return ChatRoomUIKit(
          controller: controller,
          inputBar: ChatInputBar( // 自定义你需要的输入样式
            actions: [
              InkWell(
                onTap: () => controller.showGiftSelectPages(),
                child: Padding(
                  padding: const EdgeInsets.all(3),
                  child: Image.asset('images/send_gift.png'),
                ),
              ),
            ],
          ),
          child: (context) {
            return Stack(
              children: [
              Positioned(
                top: MediaQuery.of(context).viewInsets.top + 10,
                height: 20,
                left: 20,
                right: 20,
                child: ChatroomGlobalBroadcastView(),  // 用于展示广播消息
              ),
              const Positioned(
                left: 16,
                right: 100,
                height: 84,
                bottom: 300,
                child: ChatroomGiftMessageListView(), // 设置礼物展示区域
              ),
                const Positioned(
                  left: 16,
                  right: 78,
                  height: 204,
                  bottom: 90,
                  child: ChatroomMessageListView(), // 添加消息列表并设置位置
                )
              ],
            );
          },
        );
}

ChatroomGlobalBroadcastView 提供的属性如下表所示:

属性是否必需描述
icon设置收到广播时的图标。
textStyle设置广播内容字体。
backgroundColor设置广播背景颜色。

ChatInputBar 组件

消息输入框组件 ChatInputBar 可以发送文本、表情等消息,可以与聊天室底部工具栏区域互相动态切换。当点击聊天室底部工具栏区域组件时切换到输入状态,发送消息或者关闭输入框时切换为聊天室底部工具栏区域组件。

简单示例如下:

 Widget build(BuildContext context) {
    Widget content = ChatRoomUIKit(
      controller: controller,
      inputBar: ChatInputBar( // 添加一个礼物按钮
        actions: [
          InkWell(
            onTap: () => controller.showGiftSelectPages(),
            child: Padding(
              padding: const EdgeInsets.all(3),
              child: Image.asset('assets/images/send_gift.png'),
            ),
          ),
        ],
      ),
    );
 }

ChatInputBar 提供的属性如下表所示:

属性是否必需描述
inputIcon显示图标。
inputHint未输入时占位字符。
leading输入区域左侧区域 widget。
actions输入区域右侧区域 widget 数组,最多允许有 3 个 widget。
textDirection输入区域的方向
onSend点击发送按钮的回调。

ChatRoomGiftListView 组件

礼物列表组件 ChatRoomGiftListView 提供自定义礼物列表,点击礼物项的发送按钮发送到聊天室。可以通过配置 ChatroomController#giftControllers 进行内容填充。

giftControllersChatroomGiftPageController 数组,chatroom_uikit 默认提供 DefaultGiftPageController 实现。

提示

礼物列表组件是一个独立的组件,需要应用开发者自行实现显示和加载等操作。

示例代码如下:

ChatroomController controller = ChatroomController(
      roomId: widget.room.id,
      ownerId: widget.room.ownerId,
      giftControllers: () async {
        List<DefaultGiftPageController> service = [];
        final value = await rootBundle.loadString('assets/data/Gifts_cn.json'); // 解析json,并赋值给 giftControllers。
        Map<String, dynamic> map = json.decode(value);
        for (var element in map.keys.toList()) {
          service.add(
            DefaultGiftPageController(
              title: element,
              gifts: () {
                List<GiftEntityProtocol> list = [];
                map[element].forEach((element) {
                  GiftEntityProtocol? gift = ChatroomUIKitClient
                      .instance.giftService
                      .giftFromJson(element);
                  if (gift != null) {
                    list.add(gift);
                  }
                });
                return list;
              }(),
            ),
          );
        }
        return service;
      }(),
    );

ChatroomReportListView 组件

消息举报组件 ChatroomReportListView,默认界面不提供自定义部分,可以通过配置进行内容修改。

示例代码如下:

// 修改举报内容:
ChatRoomSettings.reportMap = {'tag': 'reason'};