2026 双 11 首发折叠屏 · 平板 · 分屏 · 桌面窗口,一个 App 全部适配

Compose 窗口适配课

全 11 节,约 2 小时 40 分,第 1 节免费看。拿一个真实的聊天 App 从头改到能交付。

双 11 首发 ¥69(原价 ¥119,11 月 1 日至 11 日)

扔物线(朱凯)

同一个 App,同一台 Pixel 10 Pro Fold

手机一展开,App 就变形?

没适配
适配后
  1. 展开列表横着铺满整屏,底栏还在最下面换成侧边导航,列表和聊天并排
  2. 点开对话聊天页整个盖上来,列表没了在右栏打开,列表还在
  3. 打字,然后转屏打的字没了字还在
公司要求适配折叠屏
从哪儿下手?
底栏横在宽屏底边?
按钮被拉成一长条?
宽窗口里,登录按钮被拉满整行
✕fillMaxWidth():窗口多宽,按钮就多宽
加了 widthIn 之后,按钮限住了最大宽度并居中
✓先 widthIn() 再 fillMaxWidth():宽到头就停
转个屏、拖下窗口,
打的字没了?
锁竖屏躲过去?

targetSdk ≥ 36 时,在最小宽度 ≥ 600dp 的设备上,系统不再理会screenOrientation、resizeableActivity="false" 和宽高比限制。 Google Play 从 2026 年 8 月 31 日起要求 targetSdk 36。

窗口适配,要做的其实就两件事:

1布局
跟着窗口变
2窗口变的时候,
状态别出错

对象是窗口,不是屏幕:展开的折叠屏上分屏,App 只有半屏宽,就该用手机布局。

动手试试

拖一下这个窗口的右边

按窗口宽度分档,换导航、换分栏。这就是第 2–6 节要做的事。

411 dpCompact底栏 + 单栏

示意。真实 App 里,档位来自 currentWindowAdaptiveInfoV2().windowSizeClass; 单双栏按 Material 3 的默认规则,Expanded 起分两栏。再往上还有 Extra-large(≥ 1600dp)。

课程地图

11 节 · 约 2 小时 40 分 · 第 1 节整节免费 · 第 2–11 节每节免费试看 3 分钟

  1. 开篇1窗口适配的关键技术点免费把整门课要做的事先过一遍:导航、双栏、限宽、标题栏、状态,以及官方 adaptive skill 能帮你多少。
  2. 导航2官方的自适应导航:NavigationSuiteScaffold()▶ 试看 03:00先把折叠屏模拟器准备好。填几个导航项,窄窗口用底栏、宽窗口用侧边栏,切换全是自动的。
  3. 3尺子:WindowSizeClass▶ 试看 03:00宽度的 4 个分档点 600 / 840 / 1200 / 1600 怎么拿、怎么判断,以及为什么不再去量屏幕。
  4. 4自定义导航样式:NavigationSuiteScaffoldLayout()▶ 试看 03:00把自己画的底栏和侧边栏套进官方的架子。然后把折叠屏合上,看问题出在哪。
  5. 5自己做自适应导航:底栏留在首页,侧边栏放到外面▶ 试看 03:00两种导航栏的层级不一样,就分两层放。再处理三个细节:clipToBounds()、关掉 Pager 的左右滑、点侧边栏先退回首页。
  6. 双栏6列表-详情双栏:ListDetailSceneStrategy▶ 试看 03:00用 Navigation 3 把单栏变成左右双栏,再打磨四处:去掉中间的缝、右栏占位页、返回键先关详情、藏起返回箭头。
  7. 7不用导航库:导航和双栏怎么做▶ 试看 03:00没用 Nav3 的项目,用 NavigableListDetailPaneScaffold() 搭双栏,把上一节的细节对齐过来;状态和 ViewModel 要多操心什么。
  8. 页面8页面里的结构:网格和限宽▶ 试看 03:00按钮和输入框别被拉成一长条:Modifier.widthIn() 的顺序、GridCells.Adaptive,以及用 UI Check 把拉宽的地方找出来。
  9. 窗口9窗口里的标题栏:配好颜色,让开它▶ 试看 03:00到了桌面的自由窗口里,标题栏要透明、按钮深浅跟着主题走,顶栏要让开它。进阶:像 Chrome 那样把顶栏塞进标题栏。
  10. 状态10窗口变化与状态保存▶ 试看 03:00拖一下窗口,打的字没了。为什么窗口一变 Activity 就重建,configChanges 能关掉多少,剩下的状态怎么保。
  11. AI11让 AI 用官方 adaptive skill 来改▶ 试看 03:00给 AI 装上 Google 官方的 adaptive skill,看它那 8 步流程怎么用;学完前 10 节,你才说得清要什么、看得出漏了什么。

Google 出了官方 skill,为什么还要学?

adaptive/SKILL.md

Workflow to make an app adaptive

  1. Verify current UI
  2. Make the navigation bar adaptive
  3. Add multi-pane layouts
  4. Make vertical lists adaptive
  5. Hide app bars when scrolling
  6. Preserve UI state across configuration changes
  7. Add desktop experiences
  8. Support foldable devices

这个 skill 是给 AI 看的「最佳实践说明书」,第 11 节教你装上它、用好它。

可它只告诉 AI 一般该怎么做。你的 App 底栏该不该跟着首页走、哪个页面要分栏、哪个状态丢了用户会骂人——这些得你来说。

AI 改完,你还得看得出它漏了哪儿:返回键是不是直接退出了 App,桌面窗口里顶栏是不是钻到了标题栏底下。

前 10 节,就是让你说得清、看得出。

扔物线(朱凯)在谷歌开发者大会演讲

导师

扔物线 / 朱凯

  • 中国首位 Android GDE、Kotlin GDE(Google 开发者专家)
  • 受邀担任谷歌开发者大会(Google I/O Connect)讲师
  • 前硅谷名企 Flipboard Android 工程师
  • GitHub 全球 Java 排名第 86 位,OkHttp 项目贡献者之一
  • 移动开发领域全网超 10 万订阅、视频超 400 万播放
  • Android、Kotlin 协程、Compose 课程学员遍布全球,其中不乏 Google、Meta 等名企员工

双 11 首发价

¥69¥119

11 月 1 日至 11 日,12 日起恢复 ¥119

立即购买
  • 11 节约 2 小时 40 分,一次全部开放
  • 第 1 节免费先看完再决定

常见问题

Q我只会写手机上的 Compose,能学吗?

能。这门课就是给「会写 Compose 手机界面、没做过大屏」的人准备的。

示例是一个完全没做过大屏适配的聊天 App(WeCompose,targetSdk 37),一节课改一步,每一步都在折叠屏、平板、桌面模拟器上跑给你看。

Q我的项目没用 Navigation 3,怎么办?

主线用的是 Navigation 3。第 7 节专门讲不用导航库的时候,导航和双栏怎么做,以及这时候状态和 ViewModel 要多操心些什么。

Q我们的 App 锁了竖屏,还用适配吗?

用。targetSdk ≥ 36、并且设备屏幕最小宽度 ≥ 600dp 时,系统会忽略 screenOrientation、resizeableActivity="false" 和宽高比限制,锁竖屏也会被铺满。例外只有游戏,和用户自己在设置里选的。

临时开关 PROPERTY_COMPAT_ALLOW_RESTRICTED_RESIZABILITY 只对 targetSdk 36 有效,37 起不能用了。而 Google Play 从 2026 年 8 月 31 日起要求 targetSdk 36。

Q有官方的 adaptive skill 了,直接让 AI 改不行吗?

第 11 节就讲这个 skill 怎么用。但 AI 得听你说清楚要什么:导航放哪、哪些页面要分栏、哪个状态必须保住;改完了,还得你能看出它漏了哪儿。

前 10 节教的就是这两件事。一句「用这个 skill 帮我适配一下」,换不来一个适配好的 App。

Q跟 Compose 大师课是什么关系?

大师课第 1 章的「自适应布局初步」只开了个头。这门课是专项:拿一个真实的 App,从头改到能交付。

Q怎么看课?能退吗?

付款后按提示加助教微信,开通咪呲播放器的看课权限,11 节课一次全部开放。

本课程为虚拟产品,不支持退课、退费、转让,请先看完免费的第 1 节再决定。

还有别的问题,B 站、公众号搜「扔物线」,私信我。