---
nav:
  title: 组件
  order: 1
group:
  title: 基础组件
  order: 1
title: GridView (PisellGridView)
order: 10
category: pro
---

# GridView - 网格视图容器组件

GridView（对外导出为 **PisellGridView**）是 PisellGridPro 的视图区域组件，提供带滚动的内容展示区域，通常与 Header、ToolBar、Footer 等配合使用，也可单独使用。

## 何时使用

- 需要可滚动的主内容区，且与 PisellGridPro 一起构成标准页面布局
- 单独需要一块「占满剩余高度并内部滚动」的容器时

## 特性

- 📦 **容器组件**: 作为 GridPro 的视图区域容器
- 📜 **自动滚动**: 内置 PisellScrollView，支持垂直滚动
- 🎨 **灵活布局**: 支持自定义样式和类名
- 🔄 **内容包裹**: 可包含任意子组件作为内容
- 🎭 **TypeScript**: 完整的 TypeScript 类型定义

## 基础用法

从 `@pisell/materials` 引入 **PisellGridView** 使用，与 PisellGridPro、PisellToolBar 等组合构成完整页面布局。

```tsx
import React from 'react';
import { PisellGridView } from '@pisell/materials';

export default () => (
  <PisellGridView>
    <div>内容区域 1</div>
    <div>内容区域 2</div>
    <div>内容区域 3</div>
  </PisellGridView>
);
```

## 与 PisellGridPro 配合使用

```tsx
import React from 'react';
import { PisellGridPro, PisellToolBar, PisellGridView } from '@pisell/materials';

export default () => (
  <PisellGridPro>
    <PisellToolBar topLeft={<div>工具栏</div>} />
    <PisellGridView>
      <div>主要内容区域</div>
    </PisellGridView>
    <PisellGridPro.Footer>
      <div>底部信息</div>
    </PisellGridPro.Footer>
  </PisellGridPro>
);
```

## API

### GridView (PisellGridView) Props

| 参数      | 说明       | 类型              | 默认值 | 必填 |
| --------- | ---------- | ----------------- | ------ | ---- |
| children  | 子元素内容 | `React.ReactNode` | -      | ✅   |
| className | 自定义类名 | `string`          | -      | ❌   |
| style     | 自定义样式 | `CSSProperties`   | -      | ❌   |

## 进阶用法

### 自定义样式

```tsx
import React from 'react';
import { PisellGridView } from '@pisell/materials';

export default () => (
  <PisellGridView
    className="custom-grid-view"
    style={{
      backgroundColor: '#f5f5f5',
      padding: '20px',
    }}
  >
    <div>自定义样式的内容区域</div>
  </PisellGridView>
);
```

### 嵌套布局

```tsx
import React from 'react';
import { PisellGridView } from '@pisell/materials';
import { Row, Col } from 'antd';

export default () => (
  <PisellGridView>
    <Row gutter={16}>
      <Col span={8}>
        <div>列 1</div>
      </Col>
      <Col span={8}>
        <div>列 2</div>
      </Col>
      <Col span={8}>
        <div>列 3</div>
      </Col>
    </Row>
  </PisellGridView>
);
```

### 包含数据卡片

```tsx
import React from 'react';
import { PisellGridView } from '@pisell/materials';
import { Card } from 'antd';

const dataList = [
  { id: 1, title: '卡片 1', content: '内容 1' },
  { id: 2, title: '卡片 2', content: '内容 2' },
  { id: 3, title: '卡片 3', content: '内容 3' },
];

export default () => (
  <PisellGridView>
    {dataList.map((item) => (
      <Card key={item.id} title={item.title} style={{ marginBottom: 16 }}>
        {item.content}
      </Card>
    ))}
  </PisellGridView>
);
```

### 完整的 GridPro 布局示例

```tsx
import React from 'react';
import { PisellGridPro, PisellToolBar, PisellGridView } from '@pisell/materials';
import { Button, Space } from 'antd';

export default () => (
  <PisellGridPro style={{ height: '100vh' }}>
    <PisellToolBar
      topLeft={
        <Space>
          <Button type="primary">新建</Button>
          <Button>刷新</Button>
          <Button>导出</Button>
        </Space>
      }
    />
    <PisellGridView>
      {Array.from({ length: 20 }).map((_, index) => (
        <div
          key={index}
          style={{
            padding: '20px',
            marginBottom: '10px',
            background: '#fff',
            borderRadius: '4px',
          }}
        >
          内容项 {index + 1}
        </div>
      ))}
    </PisellGridView>
    <PisellGridPro.Footer>
      <div style={{ textAlign: 'center' }}>共 20 条数据</div>
    </PisellGridPro.Footer>
  </PisellGridPro>
);
```

## 注意事项

1. **父容器高度**: GridView 会占满父容器剩余高度，确保父容器有明确的高度设置
2. **滚动方向**: 内置的 PisellScrollView 默认为垂直滚动（overflow: 'y'）
3. **性能优化**: 当内容项很多时，考虑使用虚拟滚动或分页加载
4. **布局配合**: 通常作为 PisellGridPro 的子组件使用，单独使用时需要注意容器高度

## 相关组件

- [PisellGridPro](../PisellGridPro.md) - 网格布局容器
- [ToolBar](../ToolBar/ToolBar.md) - 工具栏组件
- [PisellScrollView](../../PisellScrollView/PisellScrollView.md) - 滚动视图组件

## 设计指南

详见 [设计文档](./GridView.$tab-design.md)

## 开发指南

详见 [开发文档](./GridView.$tab-dev.md)

## 测试指南

详见 [测试文档](./GridView.$tab-test.md)
