MultiColumnLayout 多列布局

根据容器宽度自动计算列数的响应式布局组件,适用于宽屏显示多个"手机屏幕"。

导入

import { MultiColumnLayout } from '@xcloud/ui-mobile';

示例

基础用法

import { MultiColumnLayout } from '@xcloud/ui-mobile';

function Example() {
  return (
    <div style={{ height: '100vh' }}>
      <MultiColumnLayout>
        <MobilePage />  {/* 会根据容器宽度重复显示 */}
      </MultiColumnLayout>
    </div>
  );
}

自定义配置

<MultiColumnLayout
  config={{
    columnWidth: '375px',  // 每列宽度
    gap: '16px',           // 列间距
    minColumns: 1,         // 最少列数
    maxColumns: 3,         // 最多列数
    autoColumns: true,     // 自动计算列数
  }}
>
  <MobilePage />
</MultiColumnLayout>

自定义列内容

<MultiColumnLayout
  config={{
    columns: [
      {
        content: <ListPage />,
        width: '375px',
      },
      {
        content: <DetailPage />,
        width: '480px',
      },
    ],
  }}
/>

API

MultiColumnLayout

属性	类型	默认值	说明
children	ReactNode	-	子内容(未提供 columns 时使用)
config	PageLayoutConfig['multiColumn']	-	布局配置
enableScroll	boolean	true	是否开启列内滚动
animationConfig	AnimationConfig	-	动画配置

Config 配置

属性	类型	默认值	说明
columns	ColumnConfig[]	-	自定义列配置数组
columnWidth	string	'375px'	默认列宽
gap	string	'16px'	列间距
autoColumns	boolean	true	自动计算列数
minColumns	number	1	最少列数
maxColumns	number	3	最多列数

ColumnConfig

属性	类型	说明
content	ReactNode	列内容
width	string	列宽度
minWidth	string	最小宽度
maxWidth	string	最大宽度

使用场景

1. 宽屏并排显示

// 在大屏幕上并排显示 2-3 个移动端页面
<MultiColumnLayout
  config={{
    maxColumns: 3,
    columnWidth: '375px',
  }}
>
  <MobilePage />
</MultiColumnLayout>

2. 固定多列内容

// 列表-详情布局
<MultiColumnLayout
  config={{
    columns: [
      { content: <UserList />, width: '300px' },
      { content: <UserDetail />, width: '500px' },
    ],
  }}
/>

最佳实践

1. 容器高度: 确保父容器有明确的高度

   <div style={{ height: '100vh' }}>
     <MultiColumnLayout>...</MultiColumnLayout>
   </div>

2. 响应式设计: 配合媒体查询调整列数

   const isMobile = useMediaQuery('(max-width: 768px)');
   <MultiColumnLayout
     config={{ maxColumns: isMobile ? 1 : 3 }}
   >
     ...
   </MultiColumnLayout>

3. 性能优化: 避免在每列中渲染大量数据