# SubpageLayout 二级页面布局

## Props

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

## Slots

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

| 子组件 | 说明 |
|--------|------|
| SubpageLayout.Background | 背景层（absoluteFillObject） |
| SubpageLayout.Navigation | 导航栏（固定不滚动） |
| SubpageLayout.Header | 头部区域（随滚动） |
| SubpageLayout.Content | 主内容区（通过 ContainerWithGap 布局，gap=8） |
| SubpageLayout.Footer | 底部区域（绝对定位，自动加安全距离） |

## 用法

```tsx
<SubpageLayout onScroll={scrollHandler}>
  <SubpageLayout.Navigation>
    <NavigationBar title="设置" titleSize="large" collapseTitle titleVisible={titleVisible} />
  </SubpageLayout.Navigation>
  <SubpageLayout.Header>
    <LargeTitle />
  </SubpageLayout.Header>
  <SubpageLayout.Content>
    <ListCard title="设置项">...</ListCard>
  </SubpageLayout.Content>
  <SubpageLayout.Footer>
    <BlockButton title="保存" type="primary" onPress={save} />
  </SubpageLayout.Footer>
</SubpageLayout>
```

## 注意事项

- Footer 使用绝对定位固定在底部，高度通过 onLayout 测量后设置内容区 paddingBottom
- 无 Footer 时，paddingBottom = safeBottom + 28
- Content 内子元素之间自动有 8px 间距
- 与 PageLayout 的区别：无 AlertContainer slot，Footer 绝对定位在底部