分栏布局

从 IMKit 25.12.0 版本开始，新增了对组件导航模式（Navigation）的支持，进一步提升了在大屏和宽屏设备上的用户体验。分栏布局可以根据屏幕宽度自适应地展示多列内容，如会话列表与消息内容并排显示，用户无需频繁切换页面即可高效浏览和操作。

主要特性

• 自适应布局：在宽屏设备（如 PC、平板等）上支持多栏显示，自动响应屏幕变化，提升信息密度与交互流畅度。

典型场景

• 在左侧栏展示会话列表，右侧栏展示当前选中会话的聊天内容，实现主流 IM 应用的常见布局。

使用示例

IMKit 仅做了组件宽度自适应和组件导航模式（Navigation）的适配，您需要在应用中编写多栏页面布局。示例代码如下：

TypeScript

import { ConversationListPage } from '@rongcloud/imkit'
import { Navigation, NavPathStack, NavigationMode } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  pageInfo: NavPathStack = new NavPathStack();

  build() {
    Column() {
      Navigation(this.pageInfo) {
        Flex({ direction: FlexDirection.Column }) {
          Column() {
            ConversationListPage()
          }
          .height('100%')
        }.backgroundColor($r("app.color.rc_color_F3F3F3")).width('100%')
      }
      .hideTitleBar(true)
      .hideToolBar(true)
      .navBarWidth('380')
      .mode(NavigationMode.Auto)
      .flexShrink(1)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('white')
  }
}