AppLayout 应用布局
定义应用的整体布局结构
功能描述
提供应用的顶层布局结构，管理头部、内容区、底部的布局关系。
属性规范
| 属性 | 类型 | 必需 | 默认值 | 说明 |
|---|---|---|---|---|
| children | node | Y | - | 主内容区域 |
| header | node | N | - | 顶部区域 |
| footer | node | N | - | 底部区域 |
| safeArea | boolean | N | true | 是否适配安全区域 |
| scrollable | boolean | N | true | 内容区是否可滚动 |
布局规范
┌─────────────────────────────────────┐
│ [状态栏占位 - 安全区域] │
├─────────────────────────────────────┤
│ Header │ ← 固定定位
├─────────────────────────────────────┤
│ │
│ Content │ ← 可滚动区域
│ (children) │
│ │
├─────────────────────────────────────┤
│ Footer │ ← 固定定位
├─────────────────────────────────────┤
│ [底部安全区域 - Home Indicator] │
└─────────────────────────────────────┘行为规范
必须 (MUST)
- header 固定在顶部，不随内容滚动
- footer 固定在底部，不随内容滚动
- content 区域可滚动
- 适配顶部安全区域（刘海屏）
- 适配底部安全区域（Home Indicator）
建议 (SHOULD)
- 支持 header 滚动隐藏/显示
- 支持下拉刷新
- 内容不足一屏时正确布局
可选 (MAY)
- 支持 header 透明渐变效果
- 支持滚动到顶部
安全区域
iOS 安全区域
env(safe-area-inset-top) // 顶部（刘海）
env(safe-area-inset-bottom) // 底部（Home Indicator）
env(safe-area-inset-left) // 左侧（横屏）
env(safe-area-inset-right) // 右侧（横屏）Android 安全区域
- 状态栏：通过 viewport-fit=cover 配合 padding
- 底部导航：系统自动处理
设计标注
尺寸规格
| 部分 | 规格 |
|---|---|
| Header 高度 | 44-56px + 安全区域 |
| Footer 高度 | 根据内容 + 安全区域 |
| 横向安全边距 | 16px |
变体
带 TabBar
┌─────────────────────────────────────┐
│ Header │
├─────────────────────────────────────┤
│ Content │
├─────────────────────────────────────┤
│ TabBar │ ← footer = TabBar
└─────────────────────────────────────┘全屏页面
┌─────────────────────────────────────┐
│ │
│ Content │ ← header/footer = null
│ │
└─────────────────────────────────────┘带浮动按钮
┌─────────────────────────────────────┐
│ Header │
├─────────────────────────────────────┤
│ Content │
│ [FAB] │ ← 浮动操作按钮
├─────────────────────────────────────┤
│ TabBar │
└─────────────────────────────────────┘