---
title: "构建带滑动面板的主屏幕"
description: "在全屏图片或视频上叠加内容。"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

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

## 将内容叠加在英雄图片或视频上 \{#lay-your-content-over-a-hero-image-or-video\}

1. 将英雄图片作为屏幕背景：在[屏幕设置](builder-ui#screen-settings-and-layout)中，将 **Fill** 设置为[图片或视频](paywall-head-picture)。底部弹出面板会遮住背景的下半部分，因此请选择主体内容靠近顶部的图片或视频。

2. 打开 **Add element** 面板，选择 **Sliding sheet**。
3. 在 **Layers** 面板中将屏幕内容拖入滑动面板。
4. 为了让购买按钮始终可见，将其添加到[底栏](#keep-the-purchase-button-in-view)。这样滚动内容时，按钮会固定在屏幕底部。
5. 调整面板的 **Start position**，控制屏幕首次打开时主视觉区域或内容的显示比例。
6. 在[预览区域](builder-ui#preview-area-center)滚动屏幕，查看滑动面板在主视觉上方的移动效果。
7. 从[设备列表](builder-ui#view-controls-bottom-toolbar)中选择其他机型，检查面板上方的区域。**Start position** 是屏幕高度的百分比，因此在小屏手机上该区域会更短。

## 底部表单如何在英雄区上滑动 \{#how-the-sheet-scrolls-over-the-hero\}

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

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

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

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

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

### 为主视图添加视差效果 \{#add-parallax-to-the-hero\}

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

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

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

## 在主视觉区上方放置元素 \{#place-elements-over-the-hero\}

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

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

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

- 使用 Adapty SDK v4.2.1 或更高版本的原生 Android 应用
- 使用 Adapty SDK v4.2.2 或更高版本的 React Native 应用

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

## 让购买按钮始终可见 \{#keep-the-purchase-button-in-view\}

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

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

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

## 设置底部弹窗样式 \{#style-the-sheet\}

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

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

## 滑动面板与底部面板 \{#sliding-sheet-vs-bottom-sheet\}

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

- **使用滑动面板**，可将屏幕主要内容叠加在英雄图之上。面板在屏幕打开时即可见，仅在用户滚动时移动。
- **使用[底部面板](builder-containers#bottom-sheet)**，适合按需显示的内容，例如隐藏在 **Show all plans** 链接后面的套餐列表。通过 **Show** 操作将其展示出来。