IM UIKit 会话列表模块（nim_conversationkit_ui）的ConversationUIConfig提供会话列表界面的 UI 自定义配置项，助您快速修改会话列表界面的 UI 样式。

• 请确保在加载会话列表之前完成该界面的 UI 自定义。
• 会话列表界面自定义事件监听相关说明，请参见事件监听。

功能介绍

可自定义元素

该界面可自定义的 UI 元素包括但不限于下图中的标注项。

自定义配置项

ConversationUIConfig提供titleBarConfig 和itemConfig属性，分别用于自定义会话列表界面的标题栏和会话列表。

属性	类型	说明
titleBarConfig	ConversationTitleBarConfig	会话列表界面标题栏配置，具体配置项请参见下文的标题栏配置项
itemConfig	ConversationItemConfig	会话列表配置，具体配置项请参见下文的会话列表配置配置

• 标题栏配置项

属性	类型	说明
showTitleBar	bool	是否展示 Title Bar
showTitleBarLeftIcon	bool	是否展示 Title Bar 的最左侧图标
showTitleBarRightIcon	bool	是否展示 Title Bar 的最右侧图标
showTitleBarRight2Icon	bool	是否展示 Title Bar 的次最右侧图标
titleBarLeftIcon	Widget	Title Bar 最左侧图标
titleBarRightIcon	Widget	Title Bar 最右侧图标
titleBarRight2Icon	Widget	Title Bar 次最右侧图标
title	String	Title Bar 标题文案
titleColor	Color	Title Bar 标题颜色值

• 会话列表配置项（不包含点击事件）

属性	类型	说明
itemTitleColor	Color	会话项名称的字体颜色
itemTitleSize	double	会话项名称的字体大小
itemContentColor	Color	会话项消息缩略内容的字体颜色
itemContentSize	double	会话项消息缩略内容的字体大小
itemDateColor	Color	会话项时间的字体颜色
itemDateSize	double	会话项时间的字体大小
avatarCornerRadius	double	会话列表中会话头像的圆角成都，0 为方形，21 为圆形
conversationComparator	Comparator<ConversationInfo>	会话列表排序自定义规则
customItemBuilder	ConversationItemBuilder	自定义会话 Item 组件，会替换掉默认的 Item

自定义方式

您可通过两种方式自定义会话列表界面的 UI 样式，即单实例全局自定义和单界面自定义。

单实例全局自定义

假设您的应用有多个会话列表界面，则通过ConversationUIConfig的配置项进行全局自定义后，自定义配置在单个实例全局生效，所有会话列表界面都将按自定义的 UI 样式进行展示。

示例代码如下：

dart// 设置ConversationKitClient的conversationUIConfig
ConversationKitClient.instance.conversationUIConfig = ConversationUIConfig(
  //会话列表标题栏配置
  titleBarConfig: ConversationTitleBarConfig(),
  // 会话列表项配置
  itemConfig: ConversationItemConfig()
);

单界面自定义

通过 ConversationUIConfig的配置项，可对单个会话列表界面进行 UI 自定义。

该种方式优先级大于全局配置方式。换而言之，如果在单实例全局自定义后在进行单界面自定义，则后者的配置会覆盖前者的。

示例代码如下：

dartConversationPage(
  // 设置ConversationPage页面的config参数
  config: ConversationUIConfig(
    //会话列表标题栏配置
    titleBarConfig: ConversationTitleBarConfig(),
    // 会话列表项配置
    itemConfig: ConversationItemConfig(),
  ),
);

示例

设置标题样式

标题使用的是AppBar系统组件，包含title与actions两块区域（图中的left icon, right icon2，right icon1 为actions区域），如下图所示：

您可以通过设置ConversationTitleBarConfig的标题配置项来更改标题栏样式。

假设您需要：

• 修改标题文案和位置
• 隐藏左侧图标和次最右侧图标
• 自定义最右侧图标及其点击事件

则示例代码如下：

dartConversationUIConfig(
  titleBarConfig: ConversationTitleBarConfig(
    centerTitle: true,
    titleBarTitle: '自定义标题',
    showTitleBarLeftIcon: false,
    showTitleBarRight2Icon: false,
    titleBarRightIcon: IconButton(
      onPressed: () {
        // 自定义点击
      },
      icon: Icon(Icons.more_horiz_outlined),
    )
  )
)

UI 效果对比如下：

默认样式	自定义样式

设置列表区域样式

列表区域主要展示会话列表项内容。列表中 UI 属性设置，包括会话项名称的字体颜色及大小、会话项的消息缩略字体颜色及大小、会话项的时间字体颜色及大小、会话项左侧图标圆角大小等均由ConversationItemConfig配置实现。

修改字体及头像圆角

修改字体颜色、字体大小及头像圆角的示例代码如下：

dartConversationUIConfig(
  itemConfig: ConversationItemConfig(
    itemTitleColor: Colors.red,
    itemTitleSize: 20,
    avatarCornerRadius: 10
  )
)
  

效果对比如下：

默认样式	自定义样式

修改列表排序

如果需要自定义列表的排序，可按照如下示例代码实现：

dartConversationUIConfig(
  itemConfig: ConversationItemConfig(
    conversationComparator: (source, other) {
      // 按照名称字符串顺序排序
      return source.getName().compareTo(other.getName());
    })
)

UI 效果对比如下：

默认顺序	自定义顺序

自实现自定义逻辑

如果以上自定义仍无法满足您的自定义需求，您可自行实现相关逻辑来完成会话 Item 内容的自定义。

示例代码如下：

dartConversationUIConfig(
  itemConfig: ConversationItemConfig(
    customItemBuilder: (data,position){
      return Expanded(
        child: Container(
          height: 62,
          padding: const EdgeInsets.symmetric(horizontal: 20),
          alignment: Alignment.center,
          child: Text(_getName(data)??'',
                      style: TextStyle(
                        fontSize: 16,
                        color: Colors.blue,
                        fontWeight: FontWeight.normal
                      ),
                     ),
        )
      );
    }
)

UI 效果对比如下：

默认样式	自定义样式