HarmonyOS 多设备适配预览：用四种尺寸看懂响应式界面的状态切换

在同一个应用里，手机、平板、折叠屏和智慧屏往往不会拥有相同的可用空间。屏幕变宽以后，内容不一定只是简单地放大；导航、卡片数量、操作区域和文字层级都可能需要重新安排。对于刚开始接触 HarmonyOS 界面开发的人来说，直接做一套完整的多设备适配页面，容易同时面对尺寸、布局和状态管理等多个问题。一个更容易观察的方式，是先做一个“适配预览”页面，把不同设备的尺寸和对应的布局策略放在同一处，让使用者通过点击选项，直观看到页面如何从一种场景切换到另一种场景。

这个页面正是这样一个小而完整的预览工具。它没有真正改变设备窗口，也没有连接真实的手机、平板或智慧屏，而是把四种常见设备规格做成四个可选择的按钮。按钮上直接写出设备名称和尺寸，下面的蓝色预览卡片再根据当前选择显示对应的尺寸和布局提示。虽然页面内容不复杂，但它把“当前选中了谁”“这个设备应该采用什么布局思路”“选中状态怎样反馈给用户”这三个问题放到了同一个视觉闭环中。

一、先看清页面真正展示了什么

首次进入页面时，背景是浅灰蓝色，页面内容从上到下排列。最上方是一行较大的深色标题：“多设备适配预览”。标题下面是一行较小的说明文字：“选择设备尺寸，预览响应式布局策略”。这两行文字已经说明了页面的使用方式：先选择尺寸，再看预览结果。它不是一个需要输入内容的表单，也不是一个自动测量窗口，而是一个围绕选择动作展开的可视化演示。

说明文字下面有四个横向占满内容区域的按钮。四个按钮的高度保持一致，分别代表手机、平板、折叠屏和智慧屏。按钮文字中同时包含设备名称和尺寸，这一点很重要。用户不需要先点进去再寻找尺寸，也不需要记住某个编号对应什么规格，看到按钮就能知道当前选项代表的场景。

页面底部是一张深蓝色圆角卡片。卡片第一行使用白色大字显示当前设备名称和尺寸，第二行使用浅蓝色文字显示该设备对应的布局策略。默认状态显示的是“手机 · 360×800”，下面的策略提示是“单列信息流 · 底部操作栏”。因此，首屏不是只告诉用户“手机被选中”，还把这个选择对应的界面组织方式一起展示出来。

从视觉上看，页面可以分成三层。第一层是说明层，包括标题和副标题；第二层是操作层，包括四个设备选择按钮；第三层是结果层，也就是底部预览卡片。操作层和结果层之间形成了直接关系，点击某个按钮，按钮的颜色和底部卡片的文字同时发生变化。这样的层次对于演示响应式思路很合适，因为使用者能在一个屏幕内完成选择、观察和比较。

二、四个设备选项分别表达什么

四个选项不是随意写出的四种名称，它们分别代表了四种空间条件。手机的尺寸是 360×800，宽度较窄，页面更适合保持单列结构；平板的尺寸是 1280×800，横向空间更充足，可以考虑把内容组织成双列卡片并安排横向导航；折叠屏的尺寸是 840×600，宽高关系不同于普通手机，页面可以考虑分栏并随着折叠状态保持连续布局；智慧屏的尺寸是 1920×1080，观看距离和操作方式都可能变化，更适合大屏网格和焦点导航。

这里的关键词是“考虑”和“提示”，而不是“已经完成”。页面把不同尺寸下的布局方向写在预览卡片里，是为了帮助使用者建立适配思路。它并没有在点击后改变窗口宽度，也没有真的生成四套不同的组件树。卡片中的策略文字是对当前场景的可见说明，适合用来讲解设计取舍，但不能当成已经完成真实多设备适配的证明。

1. 手机：360×800 与单列信息流

手机按钮位于四个选项的第一位，页面打开时它处于默认选中状态。360 像素的宽度对文字、卡片和操作按钮都比较敏感，如果同时放置两列内容，容易让卡片变窄，标题被迫换行，按钮的可点击区域也会变得拥挤。因此，卡片给出的“单列信息流”提示，是对窄屏场景的一种直观总结。

“底部操作栏”则补充了手机场景的操作位置。手机通常适合把主要操作放在用户容易触达的区域，底部区域比远离拇指的角落更容易被注意到。当然，页面本身没有真正绘制一条底部导航栏，它只是用这一行文字告诉使用者：如果未来把这个预览方向扩展成真实页面，手机场景可以优先考虑单列内容和底部操作。

2. 平板：1280×800 与双列卡片

平板按钮显示 1280×800。相较于手机，这个宽度可以容纳更多横向信息，但页面仍然不能只依赖放大字体来解决适配问题。预览卡片把这一场景描述为“双列卡片 · 横向导航”，表达的是两个设计方向：内容可以在横向上分成两列，导航可以利用更宽的顶部或侧边空间。

点击平板按钮后，按钮颜色变成深蓝色，其他三个按钮回到浅蓝色；预览卡片第一行也会换成“平板 · 1280×800”，第二行换成“双列卡片 · 横向导航”。这种变化把设备选项和布局策略同时关联起来，使用者不需要阅读长篇说明，就能知道平板选择已经生效。

3. 折叠屏：840×600 与连续布局

折叠屏按钮显示 840×600。这个尺寸的宽高组合和普通手机不同，横向空间并不等同于传统平板，页面在展开、折叠或半展开状态下都可能面对不同的可用区域。预览卡片使用“可折叠分栏 · 连续布局”来描述这一场景，重点不在于展示一个具体的折叠动画，而在于提醒设计者：布局不能只针对一个固定宽度，内容在空间变化时也应保持连续和可理解。

需要注意的是，点击折叠屏按钮不会让页面真的折叠，也不会读取设备铰链角度。它只更新当前选择，并将对应的文字放到蓝色卡片中。这个边界让页面保持了较小的复杂度，同时又保留了讲解折叠屏适配的入口。对于学习者来说，先把场景命名、状态切换和策略说明做清楚，再逐步加入真实窗口监听，会比一开始同时处理所有设备能力更容易验证。

4. 智慧屏：1920×1080 与大屏网格

智慧屏按钮显示 1920×1080，代表了更宽的显示空间和不同的交互距离。预览卡片给出的提示是“大屏网格 · 焦点导航”。在大屏场景中，内容可以利用网格形成更清晰的分区，操作也常常需要考虑焦点移动，而不是只依赖手指触摸。

页面没有实现遥控器焦点、网格卡片或大屏窗口切换，但文字提示仍然有价值。它把“大屏不是手机页面简单拉伸”这一点表达得很清楚。使用者看到智慧屏选项后，可以马上联想到内容密度、焦点顺序和观看距离，而不是只看到一个更大的数字。

三、选中态为什么是页面的关键反馈

四个设备按钮的文字都很接近，如果没有颜色反馈，用户点击后很难快速确认当前选择。页面使用两种背景色区分状态：被选中的按钮使用较深的蓝色，未选中的按钮使用浅蓝色。默认进入页面时，手机按钮就是深蓝色；点击其他按钮后，深蓝色会移动到新的选项上。

这种颜色切换并不是装饰，而是状态反馈的一部分。按钮文字告诉用户“它代表什么”，颜色告诉用户“它是不是当前选择”。两种信息配合在一起，可以减少用户反复确认的成本。尤其是四个按钮排列在一起时，颜色比单纯依靠文字变化更容易被快速识别。

按钮的宽度都占满页面内容区域，高度统一为 42。统一高度让四个选项形成整齐的垂直节奏，也让可点击区域更容易预估。按钮之间通过根容器的固定间距分隔，既避免黏连，也没有让选项之间的距离过大。对于一个只包含四个选择项的页面，这种规则排列比复杂的卡片布局更直接。

按钮未选中时使用浅蓝背景，并没有使用纯白或透明背景。这种处理仍然保留了“它是可操作控件”的视觉暗示，同时把深蓝色留给当前项。选中和未选中的对比足够明显，但同一色系又让整个页面保持统一。底部预览卡片使用更深的蓝色，与选中按钮形成主色呼应，同时让结果区域比操作区域更突出。

如果连续点击同一个按钮，页面不会出现新的复杂状态。当前选择仍然保持不变，按钮继续呈现深蓝色，卡片文字也不改变。这个行为很符合选择控件的特点：重复选择同一项不会叠加次数，也不会生成额外记录。页面关注的是“当前是哪种设备”，不是“用户点击过多少次”。

四、预览卡片如何把选择转成结果

底部卡片固定占据一块较大的区域，使用 180 的高度、20 的内边距和 20 的圆角。它没有跟着不同设备选项改变大小，而是保持稳定的视觉容器，只替换其中的两行文字。这样的做法让用户能够把注意力集中在内容变化上，不会因为卡片尺寸变化而误以为页面发生了真实布局重排。

第一行显示当前设备名称和尺寸，字号较大、字重较高、颜色为白色。它承担“结果标题”的角色，直接重复当前选择中最重要的信息。第二行显示布局策略，字号更小、颜色更浅，用来补充第一行。两行文字之间保持固定的纵向间距，先呈现设备，再呈现策略，阅读顺序自然。

四种状态的第二行文案各不相同：手机对应单列信息流和底部操作栏，平板对应双列卡片和横向导航，折叠屏对应可折叠分栏和连续布局，智慧屏对应大屏网格和焦点导航。这样设计有两个好处。第一，用户可以通过切换按钮比较不同场景的差异；第二，页面不会只停留在“尺寸标签”层面，而是给每种尺寸配上一个可讨论的布局方向。

卡片本身没有显示真实卡片列表、导航栏、分栏线或焦点框。它通过文字抽象出这些设计概念，避免为了演示四种场景而复制四套复杂页面。对于教学型或方案讨论型界面，这种抽象方式能让信息更集中；对于生产应用，则需要继续把文字策略落成真正的布局规则，并处理窗口变化、字体缩放和交互方式等问题。

五、从状态角度理解一次点击

可以把页面的运行状态理解成一个四选一的当前位置。初始位置是手机，点击平板后位置变成平板，点击折叠屏后位置变成折叠屏，点击智慧屏后位置变成智慧屏。页面不需要保存四个按钮各自独立的开关，也不需要同时维护四个“是否选中”的布尔值。只要记录当前选项，就可以推导出四个按钮的颜色和卡片中的两行文字。

这种状态模型有很强的排他性。任意时刻只能有一个设备处于当前状态，因而也只能有一个按钮使用选中颜色。用户点击某个按钮时，页面把当前位置替换成新的选项；依赖当前位置的按钮颜色、设备名称和策略提示随之更新。状态之间没有互相叠加，也没有前后两次点击的历史列表，页面结构因此保持简单。

从用户的角度看，一次操作可以拆成三个连续结果。第一，点击的按钮变成深蓝色，表示操作目标已被接受；第二，原来深蓝色的按钮恢复浅蓝色，表示它不再是当前场景；第三，底部卡片更新两行文字，说明新的设备和布局方向。三个结果同时出现，构成完整的交互反馈闭环。

如果只更新按钮颜色而不更新卡片，用户虽然知道选择发生了变化，却还需要自己把按钮文字和策略对应起来。如果只更新卡片而不改变按钮颜色，用户又可能不知道四个选项中哪一个是当前项。页面把两个区域一起更新，是因为它们分别承担“操作位置”和“结果解释”两个职责。

状态变化也不会影响标题和副标题。无论选择哪一种设备，页面顶部始终保持“多设备适配预览”和“选择设备尺寸，预览响应式布局策略”。这说明顶部内容是页面的固定说明，而按钮和卡片是随选择变化的动态内容。把固定信息和变化信息分开，有助于用户在连续切换时保持对页面目的的理解。

六、为什么页面没有直接缩放出四种界面

很多人看到多设备适配示例时，会期待页面点击“平板”后立刻变成两列，点击“智慧屏”后立刻出现网格。但这个页面选择了更轻量的演示方式：不真正替换布局，只改变设备标签和策略文字。这样做不是遗漏，而是控制演示范围的一种方式。

真正的响应式布局通常需要处理很多实际问题，例如窗口宽度变化、横竖屏切换、文字折行、内容溢出、触摸区域、焦点移动和不同输入设备。如果在一个小页面里同时加入这些内容，反而会让使用者难以看清最基础的状态关系。当前页面先把四种空间场景命名，并让场景切换可见，为后续实现真实布局留下了清晰的映射。

例如，手机卡片中的“单列信息流”可以作为后续布局分支的名称，平板卡片中的“双列卡片”可以对应较宽窗口下的网格列数，折叠屏卡片中的“可折叠分栏”可以对应窗口状态变化，智慧屏卡片中的“大屏网格”可以对应更宽内容区和焦点顺序。这些只是清晰的设计意图，不代表当前页面已经完成了这些分支。

独立阅读这个页面时，最重要的是知道它做了什么、没有做什么。它做了四种设备选项展示、当前选择切换、颜色反馈、尺寸文字更新和策略提示更新；它没有做真实窗口重排、设备能力读取、铰链角度监听、遥控器焦点管理或跨设备通信。把边界说清楚，比把演示页面包装成完整适配框架更可靠。

七、尺寸文字为什么直接放在按钮上

四个按钮直接展示 360×800、1280×800、840×600 和 1920×1080，使用者在选择之前就能看到空间条件。这种信息位置安排减少了记忆负担。假如按钮只写“手机”“平板”“折叠屏”“智慧屏”，用户还需要通过卡片或其他说明寻找具体尺寸；现在设备名称和尺寸在同一个操作入口中出现，选择依据更加明确。

尺寸文字同时具有比较作用。手机和折叠屏的尺寸都不算宽，但高宽比例不同；平板横向更宽；智慧屏则提供了最大的显示区域。用户在连续点击不同按钮时，可以把数字变化和策略文字变化放在一起观察，理解为什么不同空间需要不同的界面安排。页面因此不只是一个“选择设备名称”的列表，也是一张简化的适配对照表。

尺寸使用统一的宽乘高表达方式，四个按钮的文字结构保持一致。统一格式让用户能够快速扫读，也避免某个选项因为文案结构不同而显得突兀。设备名称和尺寸之间使用分隔点，视觉上把身份信息和规格信息分开，同时保持一行显示。

需要强调的是，这些数字是预览场景的标签，不是页面运行时读取到的真实屏幕尺寸。当前页面无论运行在什么设备上，按钮仍然会显示这四组固定文字。它的任务是让用户选择一个假定场景，而不是报告当前设备的物理参数。理解这一点，才能避免把页面误读成屏幕检测工具。

八、布局层次与颜色关系

页面根背景采用浅灰蓝色，给四个按钮和深蓝卡片留出足够的对比空间。标题使用深色，副标题使用灰色，形成“主标题更醒目、说明文字更克制”的层级。按钮区域处于页面中部，卡片区域位于底部，整体留白较多，适合用于展示状态变化。

深蓝色承担两种角色。一种是选中按钮的强调色，告诉用户当前选择；另一种是结果卡片的背景色，承载当前场景和策略。两种用途之间有颜色呼应，但卡片的面积更大、圆角更明显，所以视觉权重高于单个按钮。用户先看到当前按钮，再把视线移动到卡片，阅读路径比较自然。

浅蓝色未选中按钮并没有和背景完全融为一体，它仍然具有可操作控件的存在感。四个按钮颜色接近，页面整体保持统一色系；选中项用深浅变化拉开层级，不需要额外的图标或编号来辅助判断。这样的选择尤其适合四个选项纵向排列的场景，因为颜色变化会形成一条清晰的定位线索。

卡片文字使用白色和浅蓝色两级颜色。设备名称是结果的主信息，因此使用白色和较大字号；布局策略是解释性信息，因此使用浅蓝色和较小字号。即使不读取全部文字，用户也能先判断卡片的主标题，再决定是否继续阅读策略说明。颜色和字号在这里共同构成信息优先级。

页面使用圆角来区分卡片与普通按钮。按钮是连续的操作列表，卡片是一次选择后的结果容器；两者的形态不同，用户可以分清哪里用于操作、哪里用于查看。卡片的内边距让文字远离边缘，长一点的设备标签和策略说明也不会显得拥挤。

九、四种选择的实际观察顺序

为了充分理解页面，可以从默认手机状态开始。先观察手机按钮的深蓝色，再观察卡片中的 360×800 和“单列信息流 · 底部操作栏”。这一步建立“按钮选中态”和“卡片结果态”之间的对应关系。接着点击平板按钮，确认深蓝色移动到第二个按钮，卡片文字同步变成 1280×800 和“双列卡片 · 横向导航”。

然后点击折叠屏按钮。此时第三个按钮成为深蓝色，卡片显示 840×600 与“可折叠分栏 · 连续布局”。可以重点观察：页面顶部没有变化，按钮列表的整体位置没有变化，只有当前选项和结果卡片发生变化。这说明页面采用了稳定外壳加动态内容的方式。

最后点击智慧屏按钮，观察第四个按钮和卡片。卡片会显示 1920×1080 与“大屏网格 · 焦点导航”。四个按钮可以反复切换，顺序不影响结果。再回到手机，默认的第一种策略会重新出现。这一轮操作能验证四个分支都可达，并且每个分支都有对应的文案。

除了顺序点击，还可以进行重复点击和交叉点击。重复点击当前按钮时，页面应保持原状态，不产生额外提示；从智慧屏直接切换到手机时，状态应直接切换，不需要经过中间选项；快速连续点击多个按钮时，最终卡片应与最后一次有效点击一致。由于页面只有一个当前选择，最终状态应该清晰且可预测。

这些观察都围绕页面真实可见结果，不需要假设背后发生了设备连接、窗口重建或数据请求。页面的价值就在于把状态切换做得足够透明：用户点哪个选项，哪个选项高亮，卡片就显示哪个选项对应的尺寸和策略。

十、这个预览页面适合怎样使用

它适合作为响应式设计讨论的起点。设计者可以先为不同设备场景写出明确标签，再通过按钮把场景切换做成可操作的预览。当团队讨论“手机要不要单列”“平板是否需要双列”“智慧屏如何处理焦点”时，可以先用这样的页面统一术语和观察入口，避免每个人都用不同的截图或口头描述。

它也适合用于 ArkUI 状态管理的入门练习。页面包含一个互斥选择状态，四个点击入口，以及两个随状态变化的结果文本。学习者可以先理解“一个选择如何影响多个组件”，再逐步扩展到真实的尺寸监听和布局分支。由于页面没有复杂数据源，状态变化的因果关系比较容易追踪。

它还适合用来讲解选中态设计。四个按钮文字相近，如果没有明显颜色，用户容易迷失当前选择；深蓝和浅蓝的对比说明了为什么交互控件需要及时反馈。底部卡片又进一步解释了当前状态，使页面同时拥有操作确认和结果说明两个层次。

但是，它不适合直接作为完整的多设备适配方案。真实适配还需要根据窗口尺寸决定组件排列，根据设备类型调整交互方式，根据字体比例处理文本，根据焦点规则支持大屏操作，并且要处理横竖屏、折叠状态和安全区域等边界。当前页面只是把这些方向用四个标签和四条策略文案呈现出来。

十一、从这个页面继续扩展时应保持什么边界

如果要把页面扩展成真正的响应式预览，第一步应该仍然保留四个明确的场景入口。新增真实布局时，可以让手机分支显示单列内容，让平板分支显示两列卡片，让折叠屏分支展示分栏变化，让智慧屏分支显示网格和焦点提示。这样扩展后的视觉结果仍然能够和当前四个策略文字一一对应，不会让原有选择失去意义。

第二步可以加入窗口宽度变化，但需要把“预设场景选择”和“真实窗口测量”区分开。预设按钮表达的是设计讨论中的目标尺寸，真实测量表达的是当前运行环境。两者混在一起会让用户不清楚卡片上的尺寸是固定示例还是实时数据。保持标签含义清晰，比增加更多数字更重要。

第三步可以加入布局分支的可视区域，但不应让四个场景共享一套仅靠缩放的界面。手机的底部操作、平板的横向导航、折叠屏的连续分栏、智慧屏的焦点网格，分别对应不同的内容组织方式。扩展时应优先保持这些策略之间的差异，而不是把所有场景都变成同一套卡片。

第四步才是处理真实设备能力和系统事件。如果页面要读取窗口变化、折叠状态或焦点移动，需要引入相应的系统能力并设计加载、失败和不可用状态。当前页面没有这些功能，因此不能把预览卡片中的策略文案当作能力已经接入的证据。先完成可见模型，再接入系统能力，验证路径会更清晰。

十二、页面边界：已经实现与没有实现的内容

当前页面已经实现的内容很明确：四个固定设备按钮可以点击；每个按钮显示设备名称和尺寸；选中按钮使用深蓝色，其他按钮使用浅蓝色；底部卡片显示当前设备标签；卡片第二行根据当前选择显示四种布局策略之一；页面初始状态为手机；重复选择不会累加额外数据。

当前页面没有实现的内容也同样明确：没有真实改变窗口尺寸；没有读取当前设备的屏幕参数；没有检测设备类型；没有监听折叠屏铰链或展开状态；没有绘制真实的双列卡片、分栏页面、大屏网格或焦点导航；没有连接平板、折叠屏或智慧屏；没有进行跨设备数据同步；没有提供遥控器或键盘焦点操作。

把这些边界写清楚并不会削弱页面的价值，反而能让读者正确理解它。这个页面的重点是用最少的控件建立一个可观察的场景切换模型。它把设备规格、选中状态和布局策略放到同一张卡片上，适合用来思考适配设计；至于真实适配能力，需要在此基础上继续实现和验证。

十三、如何判断一次切换是正确的

判断页面是否正确，不需要观察复杂的后台日志，只要看三个位置。第一看四个按钮：当前设备对应的按钮是否是深蓝色，其他按钮是否是浅蓝色。第二看卡片第一行：是否显示了刚刚点击的设备名称和尺寸。第三看卡片第二行：是否出现对应的布局策略。三个位置的内容应该互相一致。

例如选择平板后，如果平板按钮变成深蓝色，但卡片仍显示手机尺寸，说明操作状态和结果状态没有同步；如果卡片第一行变成平板，第二行却仍然写着手机策略，说明设备标签和策略映射不一致；如果卡片文字正确但按钮颜色没有变化，说明用户缺少明显的当前选择反馈。页面的设计正是通过同时更新这些区域来避免上述问题。

还可以观察初始状态和回切状态是否一致。首次进入时手机是默认选择，切换到其他设备后再回到手机，应该重新显示手机对应的颜色、尺寸和策略。如果两次手机状态不一致，说明选择状态没有稳定地映射到显示内容。对于一个四选一页面来说，状态可重复到达是很重要的可预测性。

最后可以观察页面外壳是否稳定。标题、副标题、按钮位置、卡片尺寸和背景不应该因为选择不同而突然跳动。当前页面把变化集中到按钮颜色和卡片文字，外壳保持一致，因此切换时视线容易追踪。稳定的布局本身也是一种反馈，它告诉用户发生的是场景内容变化，而不是整个页面被重新打开。

十四、适配思路不等于简单放大

从四条策略文案可以看出，设备适配的核心不是把同一页面按比例拉伸。手机使用单列信息流，平板强调双列卡片，折叠屏强调连续分栏，智慧屏强调网格和焦点。它们关注的重点各不相同，背后体现的是内容组织方式和交互方式的变化。

手机场景更重视连续滚动和底部触达；平板场景可以让更多内容同时出现，并利用横向空间组织导航；折叠屏场景要关注空间变化过程中内容是否突然断裂；智慧屏场景则要考虑远距离阅读和焦点移动。当前页面虽然只用一行文字概括这些差异，但四种文案已经把讨论方向区分开了。

这也是预览页面比单张静态设计图更有帮助的地方。静态图只能展示一个结果，点击式预览则能让用户主动比较四种场景。每次点击都能看到同一个页面框架下的不同标签和策略，比较过程更加连续。它不负责完成全部适配，却能帮助团队先把“不同设备需要不同策略”这件事具体化。

十五、适合初学者的阅读方式

初学者可以先不关注复杂的响应式 API，而是把页面当作一个状态练习。第一步只观察四个按钮和一张卡片，确认页面中存在一个当前设备选择。第二步依次点击四个按钮，记录按钮颜色、卡片第一行和第二行如何变化。第三步尝试重复点击、快速切换和回到默认状态，确认结果是否稳定。

接着可以思考为什么页面不需要为每个按钮保存独立的开关。因为四个设备是互斥关系，当前只需要一个位置就够了。按钮颜色可以根据当前位置判断，卡片文字也可以根据当前位置选择。这个思路适用于很多单选场景，例如主题切换、布局模式切换、排序方式切换和显示密度切换。

再往后，可以把四条策略文案看成一种映射关系：每个设备标签都有一条对应的说明。映射关系需要完整、稳定和容易阅读。如果增加第五种场景，就要同时补充按钮文字、卡片设备标签和对应策略；如果删除一种场景，三个位置也要同步删除。这样思考，能够避免只改了入口却忘记改结果的情况。

最后再考虑真正的多设备能力。只有当预览模型已经清楚，才适合加入实时窗口、设备信息和布局重排。否则，系统能力越多，越难判断问题究竟来自状态映射、布局计算还是设备事件。当前页面提供的价值，就是把复杂问题拆成一个很小且可以反复观察的选择模型。

十六、总结

这个多设备适配预览页面用四个按钮和一张结果卡片，完成了一个清晰的交互闭环。手机、平板、折叠屏和智慧屏分别带有固定尺寸标签；按钮通过深浅蓝色区分当前选择和其他选择；卡片第一行显示当前设备与尺寸，第二行显示与之对应的布局策略。页面的变化集中、直接，读者可以通过连续点击理解不同设备场景的差异。

它的技术价值不在于模拟了真实窗口，而在于把“场景选择—状态变化—策略反馈”这条关系做得很透明。对于 ArkUI 学习者来说，这个页面可以帮助理解声明式界面的基本思路：用户操作改变状态，状态决定多个视觉区域的内容，界面自动呈现新的结果。对于做适配方案的人来说，四种文案也提供了一个讨论入口，让手机、平板、折叠屏和智慧屏不再只是几个名称，而是对应不同的布局方向。

同时，页面的边界必须被正确理解。它没有读取真实设备信息，没有改变窗口大小，没有渲染实际的多列、分栏、网格或焦点导航，也没有完成跨设备连接。它是一张可交互的适配策略预览卡，而不是完整的多设备适配框架。正因为功能范围被控制在四选一状态切换内，页面才容易运行、容易观察，也容易作为后续扩展的起点。

如果继续完善这个方向，最合理的顺序是先保持四个场景的映射稳定，再逐步加入真实窗口变化和对应布局；先让每一种策略拥有可见的差异，再接入设备事件和焦点能力；先验证选择状态和结果反馈的一致性，再扩大页面复杂度。无论最终扩展到什么程度，都应该保留当前页面最重要的原则：设备条件要说清楚，布局策略要有对应关系，用户每次选择都要得到明确反馈。