hz-metavrx-layout-sdk

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

MetaVrx Layout SDK

Use the Layout SDK when a Standard Android app needs multiple app-owned panels on Meta Horizon OS. It preserves the app's existing Android UI framework. Do not add Meta Spatial SDK unless the app needs an immersive scene, 3D entities, or full environment control.

当 Standard Android 应用需要在 Meta Horizon OS 上提供多个应用自有面板时，使用 Layout SDK。它会保留应用现有的 Android UI 框架。除非应用需要沉浸式场景、3D 实体或完整的环境控制能力，否则不要添加 Meta Spatial SDK。

Choose the framework first

先选择框架

Existing app UI	API style	Start here
Jetpack Compose	`SpatialScene` , `SpatialWindow` , `WindowModifier`	Compose setup and Compose API
React Native	`SpatialSceneProvider` , `SpatialWindow` , props and hooks	React Native setup and React Native API

The app's UI framework dictates which set of references to continue with. The Jetpack Compose and React Native APIs are intended to strive for behavioral and conceptual parity across platforms.

现有应用 UI	API 风格	从此处开始
Jetpack Compose	`SpatialScene` 、 `SpatialWindow` 、 `WindowModifier`	Compose 设置和 Compose API
React Native	`SpatialSceneProvider` 、 `SpatialWindow` 、props 和 hooks	React Native 设置和 React Native API

应用的 UI 框架决定应继续使用哪一组参考资料。 Jetpack Compose 和 React Native API 的目标是在各平台之间实现行为和概念层面的一致性。

Mental model

基本模型

Compose:

kotlin

setContent {
  SpatialScene(
      theme = { content -> AppTheme { content() } },
  ) {
    MainScreen()
    SpatialWindow(
        key = "details",
        modifier = WindowModifier
            .size(480.dp, 640.dp)
            .anchor(WindowAnchor.End),
    ) {
      DetailsScreen()
    }
  }
}

React Native:

jsx

import {SpatialSceneProvider, SpatialWindow} from '@metavr/layout-compat';

<SpatialSceneProvider>
  <MainScreen />
  <SpatialWindow
    label="details"
    windowWidth={480}
    windowHeight={640}
    anchor="end">
    <DetailsScreen />
  </SpatialWindow>
</SpatialSceneProvider>;

The main content remains in the app's system panel. Each

SpatialWindow

declares child content that the compatibility layer can promote into a separate panel when the platform supports it. Read the framework's placement reference for anchoring, semantic offsets, asynchronous promotion, priority, and fallback behavior.

Compose：

kotlin

setContent {
  SpatialScene(
      theme = { content -> AppTheme { content() } },
  ) {
    MainScreen()
    SpatialWindow(
        key = "details",
        modifier = WindowModifier
            .size(480.dp, 640.dp)
            .anchor(WindowAnchor.End),
    ) {
      DetailsScreen()
    }
  }
}

React Native：

jsx

import {SpatialSceneProvider, SpatialWindow} from '@metavr/layout-compat';

<SpatialSceneProvider>
  <MainScreen />
  <SpatialWindow
    label="details"
    windowWidth={480}
    windowHeight={640}
    anchor="end">
    <DetailsScreen />
  </SpatialWindow>
</SpatialSceneProvider>;

主要内容仍保留在应用的系统面板中。每个

SpatialWindow

都会声明子内容；当平台支持时，兼容层可以将其提升为独立面板。有关锚定、语义偏移、异步提升、优先级和回退行为，请阅读对应框架的布局参考资料。

Read what you need

阅读所需内容

Jetpack Compose

API reference
Placement and fallback
Lifecycle
Theming
Gradle setup

API 参考
布局与回退
生命周期
主题设计
Gradle 设置

React Native

API reference
Placement and fallback
Lifecycle
Package setup

An installed partner or internal tier may provide additional reference files. Use one only when its filename directly matches the requested capability.

For exact signatures and version-specific availability, use the SDK types and documentation shipped with the dependency, or

metavr docs api-search "<Class>"

for the indexed API reference.

API 参考
布局与回退
生命周期
包设置

已安装的合作伙伴包或内部层级可能会提供额外的参考文件。仅当其文件名与请求的功能直接匹配时才使用。

如需了解准确的函数签名和特定版本的功能可用性，请使用依赖包附带的 SDK 类型和文档，或运行

metavr docs api-search "<Class>"

搜索索引中的 API 参考。