# PageLayout 一级页面布局

## Props

| 属性 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| children | 子组件（Slot 组件） | ReactNode | - | 否 |
| scrollRef | ScrollView ref | React.RefObject\<ScrollView\> | - | 否 |
| onScroll | 滚动回调 | (event: NativeSyntheticEvent\<NativeScrollEvent\>) => void | - | 否 |

## Slots

采用 compound component 模式，通过以下子组件定义各区域：

| 子组件 | 说明 |
|--------|------|
| PageLayout.Background | 背景层 |
| PageLayout.Navigation | 导航栏 |
| PageLayout.Header | 头部区域 |
| PageLayout.Alert | 提示区域 |
| PageLayout.Content | 主内容区（通过 ContainerWithGap 布局） |
| PageLayout.Footer | 底部区域（自动加安全距离 paddingBottom） |

## 用法

```tsx
<PageLayout>
  <PageLayout.Background>壁纸</PageLayout.Background>
  <PageLayout.Navigation>导航栏</PageLayout.Navigation>
  <PageLayout.Header>设备信息</PageLayout.Header>
  <PageLayout.Alert>告警提示</PageLayout.Alert>
  <PageLayout.Content>功能卡片</PageLayout.Content>
  <PageLayout.Footer>品牌信息</PageLayout.Footer>
</PageLayout>
```