---
nav:
  title: 组件
  order: 1
group:
  title: Layout
  order: 1
title: GridView
order: 10
category: pro
---

# GridView - 网格视图容器组件

## 简介

GridView 是 PisellGridPro 的视图区域组件，提供带滚动功能的内容展示区域，通常与 ToolBar、Header、Footer 等组件配合使用，构建完整的网格布局界面。

## 特性

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

## 基础用法

```tsx
import { GridView } from '@pisell/materials';

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

## 与 PisellGridPro 配合使用

```tsx
import { PisellGridPro, GridView } from '@pisell/materials';

export default () => (
  <PisellGridPro>
    {/* 头部工具栏 */}
    <PisellGridPro.ToolBar>
      <div>工具栏</div>
    </PisellGridPro.ToolBar>

    {/* 视图区域 */}
    <GridView>
      <div>主要内容区域</div>
    </GridView>

    {/* 底部区域 */}
    <PisellGridPro.Footer>
      <div>底部信息</div>
    </PisellGridPro.Footer>
  </PisellGridPro>
);
```

## API

### GridView Props

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

## 进阶用法

### 自定义样式

```tsx
import { GridView } from '@pisell/materials';

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

### 嵌套布局

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

export default () => (
  <GridView>
    <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>
  </GridView>
);
```

### 包含数据卡片

```tsx
import { GridView } 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 () => (
  <GridView>
    {dataList.map((item) => (
      <Card key={item.id} title={item.title} style={{ marginBottom: 16 }}>
        {item.content}
      </Card>
    ))}
  </GridView>
);
```

### 完整的 GridPro 布局示例

```tsx
import { PisellGridPro, GridView } from '@pisell/materials';
import { Button, Space } from 'antd';

export default () => (
  <PisellGridPro style={{ height: '100vh' }}>
    {/* 工具栏 */}
    <PisellGridPro.ToolBar>
      <Space>
        <Button type="primary">新建</Button>
        <Button>刷新</Button>
        <Button>导出</Button>
      </Space>
    </PisellGridPro.ToolBar>

    {/* 视图区域 - 自动滚动 */}
    <GridView>
      {Array.from({ length: 20 }).map((_, index) => (
        <div
          key={index}
          style={{
            padding: '20px',
            marginBottom: '10px',
            background: '#fff',
            borderRadius: '4px',
          }}
        >
          内容项 {index + 1}
        </div>
      ))}
    </GridView>

    {/* 底部 */}
    <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)
