Apple 在 2026 年 9 月 9 日发布了 iPhone Duo——首款折叠屏 iPhone，外屏 5.4 英寸、内屏 7.6 英寸，中间有一条物理铰链。设备可以完全合上、半折叠像一本书、或者完全展开成近似方形的双屏布局。

 

对开发者来说，这不是"又多了一种屏幕尺寸"这么简单。iPhone Duo 引入了几个过去 iOS 生态里不存在的概念：Reserved Region（保留区域）、Vertical Controls（竖排工具栏）、Arrangement View（双视图布局容器），以及一个关键变化——内屏不再遵守 App 声明的屏幕方向，过去靠 portrait / landscape 判断布局的代码大概率要重写。

iOS Native、Flutter、React Native、UniApp/小程序，再加上腾讯的 Kuikly，这五类技术栈在折叠屏适配上的能力和代价差异很大。

 

技趣星球 · 用技术创造乐趣。

 

日期：2026-09-14

 

 

 

iPhone Duo 给布局带来的根本变化

 

过去做 iOS 适配，核心变量是屏幕尺寸和方向。iPhone Duo 加入后，变量变成了：

 

  • 外屏还是内屏：两个物理显示区域，尺寸完全不同
  • 折叠程度：完全合上、半折叠、完全展开，中间状态持续变化
  • Reserved Region：摄像头、Dynamic Island、折叠铰链区域，内容必须主动避让
  • Vertical Controls：外屏因宽高比更宽更矮，系统把顶部/底部工具栏移到侧边

 

Apple 在 HIG（Human Interface Guidelines）里强调了一个核心原则：外屏和内屏应该保持同一套 UI，只是信息层级展开。比如邮件 App，外屏显示列表或单封邮件，展开后左侧列表、右侧邮件正文，UI 是一个滑动放大的过程，不是突然跳进一个"平板模式"。

这意味着适配的核心不是做两套界面，而是让同一套界面能正确响应连续变化的窗口尺寸。

 

iOS Native 方案：SwiftUI + UIKit

 

Apple 为 iPhone Duo 提供了一整套官方方案，从设计规范到 API 全覆盖。

 

Size Class 是唯一可靠的布局依据

 

iPhone Duo 的内屏在两个维度上都是 Regular Size Class，外屏则是 Compact Width。Apple 明确说：内屏不遵守 supportedInterfaceOrientations，过去大量靠方向判断布局的代码需要改成基于 Size Class 和真实窗口尺寸。

区域：Horizontal，Vertical，含义
外屏：Compact，Compact/Variable，标准 iPhone 行为
内屏：Regular，Regular，可容纳侧边栏、双栏布局

在 SwiftUI 里，通过 horizontalSizeClass 和 verticalSizeClass 环境值判断；UIKit 里通过 traitCollection 获取。

 

Reserved Region API（iOS 27.1 新增）

 

Reserved Region 是 iPhone Duo 最核心的新概念，表示屏幕上有硬件占据、内容需要避让的区域，分两类：

 

  • Division（分割）：折叠铰链区域，把一个连续屏幕分成多个可用区域
  • Occlusion（遮挡）：摄像头区域，需要避免内容和硬件重叠

 

iOS 27.1 新增了对应的 API：

 

// SwiftUI
let folds = geometryProxy.reservedRegions(kind: .division)
let occlusions = geometryProxy.reservedRegions(kind: .occlusion)

 

// 包含非活跃区域（结构决策用）
let allFolds = geometryProxy.reservedRegions(kind: .division, options: .includeInactive)

 

 

// UIKit
let regions = view.reservedRegions(kind: .division)
let frames = regions.map(\.frame)

 

如果是自定义 UI，需要查询这些区域并主动避让。标准系统组件（Alert、Sheet、Popover）会自动处理。

 

Arrangement View：官方推荐的双视图容器

 

Arrangement View 是 Apple 为双屏设备设计的布局容器，管理 Primary View 和 Secondary View，根据窗口尺寸、方向和 Reserved Region 自动重组。

两种模式：

 

  • Split（分栏）：两个视图并排或上下排列，对应 HStack/VStack
  • Overlay（叠加）：一个视图叠在另一个上面，对应 ZStack

 

 

// SwiftUI Split 模式
ArrangementView {
    PlayerView()
} secondary: {
    UpNextView()
}
.arrangementViewStyle(.split)
.arrangementViewStyle(.split.axes(.horizontal))

 

// SwiftUI Overlay 模式
ArrangementView {
PlayerView()
} secondary: {
UpNextView()
}
.arrangementViewStyle(.overlay)

 

 

// UIKit
let arrangementVC = UIArrangementViewController()
arrangementVC.setViewController(playerVC, for: .primary)
arrangementVC.setViewController(upNextVC, for: .secondary)
arrangementVC.updateArrangement(.split.axes(.horizontal))

 

 

Vertical Controls：侧边工具栏

 

外屏的宽高比更宽更矮，系统把导航、Toolbar、Tab Bar 从顶部/底部移到侧边，形成 Vertical Axis。Apple 给了一套明确的顺序：

 

  • 顶部：主导航（Back/Close）
  • 接着：突出操作（Done）
  • 其余项目保持原始分组
  • 空间不足时从底部向上进入 Overflow

 

系统 Toolbar 基本能做到自动适配，自绘 UI 需要处理垂直布局。

 

系统自动处理 vs 开发者需手动处理

 

这个表格是判断框架适配能力最直接的方式。

系统自动处理（Native 优势所在）：

事项：说明
标准导航容器：NavigationStack、NavigationSplitView、TabView 自动适配折叠
安全区域避让：标准 bars 自动避开状态栏和摄像头
Alert/Sheet/Popover：系统自动移至可见区域
Split View 列宽：系统自动根据对称性调整
连续滚动内容：List、ScrollView 保持稳定，不会因折叠跳动

开发者需手动处理：

事项：说明
移除 UIScreen.main：双屏设备上主屏不明确，已标记弃用
Size Class 替代 Orientation：内屏不遵守 supportedInterfaceOrientations
自定义控件避让 Reserved Region：需查询 reservedRegions 自行处理
安全区域非对称处理：左右边距不再相等，需独立计算
竖排工具栏内容适配：自定义 toolbar item 可能需要垂直布局
多窗口支持：新窗口只能在内屏创建，需处理错误路径

 

混合开发框架的适配能力

 

 

Kuikly：腾讯开源的 KMP 跨端方案，折叠屏适配思路最完整

 

Kuikly 是腾讯大前端 Oteam 基于 Kotlin Multiplatform 开发的跨端框架，覆盖 Android、iOS、HarmonyOS、H5、微信小程序、Mac 六大平台，支撑业务日活超 5 亿。腾讯新闻在 2026-09-10 专门发文介绍 Kuikly 对 iPhone Duo 的适配方案。

Kuikly 的独特之处在于：它不像 Flutter 或 React Native 那样用一套自绘 UI 抹平平台差异，而是基于 KMP 共享 Kotlin 代码，各端渲染仍走原生系统能力。这意味着它能同时获得"代码复用"和"系统原生适配"两方面的好处。

能做到的：

 

  • 统一尺寸模型：各端使用相同的容器尺寸和布局断点语义，窗口变化统一传递到共享 Kotlin 层
  • 统一状态模型：选中项、输入内容和页面层级不依赖具体平台容器，折叠/展开时状态自动保持
  • 统一布局策略：单栏、双栏、多栏遵循同一套切换规则，业务只需定义一套响应式适配规则
  • 统一导航语义：业务只表达"进入详情""返回上一级"，组件根据当前窗口形态自动映射为小屏的页面跳转或大屏的区域切换
  • 统一交互原则：动画节奏、返回优先级和手势作用域在共享层协同设计
  • 平台原生质感保留：同一套折叠屏页面可以共享布局、路由和交互逻辑，同时自然融入 iOS Liquid Glass 等平台特性

 

Kuikly 解决的核心问题：

 

  • 路由统一：小屏整页跳转 vs 大屏区域切换，由响应式数据驱动，统一管理内容层级、生命周期和状态恢复
  • 动画连贯：从单栏切换到双栏时，同步编排列表宽度、详情位置和导航元素，避免内容闪烁或瞬间跳变
  • 手势统一：小屏二级页面响应系统返回，大屏优先回退当前区域的内部层级，区域栈清空后再交由外层页面处理
  • 安全区抽象：各平台的状态栏、导航栏、刘海、挖孔、圆角等物理限制，统一抽象成一套安全距离，并随尺寸变化同步更新

 

Kuikly 的 Sample code 已开源：https://github.com/Tencent-TDS/KuiklyUI/tree/feat/kuikly_fold

 

Flutter：跨端框架中支持最完善

 

Flutter 在折叠屏适配上提供了最完整的官方支持。

能做到的：

 

  • DisplayFeature API（Flutter 3.13+）：通过 MediaQueryData.displayFeatures 暴露折叠区域和刘海区域，支持 DisplayFeatureType.fold 和 DisplayFeatureType.hinge 两种类型
  • 物理屏幕尺寸：使用 Display API 获取物理屏幕真实尺寸，解决 letterboxing 导致的 MediaQuery 尺寸不准
  • Adaptive Navigation：NavigationBar（底部导航）和 NavigationRail（侧边导航）自动切换
  • Multi-pane 布局：通过 Row + Expanded 实现主从分栏
  • 状态保持：PageStorageKey 在布局切换时保持滚动位置

 

需要自行处理的：

 

  • Hinge 区域精确避让：API 能检测到铰链位置，但需要开发者手动使用 MultiChildLayoutDelegate 或 padding 避开
  • 折叠动画过渡：折叠/展开时的 UI 动画需要手动处理
  • 状态保持与恢复：折叠/展开时的状态迁移需要自行实现

 

Flutter 的响应式布局方案是 LayoutBuilder + MediaQuery + 自定义断点系统，断点通常用 600dp（平板）、768dp（iPad）、1024dp（桌面级）。

 

React Native：基础支持，社区补位

 

React Native 提供了基础的响应式能力，折叠屏专项功能主要依赖社区。

能做到的：

 

  • useWindowDimensions：官方推荐的响应式方案，旋转、折叠、分屏都会触发重新渲染
  • Safe Area：通过 react-native-safe-area-context 获取动态安全区域 insets
  • Flexbox 布局：基于 Yoga 引擎，天然适合响应式
  • Android 16 支持（RN 0.81+）：默认启用 edge-to-edge 渲染

 

需要自行处理或做不到的：

 

  • 无内置折叠屏 API：框架层面没有专门的 FoldingFeature API，需要通过 useWindowDimensions 的尺寸变化推断
  • 无 CSS 媒体查询：RN 没有浏览器 CSS 引擎，需要用 JS 实现 breakpoint 系统
  • SafeAreaView 已弃用（RN 0.81+）：需要迁移到其他方案
  • 折痕区域避让：无相关 API，需要原生模块

 

社区方案如 react-native-expo-responsive-ui 提供了内置折叠屏检测，但属于第三方实现。

 

UniApp / 小程序：适配难度最高

 

UniApp 和微信小程序的折叠屏适配目前最困难。

能做到的：

 

  • resizable 配置：微信小程序支持在 app.json 中配置 resizable: true，允许应用适应不同屏幕尺寸
  • rpx 响应式单位：基于屏幕宽度的响应式像素
  • match-media 组件：UniApp 提供的媒体查询组件，支持组件级别的响应式适配

 

做不到或需要大量 Workaround 的：

 

  • 无官方折叠屏 API：微信小程序官方目前没有专门的折叠屏适配指南
  • rpx 计算异常：折叠屏展开/折叠时，rpx 计算基准不更新，导致布局错乱，需要手动监听并重启小程序
  • 无法自动感知折叠事件：小程序没有收到屏幕折叠的通知，需要客户端引擎配合重启
  • 多窗口方案仅 Web 支持：leftWindow/rightWindow 在 App 端不支持

 

京东小程序团队公开了他们的折叠屏适配经验：通过 onConfigurationChanged 获取最新屏幕参数，识别到折叠后在当前进程重启小程序而非杀死进程，替换 JS 引擎中对 window 宽高的使用，改用客户端传递的真实数据。

 

框架对比：能做到 vs 做不到

 

能力：iOS Native，Flutter，React Native，Kuikly，UniApp/小程序
检测折叠/铰链位置：✅ ReservedRegion API，✅ DisplayFeature API，⚠️ 需自行推断，✅ 统一传递到共享层，❌ 无 API
获取物理屏幕尺寸：✅ 原生 API，✅ Display API，✅ useWindowDimensions，✅ 统一尺寸模型，⚠️ rpx 基准可能不准
系统级避让（摄像头/折叠）：✅ 自动，⚠️ 需手动 padding，❌ 需原生模块，✅ 安全区抽象统一更新，❌ 需手动间距
双栏/分屏布局容器：✅ ArrangementView，✅ Row + Expanded，⚠️ 需自行实现，✅ 统一布局策略，⚠️ 仅 Web 支持
自适应导航：✅ NavigationSplitView，✅ NavigationRail，⚠️ 需自行实现，✅ 统一导航语义，⚠️ 需自行实现
安全区动态避让：✅ 自动，✅ SafeArea，✅ 第三方库，✅ 统一安全距离，✅ env(safe-area-inset)
折叠状态保持：⚠️ 需自行处理，⚠️ 需自行处理，⚠️ 需自行处理，✅ 统一状态模型，❌ 需重启小程序
折叠动画过渡：⚠️ onHingeChange，⚠️ 需自行处理，❌ 无内置，✅ 统一动画编排，❌ 无内置
手势统一处理：⚠️ 需自行处理，⚠️ 需自行处理，⚠️ 需自行处理，✅ 统一返回策略，❌ 无内置

 

一个关键判断：系统组件是 Native 的核心优势

 

Flutter 在折叠屏适配上已经做得很好了——DisplayFeature API、物理屏幕尺寸、Adaptive Navigation 一应俱全。但 Native 和 Flutter 之间有一个本质差距：

系统组件的自动适配能力。

iPhone Duo 的 Alert、Sheet、Popover、Context Menu、Split View 列宽调整、连续滚动内容稳定性，这些在 iOS Native 里是系统自动处理的。你用的是 UIAlertController，它自动避开折痕；你用 NavigationSplitView，它自动处理折叠/展开的列宽变化；你用 List，滚动行为不会因为折叠而跳动。

在 Flutter 里，你需要用 MediaQuery 检测折叠区域，然后用 Padding 或 MultiChildLayoutDelegate 手动避开。框架给了你数据，但不会替你做决策。

React Native 和 UniApp/小程序在这方面的差距更大——它们连折叠区域的 API 都没有，需要原生模块或客户端引擎配合。

这不是说跨端框架不能做，而是说当设备引入新的物理形态（折叠、卷轴、三折），Native 框架能更快地把系统能力暴露给开发者，跨端框架需要等一轮社区方案成熟。

Kuikly 走了一条不同的路：它不是自绘 UI 抹平差异，而是基于 KMP 共享 Kotlin 代码，各端渲染仍走原生系统能力。这种架构让它能同时获得"代码复用"和"系统原生适配"两方面的好处。在折叠屏适配这件事上，Kuikly 的价值不在于它提供了多少专属 API，而在于它把尺寸响应、状态管理、导航语义、动画和手势这些跨端难点，统一沉淀到了共享层，业务只需定义一次规则。

 

实际适配建议

 

针对不同技术栈的适配策略，可以按这个优先级考虑：

Native（SwiftUI / UIKit）

 

  • 如果 App 已经在 iOS 上，升级 Xcode 27.1、替换 UIScreen.main、用 Size Class 替代 Orientation 判断，就能达到"可用"的 baseline
  • 自定义 UI 多的 App，需要额外处理 Reserved Region 查询和避让
  • 这是适配成本最低、体验最好的路径

 

Flutter

 

  • 如果团队熟悉 Flutter，折叠屏适配成本远低于 RN/UniApp
  • 用 LayoutBuilder + MediaQuery.displayFeatures 做响应式，NavigationRail 做自适应导航
  • 折痕避让和状态保持需要自己写，但框架给了足够的数据和工具
  • 适合追求一套代码多端运行的团队

 

React Native

 

  • 基础响应式没问题，useWindowDimensions 能捕获尺寸变化
  • 折叠屏专项能力（折痕避让、铰链状态）需要原生模块或社区库
  • 适合已有 RN 技术栈、对折叠屏体验要求不极致的场景

 

Kuikly

 

  • 基于 KMP 共享 Kotlin 代码，各端走原生渲染，天然适合需要多端一致体验又不想牺牲原生质感的团队
  • 框架已内置窗口变化监听、响应式布局、路由统一、动画编排和手势处理，业务只需定义一套规则
  • 腾讯内部日活 5 亿+的业务已经验证，Sample code 已开源：https://github.com/Tencent-TDS/KuiklyUI/tree/feat/kuikly_fold
  • 适合已经有 Kotlin/Android 技术栈、同时覆盖 iOS/鸿蒙/小程序的团队

 

UniApp / 小程序

 

  • 目前折叠屏适配最困难，rpx 单位在折叠/展开时计算基准不更新是核心问题
  • 京东小程序的经验是：监听配置变化 + 进程内重启 + 客户端传递真实尺寸
  • 如果业务强依赖小程序生态，需要预留充足的测试和 Workaround 时间

 

 

最后

 

iPhone Duo 不是第一个折叠屏设备，但它是第一个来自 Apple 的折叠屏设备。Apple 的生态控制力意味着这次适配不是"可选优化"，而是后续会被逐步强制的标准。

从开发者的角度看，折叠屏时代的核心技能变化很明确：从"固定尺寸布局"转向"连续尺寸响应"。Size Class、Reserved Region、Arrangement View 这些概念会逐渐从 iPhone Duo 扩散到 iPad、Mac，甚至未来的设备形态。

跨端框架正在追赶，但目前 Native 在"系统组件自动适配"这件事上仍有不可替代的优势。选择哪个框架，最终还是要回到你的团队结构、业务形态和对体验的要求上。

技趣星球 · 用技术创造乐趣。

参考来源：

 

  • Apple HIG《Designing for iPhone Duo》（2026-09-09）：https://developer.apple.com/design/human-interface-guidelines/designing-for-iphone-duo
  • Apple Tech Talk 111461《Prepare your app for iPhone Duo》（2026-09-09）：https://developer.apple.com/videos/play/tech-talks/111461/
  • Apple Tech Talk 111462《Raise the bar with iPhone Duo》（2026-09-09）：https://developer.apple.com/videos/play/tech-talks/111462/
  • Apple Tech Talk 111463《Strike a pose with adaptive layouts on iPhone Duo》（2026-09-09）：https://developer.apple.com/videos/play/tech-talks/111463/
  • Apple Tech Talk 111464《Leverage multiple displays and scenes on iPhone Duo》（2026-09-09）：https://developer.apple.com/videos/play/tech-talks/111464/
  • MacRumors《Apple Publishes Developer Video Series for iPhone Duo》（2026-09-09）：https://www.macrumors.com/2026/09/09/developer-video-series-for-iphone-duo/
  • dev.to《iPhone Duo for iOS Developers: What Actually Changes in Your Swift Code》（2026-09-09）：https://dev.to/arshtechpro/iphone-duo-for-ios-developers-what-actually-changes-in-your-swift-code-5gc5
  • Flutter 官方文档《Large screen devices》：https://docs.flutter.dev/ui/adaptive-responsive/large-screens
  • Flutter 官方文档《Best practices for adaptive design》：https://docs.flutter.dev/ui/adaptive-responsive/best-practices
  • React Native 官方文档《Responsive & Adaptive Layout》：https://reactnative.codeguides.io/styling-layout/responsive-and-adaptive-layout/
  • 微信小程序官方文档《resizable 配置》：https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html
  • 京东云技术团队《京东小程序折叠屏适配探索》（2023-05-08）：https://blog.csdn.net/JDDTechTalk/article/details/130554717
  • CSDN《别再只加resizable:true了！Uni-App微信小程序适配折叠屏的完整踩坑实录》（2026-03-28）：https://blog.csdn.net/weixin_29251567/article/details/159569497
  • 腾讯技术工程《iPhone Duo来了，腾讯 Kuikly 助 App 从容适配》（2026-09-10）：https://news.qq.com/rain/a/20260910A060HQ00
  • Kuikly 官方文档：https://kuikly.tds.qq.com/
  • Kuikly GitHub 仓库：https://github.com/Tencent-TDS/KuiklyUI
  • Kuikly 折叠屏 Sample：https://github.com/Tencent-TDS/KuiklyUI/tree/feat/kuikly_fold

 

 

# 前端
Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

cover

仓颉不是开箱即用：没报名，DevEco 里连勾都点不了

avatar EazyDevelop社区
cover

最高赢取价值万元大奖 仓颉生态共建季九月招募继续

avatar EazyDevelop社区
cover

办公智能体平台亮点企业分析：商汤小浣熊

avatar EazyDevelop社区