可配置项

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);
...

@override
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);
...

@override
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，可以用于自定义显示样式。
reportController	否	ChatReportController 用于自定义举报内容，默认使用 DefaultReportController。
controller	否	ChatroomMessageListController, 用于配置默认长按事件，默认使用 DefaultMessageListController。

ChatroomParticipantsListView 组件

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

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

提示

该组件不支持自定义。

ChatroomGiftMessageListView 组件

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

示例代码如下：

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

@override
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);
...

@override
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 进行内容填充。

giftControllers 为 ChatroomGiftPageController 数组，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'};