设置群组详情页面

大约 1 分钟

设置群组详情页面

你可以配置群详情页面的 AppBar、页面中间的按钮和群详情自定义列表项等。

img

与联系人详情页面的自定义相似,群详情页提供三处自定义项:

  1. AppBar:可以通过 appBarModel 进行自定义。
  2. 中间的按钮,包括发消息、搜索消息、音频通话和视频通话等:可通过 actionsBuilder 进行自定义,默认事件会通过 builder 返回,需要返回要展示的事件。
  3. 页面的列表项,包括消息免打扰、清空聊天记录等:可通过 itemsBuilder 进行自定义,默认列表项会通过 builder 回调,需要返回需要展示的列表项。

你可以通过以下两种方式对群组详情页进行自定义:

  • 直接在 GroupDetailsView 中设置:
  GroupDetailsView(
    profile: ChatUIKitProfile.group(
      id: "groupId",
      groupName: "Group Name",
    ),
    appBarModel: ChatUIKitAppBarModel(
      centerTitle: true,
      title: "测试",
    ),
    itemsBuilder: (context, profile, defaultItems) {
      return [
        ...defaultItems,
        ChatUIKitDetailsListViewItemModel.space(),
        ChatUIKitDetailsListViewItemModel(
          title: "添加内容",
          onTap: () {},
        )
      ];
    },
    actionsBuilder: (context, defaultList) {
      return [
        ...defaultList ?? [],
        ChatUIKitDetailContentAction(
          iconSize: const Size(30, 35),
          icon: 'assets/images/chat.png',
          title: "聊天",
          onTap: (ctx) {},
        ),
      ];
    },
  );
  • 通过 GroupDetailsViewArguments 设置:
  static RouteSettings groupDetails(RouteSettings settings) {
    GroupDetailsViewArguments arguments =
        settings.arguments as GroupDetailsViewArguments;
    arguments = arguments.copyWith(
      appBarModel: ChatUIKitAppBarModel(
        centerTitle: true,
        title: "测试",
      ),
      itemsBuilder: (context, profile, defaultItems) {
        return [
          ...defaultItems,
          ChatUIKitDetailsListViewItemModel.space(),
          ChatUIKitDetailsListViewItemModel(
            title: "添加内容",
            onTap: () {},
          )
        ];
      },
      actionsBuilder: (context, defaultList) {
        return [
          ...defaultList ?? [],
          ChatUIKitDetailContentAction(
            iconSize: const Size(30, 35),
            icon: 'assets/images/chat.png',
            title: "聊天",
            onTap: (ctx) {},
          ),
        ];
      },
    );

    return RouteSettings(name: settings.name, arguments: arguments);
  }