构建带滑动面板的主屏幕

主屏横幅（Hero screen）在顶部展示边到边的图片或视频，内容区域则显示在下方的面板中。要构建这种布局，请将所有内容放置在**滑动面板（Sliding sheet）**上，并将主视觉置于其后方。面板覆盖屏幕底部区域，当用户滚动时会向上滑动并覆盖主视觉。

将内容叠加在英雄图片或视频上

起始位置是屏幕打开时底部表单所处的位置。默认值为 55%，表单覆盖屏幕底部 55% 的区域，用户可以看到顶部 45% 的英雄区内容。

如果屏幕打开时所有内容均可见，表单将保持在起始位置。否则，用户可以将整个表单向上滑动以覆盖英雄区。如果内容高度超过屏幕高度，表单顶部将滑出可视范围之外。

若要让较高的内容保持可滚动，请在屏幕设置中保持Vertical scroll开关开启。如果关闭该开关，弹窗将停留在初始位置，超出显示范围的内容会被截断。

弹窗移动过程中，用户会看到以下内容：

该弹出层会遮住屏幕外部的元素（如顶部的 Logo 或标题），这些元素同样会向上移动，但速度较慢，从而产生景深感（视差效果）。在 Android 上，视差效果仅适用于使用 Adapty SDK v4.3.0 或更高版本的原生 Android 和 React Native 应用。其他 Android 应用或更低版本的 SDK 不支持此效果。
在 iOS 上，当用户将弹出层向下拖动超过初始位置时，弹出层外部的元素会产生拉伸效果。
屏幕背景不会移动。

要为主视图添加视差效果，请将其作为图片或视频元素添加到 sheet 外部，而不是设置为屏幕背景。

默认情况下，该元素不会延伸到屏幕边缘。屏幕内边距会在四周对元素进行缩进，并且开启 Safe area 后，元素将从状态栏下方开始显示。

打开 Add element 面板，将 Image 或 Video 元素拖到 sheet 上方的区域。
要让元素延伸到 sheet，将其 Width 和 Height 设置为 Fill。将 Content mode（视频中为 Aspect）保持为 Fill。
要让元素延伸到屏幕左右两侧边缘，打开屏幕设置。在 Spacing 下，将左右内边距设置为 0。如果 sheet 顶部为直角，也将底部内边距设置为 0，使元素能够连接到 sheet。
要让元素延伸到状态栏下方的屏幕顶部边缘，请将其保持为 sheet 外的第一个元素。然后点击该元素，在 Position 部分，勾选 Ignore safe area 复选框。

如需在背景主视觉区上放置 logo 或标题，请将元素拖拽到页面顶部位于表格上方的区域。位于表格外部的元素会从屏幕顶部开始堆叠，超出该区域的部分会被裁剪。如需将其叠加在图片或视频元素上，请将其 Position 设置为 Absolute。

若要让关闭按钮在用户滚动时始终可见，请将其直接添加到屏幕上，并将其 Position 设置为 Fixed。表格内部的元素无法选择 Fixed。

Important

在 Android 上，位于底部弹窗（sheet）之外、采用**相对定位（Relative）或绝对定位（Absolute）**的元素，仅在以下应用中可响应点击操作：

在其他 Android 应用中，请将按钮和其他可点击元素放置在底部弹窗内。

要让购买按钮和法律链接在用户滚动时始终可见，请将它们放在页脚中。页脚位于弹出面板内部。

页脚固定在屏幕底部，悬浮在弹出面板上方。用户滚动时，弹出面板中的所有内容都可以在页脚上方滚动显示。

放在屏幕根级别的页脚与放在弹出面板中的页脚效果相同。

您可以像设置其他容器一样设置底部弹窗的样式。内边距和圆角的处理方式有所不同：

屏幕内边距：屏幕内边距仅适用于底部弹层之外的元素，因此底部弹层会从边缘到边缘横跨整个屏幕。
元素内边距：底部弹层的 Padding 可防止其内容贴近屏幕边缘。
圆角：顶部圆角会将底部弹层从初始位置向上抬起，抬起高度等于圆角半径，因此主视觉图会显示在圆角区域中。填充了视频的底部弹层不会抬起，因此其圆角处会显示屏幕背景。半透明底部弹层仅在屏幕背景为纯色时才会抬起。

两种面板都占据屏幕底部区域。请根据需求选择合适的类型：