### 🌟 鸿蒙宝藏案例分享：Pura X 外屏开发实战解析
大家好！我是你们的鸿蒙开发小伙伴。今天在翻阅官方文档时，意外发现了华为藏着的"宝藏级"案例——Pura X 折叠屏外屏开发实践！这些实战方案简直太实用了，但竟然很少人讨论。赶紧整理成干货分享给大家，全程高能，记得收藏哦~
* * *
### 🧩 一、为什么需要专门适配外屏？
Pura X 采用**上下折叠设计**，外屏是 **1:1 方形屏**（内屏16:10）。这意味着：
- 外屏高度只有内屏的 **1/2**（约 24vp vs 48vp）
- 操作方式需**单手友好**（查看通知/支付/导航等高频操作）
- 需特殊处理**布局挤压**/**内容截断**问题
官方通过 **5 大核心场景**给出解决方案，下面我们逐条拆解👇
* * *
### 🚀 二、五大场景开发实战（附代码解析）
#### 1️⃣ **小窗口响应式布局**
**痛点**：同一组件在内/外屏需要不同尺寸
**方案**：通过**双断点判断**动态调整样式
```
Image($r('app.media.icon'))
.height(
// 关键判断：横屏断点sm + 竖屏断点md
this.currentWidthBreakpoint === 'sm' &&
this.currentHeightBreakpoint === 'md'
? 24 // 外屏高度
: 48 // 内屏高度
)
.aspectRatio(1) // 保持正方形
```
#### 2️⃣ **内容显隐控制**
**痛点**：外屏需隐藏非核心元素（如Banner广告）
**方案A**：使用 `visibility` 控制显示
```
Column() {
Text("外屏专属内容").fontSize(12)
}
.visibility(
this.currentWidthBreakpoint === 'sm' &&
this.currentHeightBreakpoint === 'md'
? Visibility.Visible
: Visibility.None
)
```
**方案B**：条件渲染（适合复杂组件）
```
if (this.isSmallScreen) { // 自定义判断函数
Column() {
Button("外屏快捷支付")
}
}
```
#### 3️⃣ **滑动容器优化**
**痛点**：外屏高度不足导致内容被截断
**神操作**：用 `Scroll` 组件 + **自动失效机制**
```
Scroll() {
Column() { /* 主要内容 */ }
}
.scrollBar(BarState.Off) // 隐藏滚动条
.height('100%')
```
**亮点**：当内容高度<容器高度时，Scroll 自动禁用滑动，无需手动判断！
#### 4️⃣ **短视频沉浸式适配**
**效果**：视频全屏沉浸 + 控件半透明悬浮
```
Stack() {
// 1. 底层视频（全屏）
Image($r('app.media.video_bg'))
.objectFit(ImageFit.Cover) // 关键：保持比例填充
// 2. 顶部标题栏（避让刘海）
Row() { ... }
.padding({ top: $r('app.float.topAvoidHeight') })
// 3. 侧边悬浮控件（带弹性留白）
Scroll() {
Column() {
Blank().layoutWeight(3) // 上方弹性占位
Button("点赞")
Blank().layoutWeight(1) // 下方弹性占位
}
}
}
```
#### 5️⃣ **滑动隐藏控件（超实用！）**
**交互效果**：
- 上滑 → 隐藏标题栏/底栏
- 下滑 → 渐显复原
**核心代码**：
```
// 监听滚动偏移量
.onScrollFrameBegin((offset: number) => {
if (offset > 0) { // 上滑
this.topBarHeight *= 0.95 // 高度渐变缩小
this.barOpacity -= 0.05 // 透明度渐变
} else { // 下滑
animateTo({ duration: 300 }, () => {
this.topBarHeight = 78 + avoidHeight // 恢复高度
this.barOpacity = 1 // 恢复透明度
})
}
})
```
* * *
### 💡 三、避坑指南
1. **系统规避区处理**
一定要用 `getWindowAvoidArea()` 获取刘海/下巴高度：
```
const topAvoid = window.getWindowAvoidArea(AvoidAreaType.TYPE_SYSTEM)
AppStorage.setOrCreate('topAvoidHeight', topAvoid.topRect.height)
```
1. **折叠状态监听**
```
// 监听折叠状态变化
foldStatus: FoldStatus = FoldStatus.FOLD_STATUS_EXPANDED
aboutToAppear() {
foldController.on('foldStatusChange', (status) => {
this.foldStatus = status
})
}
```
1. **转场动画优化**
内屏→外屏时，用页面接续保证流畅性：
```
// 在pageTransition中定义共享元素
PageTransition() {
PageTransitionEnter({ duration: 250 })
.sharedTransition('sharedButton')
}
```
* * *
### 🔚 四、结语
这次挖出的 Pura X 外屏适配方案，简直是折叠屏开发的"黄金手册"！特别是**滑动隐藏控件**和**双断点响应式**的设计，能直接用到其他鸿蒙设备开发中。
**最后送大家一句话**：折叠屏生态正在爆发，现在吃透这些技术，你就是明年涨薪最靓的仔！ 💪
（原创整理不易，如果觉得有用，点个赞让我知道吧~ 下期分享"鸿蒙分布式相机开发"实战！）
