OpenHarmony验证码怎样适配折叠屏

在 OpenHarmony（含 HarmonyOS NEXT/标准 OpenHarmony）上做验证码（图形验证码 / 短信验证码 / 滑块验证码等）的折叠屏适配，核心不是“验证码算法”，而是折叠屏形态下的 UI 布局、输入体验与状态连续性。下面从工程实践角度说明。

一、折叠屏的主要适配点

折叠屏常见形态：

• 展开（大屏 / 平板态）
• 折叠（手机态）
• 悬停（半折，如 90°）

验证码适配要关注：

1. 布局不溢出、不挤压
2. 输入框不被键盘遮挡
3. 折叠 / 展开过程中不丢验证码状态
4. 不同形态下点击区域足够大

二、布局适配（重点）

1. 使用响应式布局

OpenHarmony 推荐：

• Flex / Grid / RelativeContainer
• 避免固定 px 宽高

示例（ArkTS）：

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
  Text('请输入验证码')
    .fontSize(18)

  Row() {
    TextInput({ placeholder: '验证码' })
      .width('60%')
    Button('获取')
      .width('35%')
  }
  .width('90%')
  .justifyContent(FlexAlign.SpaceBetween)
}

✅ 展开 / 折叠都会自动重排

2. 使用断点适配（大屏 / 小屏）

import { mediaquery } from '@kit.ArkUI'

let isExpanded = false
mediaquery.matchMediaSync('(min-width: 600vp)').on('change', (e) => {
  isExpanded = e.matches
})

根据 isExpanded：

• 折叠：垂直布局
• 展开：左右布局 / 更大字号

三、输入框与键盘适配

验证码常见问题是键盘弹起遮挡输入框

方案 1：使用 EditText 的自动上移

TextInput()
  .onFocus(() => {
    // 页面自动滚动
  })

方案 2：监听键盘高度

window.on('keyboardHeightChange', (height) => {
  // 动态调整 paddingBottom
})

四、折叠 / 展开状态不丢验证码

⚠️ 折叠屏切换 不会销毁页面，但你要防止：

• 重新请求验证码
• 清空已输入内容

✅ 正确做法：

• 验证码存到 @State 或 AppStorage
• 不依赖 aboutToAppear 重置

@State code: string = ''

TextInput({ text: this.code })
  .onChange(val => this.code = val)

五、滑块 / 图形验证码适配建议

图形验证码

• 使用 SVG 或 Canvas
• 尺寸使用 % / vp
• 点击刷新区域 ≥ 48vp

滑块验证码

• 轨道宽度用 100%
• 折叠时减小滑块尺寸但保持可拖拽

六、悬停态（半折叠）特殊处理

半折时：

• 上半屏显示验证码
• 下半屏放键盘 / 按钮

可用：

mediaquery.matchMediaSync('(fold-status: half)')

七、无障碍 & 安全建议

• 验证码输入框设置：

TextInput()
  .type(InputType.Number)
  .maxLength(6)

• 支持语音播报（无障碍）
• 防止截屏：

window.setWindowFlags(WindowFlag.AVOID_SCREEN_SHOT)

八、总结 checklist ✅

• [ ] 使用响应式布局
• [ ] 适配断点（折叠 / 展开）
• [ ] 键盘不遮挡验证码
• [ ] 折叠不丢状态
• [ ] 点击区域足够大
• [ ] 支持悬停态（如适用）

如果你能说明：

• 用的是 OpenHarmony 3.x / 4.x / 5.x
• 验证码是 短信 / 图形 / 滑块
• 使用的 ArkTS / JS / 原生 C++

我可以给你一份可直接用的完整示例代码。