---
title: WKCardLayout 卡片布局
group:
  title: 基础组件
  path: /base/
---

## 何时使用

- 常用于一行展示多个 item 的情况
- 改组件提供两种显示效果
  - 多列展示时每列依次显示需要显示的信息
  - 每行等高

## 基本使用

```tsx
/**
 * title: 可能会导致不等高的情况
 * desc: 这种情况其实也是可以通过固定item的高度到达等高的目的，但是对于一些复杂的场景这是不好控制的
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { View, WKCardLayout, WKText } from '@wakeapp/components';

export default () => {
  const i = {
    id: 72,
    itemNo: '202112160011',
    name: '苹果',
  };

  const dataSource = Array(20).fill(i);

  return (
    <PageWrapper title="基本使用">
      <View style={{ width: '100%', height: '100%' }}>
        <WKCardLayout
          colCount={3}
          colGap="10px"
          rowGap="10px"
          dataSource={dataSource}
          renderItem={item => {
            return (
              <View
                style={{
                  marginBottom: '10px',
                  backgroundColor: 'var(--primary-color)',
                  height: Math.max(50, Math.random() * 65),
                }}
                key={`${item.itemNo} + ${Math.random()}`}
              >
                <WKText text={item.name} />
              </View>
            );
          }}
        ></WKCardLayout>
      </View>
    </PageWrapper>
  );
};
```

## 等高布局

```tsx
import React from 'react';
import PageWrapper from '../PageWrapper';
import { View, WKCardLayout, WKText } from '@wakeapp/components';

export default () => {
  const i = {
    id: 72,
    itemNo: '202112160011',
    name: '苹果',
  };

  const dataSource = Array(20).fill(i);

  return (
    <PageWrapper title="等高布局">
      <View style={{ width: '100%', height: '100%' }}>
        <WKCardLayout
          colCount={3}
          isHorizontal
          dataSource={dataSource}
          renderItem={item => {
            return (
              <View
                style={{
                  backgroundColor: 'var(--success-color)',
                  height: Math.max(50, Math.random() * 65),
                }}
                key={`${item.itemNo} + ${Math.random()}`}
              >
                <WKText text={item.name} />
              </View>
            );
          }}
        ></WKCardLayout>
      </View>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKCardLayout/index.d.ts'></API>
