前言
如果你平时需要记录会议、回看录音、整理项目、跟踪待办，或者希望把联系人和会议内容关联起来，可以关注一下《会议随记 Pro》。
它不是单纯的录音工具，我更希望它能变成一个轻量的会议工作台：开会时记录，开会后整理，之后还能按项目、联系人、时间线继续追溯。
1.3 版本的主要更新，是折叠屏和 2in1 平板适配。具体来说，这次新增了对 Pura X Max 的折叠态、展开态、悬停态支持，同时优化了项目列表、会议列表、联系人列表、联系人详情、会议详情、新建会议、编辑会议等核心页面。
这个版本我花了比较多时间在布局细节上。刚开始以为只是做一套响应式布局，屏幕宽了就左右分栏，屏幕窄了就单列显示。但实际做下来发现，折叠屏适配比普通大屏适配麻烦得多。尤其是悬停态，中间有折痕，页面还在导航栏、页签、标题栏里面，坐标不处理好，预留空白就会和折痕错位。
我来带你简单复盘一下 1.3 版本为什么要做这些适配，以及开发过程中踩到的一些坑。
一、产品层面：多设备适配要服务真实使用场景
《会议随记 Pro》的使用场景比较明确。用户打开它，通常是在做一件具体的事，比如创建会议、记录重点、回看录音、查找某个项目下的会议，或者看某个联系人参与过哪些会议。
在手机折叠态下，单列布局是最合适的。项目列表、会议列表、联系人列表从上往下排列，点击进入详情，再返回列表，这套交互简单稳定，也适合单手使用。
但到了折叠屏展开态或者 2in1 平板，继续使用单列页面就有点浪费空间。比如项目列表页面，用户完全可以左边看项目列表，右边看项目详情。如果还是点进去、返回、再点下一个项目，屏幕变大以后反而没有带来效率提升。
所以 1.3 版本里，我把几个核心页面重新按设备形态拆了一遍。
折叠态保留手机上的轻量体验，主要保证搜索、浏览、新增、进入详情这些基础操作。
展开态更强调列表和详情联动。例如项目列表左侧显示项目，右侧展示当前选中的项目详情。联系人详情页也类似，左侧放联系人信息和关联项目，右侧放关联会议或项目详情。
悬停态是这次最值得单独处理的状态。设备半折放在桌面上时，上半屏更适合展示稳定内容，下半屏更适合放搜索、列表、输入和编辑区域。项目列表页面里，我让上半屏显示项目详情，下半屏保留搜索框和项目列表。这样用户一边看详情，一边切换项目，不需要频繁跳转。
二、放在鸿蒙生态里看，适配不能只停在首页
鸿蒙生态一直强调多设备和多形态体验。对开发者来说，这件事不能只理解成"应用能在更多设备上运行"。能运行只是第一步，业务页面在不同设备上用起来是否顺手，才是用户真正能感知到的部分。
这次我没有只适配首页。因为《会议随记 Pro》里真正高频的页面，是项目列表、会议详情、新建会议、编辑会议、联系人详情这些业务页面。
列表页的重点是搜索、筛选、列表密度和详情联动。
详情页的重点是信息概览、内容阅读和关联数据。
编辑页的重点是输入区、播放器和操作按钮。
新建会议页的重点是录音控制、计时、会议信息和笔记输入。
如果这些页面在大屏上只是被拉宽，在悬停态下没有避让折痕，用户很快就会感觉"不像是为这类设备做过适配"。所以 1.3 版本的思路是让每类业务页面都找到自己在不同形态下的布局方式，而不是统一套一个大屏模板。
从独立开发者的角度看，这种适配会多花一些时间，但很值得。因为折叠屏和 2in1 设备上的用户，更容易在会议、办公、项目整理这些场景里使用工具类应用。如果应用在这些设备上体验更好，产品本身也会更像一个完整的效率工具。
三、三种形态下，页面应该怎么变
这次我主要围绕三种形态设计页面。
折叠态就是普通手机形态。页面保持单列，信息从上到下排列。这个状态下，优先考虑轻量、稳定、可快速完成操作。
展开态适合左右分栏。项目列表、联系人详情这类页面，左边放列表或基本信息，右边放详情。这样用户不需要来回跳页面，特别适合连续查看多个项目或联系人。
悬停态适合上下分区。这个状态有一个很明显的限制：中间折痕区域不适合放按钮、输入框和重要内容。我的处理方式是把稳定信息放在上半屏，把需要滚动或输入的内容放在下半屏。
项目列表页面是一个比较典型的例子。
折叠态下，它就是普通项目列表。
展开态下，它变成左侧列表、右侧详情。
悬停态下，它变成上半屏详情、下半屏搜索和列表。
会议详情页也是类似逻辑。上半屏放会议标题和播放器，下半屏放笔记、待办和评论。用户把设备半折放在桌面上时，可以更自然地回看录音和整理内容。
新建会议页则把录音控制放在上半屏，下半屏放会议信息和笔记输入。这个设计更符合"设备半折放在桌面上记录会议"的场景。
这几个页面适配完之后，Pura X Max 的三种形态就不只是屏幕大小变化，而是对应了三种不同的使用方式。
四、实现细节：重点处理姿态、折痕和页面坐标
技术上，这次没有把所有判断都写到页面里，而是拆成了两类策略。
一类是设备姿态策略，负责记录当前设备是普通状态、折叠态、展开态还是悬停态。
另一类是折痕布局策略，负责判断折痕方向、计算上下区域高度，以及把全局折痕坐标转换成页面内部坐标。
普通大屏判断比较简单，页面达到一定宽度后进入分栏布局。但悬停态要优先于普通大屏布局，因为两者的结构不同。大屏更适合左右分栏，悬停态更适合上下分区。
ts
private isWideLayout(): boolean {
if (this.isHoverLayout()) {
return false;
}
return this.currentLayoutSize === AppLayoutSize.Expanded ||
this.currentLayoutSize === AppLayoutSize.UltraWide;
}悬停态也不能只判断设备是否半折。设备半折以后，如果发生横竖屏变化，折痕方向可能会变化。上下悬停布局只适合横向折痕，所以我把折痕区域保存成四个值。
ts
[left, top, width, height]然后根据折痕的宽高判断方向。只有横向折痕，并且上下区域高度都够用时，才进入上下悬停布局。
这次最关键的坑，是折痕坐标和页面坐标不一致。
系统返回的折痕位置，是相对整个显示区域的。但业务页面通常在 Navigation、Tabs 或标题栏内部。页面自己的内容区域不一定从屏幕顶部开始。
一开始我直接用系统返回的 creaseTop 做上半屏高度，结果模拟器里看到预留空白和真实折痕对不上。
后来改成先记录页面自己的全局位置，再把折痕转换成页面内部坐标。
ts
export function toLocalCreaseRegion(
creaseRegion: number[],
pageGlobalLeft: number,
pageGlobalTop: number
): number[] {
const info = normalizeCreaseInfo(creaseRegion);
return [
Math.max(0, info.left - pageGlobalLeft),
Math.max(0, info.top - pageGlobalTop),
info.width,
info.height
];
}页面里通过 onAreaChange 获取自己的位置。
ts
.onAreaChange((_oldValue, newValue) => {
this.onPageAreaChange(
Number(newValue.width),
Number(newValue.height),
Number(newValue.globalPosition.x),
Number(newValue.globalPosition.y)
);
})后面首页、项目列表、会议列表、联系人列表、联系人详情、会议详情、新建会议、编辑会议，都沿用了这套局部折痕策略。这个调整做完之后，折痕避让区才真正和页面内容对齐。
另外还有一个细节是底部安全区。悬停态下如果使用悬浮页签，列表底部需要额外留白，不然最后几项容易被遮挡。
ts
private getListBottomSafeHeight(): number {
return this.isHoverLayout() ? HOVER_BOTTOM_TAB_SAFE_HEIGHT : 20;
}这些代码并不复杂，难点在于一开始要想清楚坐标系和页面结构。只要策略抽出来，后续页面接入会快很多。
总结
《会议随记 Pro》1.3 版本主要完成了折叠屏、2in1 平板和 Pura X Max 三形态适配。
从产品层面看，这次更新让项目、会议、联系人这些核心模块，在折叠态、展开态和悬停态下有了更合适的使用方式。折叠态保持轻量，展开态强调列表和详情联动，悬停态强调上下分区和折痕避让。
从鸿蒙生态层面看，多设备适配不能只停留在页面能显示。对效率类应用来说，更重要的是让不同设备形态对应不同操作方式。设备形态变了，页面结构也应该跟着服务用户的实际任务。
从技术层面看，这次最大的经验是：折叠屏适配不能只看屏幕宽度，也不能只判断设备是否半折。更稳的做法是同时处理设备姿态、折痕方向、折痕区域和页面局部坐标。
如果你经常需要做会议记录、项目复盘或联系人管理，可以关注《会议随记 Pro》1.3 版本。这个版本已经通过审核正式上线，你可以通过应用商店搜索《会议随记 Pro》下载安装或更新体验。
后续我也会继续围绕鸿蒙生态的多设备能力，把折叠屏、平板和大屏窗口下的使用体验继续打磨下去。