所以即使使用 `'interactable'`，也要将这些区域视为拥挤区域：
* **右下角** —— 操作按钮和交互按钮会绘制在上层。放在这里的任何内容仍然可达，但会与点击操作争抢。
* **右上角** —— 个人资料和相机控件位于该区域外侧，因此紧贴该角落的 UI 会被视为客户端 HUD 的一部分。
该区域覆盖哪些内容由各个 explorer 自行决定，并且可能在不同版本之间变化。请在运行时读取，切勿硬编码，并在你目标的平台上进行检查。
## 场景 UI 应放置在哪里
* **屏幕中央** —— 需要操作的对话框，以及玩家需要阅读并作出回应的任何内容。
* **顶部居中** —— 无需操作的消息、状态和通知。
* **底部居中，位于交互按钮上方** —— 与上下文相关的提示。
* **不要放在右下角** —— 即使在可交互区域内，它也属于操作按钮的范围。
## 改为只包裹你的部分 UI
如果你通过使用 `screenInset: 'none'` 并且只想保护部分 UI，请将其包裹在 `ScreenInsetArea` 或 `InteractableArea` 组件中。每个组件都会读取其对应区域，并将其应用到子元素。请从以下位置导入它们： `@dcl/sdk/react-ecs`:
```tsx
import ReactEcs, { ReactEcsRenderer, UiEntity, ScreenInsetArea } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'
export function setupUi() {
ReactEcsRenderer.setUiRenderer(() => (
{/* 一个大小为 100% × 100% 的子元素会正好填满安全内边距区域 */}
), { screenInset: 'none' })
}
```
这两个组件都会使用客户端报告的值进行绝对定位，因此 `positionType` 和 `位置` 它们的 `uiTransform` 字段被保留——你为它们设置的任何值都会被忽略。所有其他 `uiTransform` 属性（`padding`, `flexDirection`, `alignItems`，…）以及 UI 组件（`uiBackground`, `onMouseDown`，…）都能正常工作。当区域发生变化时，例如屏幕旋转或系统栏出现/隐藏，它们会自动响应，并会补偿 [UI 缩放系数](/creator/content-creator-zh/chang-jing-sdk7/2d-ui/onscreen-ui.md#screen-virtual-scale)，因此无论你的虚拟屏幕尺寸如何，边距都能正确落位。
{% hint style="warning" %}
**📔 不要重复应用内边距：** 上面的 `screenInset: 'none'` 在上面的代码片段中很重要。当渲染器已经在应用对应内边距时，你又用组件包裹 UI，会让 UI 向内偏移双倍边距。二者择一即可。
{% endhint %}
{% hint style="info" %}
**📱 仅限移动端：** 设备内边距只有在 **移动端客户端**上才有真实值。在 **桌面客户端** 上它们是 `(0, 0, 0, 0)`，因此 `screenInset: 'device'` 和 `ScreenInsetArea` 组件在那里没有效果，你的 UI 渲染结果与不使用它们时完全相同。与设备内边距不同，可交互区域 *为* 在桌面端不为 0。
{% endhint %}
## 为什么这很重要
与客户端控件重叠的场景 UI 会：
* 被摇杆、交互按钮或相机控件部分遮挡。
* 与这些控件争夺点击——玩家会不小心触发其中一个。
* 让你的场景在移动端显得有问题，这会损害推荐和留存。
请始终使用以下方式在真实设备上进行验证： [预览二维码](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/preview-on-mobile.md).
## 相关
* [屏幕内边距区域](/creator/content-creator-zh/chang-jing-sdk7/2d-ui/onscreen-ui.md#screen-inset-area) —— 完整的 `screenInset` 参考文档。
* [移动端 UI 最佳实践](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/ui-best-practices.md)
* [从代码中检测平台](/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/detect-platform.md) —— 使用 `isMobile()` 来切换布局。
* [屏幕内 UI](/creator/content-creator-zh/chang-jing-sdk7/2d-ui/onscreen-ui.md)
* [UX 与 UI 指南](/creator/content-creator-zh/chang-jing-sdk7/she-ji-ti-yan/ux-ui-guide.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.decentraland.org/creator/content-creator-zh/wei-yi-dong-duan-gou-jian/kai-fa/safe-area.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
