8.7 版本发布—WinterCG 兼容性第一部分
了解更多

<RootLayout> 是一个布局容器，旨在用作应用程序的主要 RootLayout 容器，并内置 API 以轻松控制动态视图层。它扩展了 GridLayout，因此具有 GridLayout 的所有功能，并增强了其他 API。

示例 ​

使用 RootLayout 打开动态弹出窗口 ​

xml
<RootLayout>
  <!-- main content -->
  <GridLayout>
    <Label
      verticalAlignment="center"
      textAlignment="center"
      text="Main content area"
    />
  </GridLayout>
</RootLayout>
ts
import { createPopupView } from './helper'
// create a dynamic popup
const view = createPopupView('#65adf1', 110, -30)
ts
// open the dynamic popup
getRootLayout()
  .open(view, {
    shadeCover: {
      color: '#000',
      opacity: 0.7,
      tapToClose: true,
    },
    animation: {
      enterFrom: {
        opacity: 0,
        translateY: 500,
        duration: 500,
      },
      exitTo: {
        opacity: 0,
        duration: 300,
      },
    },
  })
  .catch((ex) => console.error(ex))
ts
// close the dynamic popup
getRootLayout()
  .close(view, {
    opacity: 0,
    translate: { x: 0, y: -500 },
  })
  .catch((ex) => console.error(ex))
ts
// helper to create a popup view
export function createPopupView(
  color: string,
  size: number,
  offset: number
): View {
  const layout = new StackLayout()
  layout.height = size
  layout.width = size
  layout.marginTop = offset
  layout.marginLeft = offset
  layout.backgroundColor = color
  layout.borderRadius = 10
  return layout
}

API ​

getRootLayout() ​

ts
import { getRootLayout } from '@nativescript/core'

const rootLayout: RootLayout = getRootLayout()

返回 RootLayout 的引用，如果不存在 <RootLayout>，则返回 undefined。

RootLayout 旨在用作单个实例

从技术上讲，您可以在模板中放置多个 RootLayout，但只有最后创建的实例可以通过 getRootLayout 方法访问。该 API 旨在控制单个实例，通常将其放置为应用程序的根视图。

方法 ​

open() ​

ts
open(view: View, options?: RootLayoutOptions): Promise<void>

打开 view 并默认将其置于最前面。

请参阅 View，RootLayoutOptions。

bringToFront() ​

ts
bringToFront(view: View, animated?: boolean): Promise<void>

如果 view 尚未置于最前面，则将其置于最前面。如果该视图当前未显示在 RootLayout 中，则忽略该调用。

请参阅 View。

close() ​

ts
close(view: View, exitTo?: TransitionAnimation): Promise<void>

请参阅 View，TransitionAnimation。

closeAll() ​

ts
closeAll(): Promise<void>

关闭所有视图。

getShadeCover() ​

ts
getShadeCover(): View

返回阴影遮罩（覆盖视图）。

RootLayoutOptions ​

shadeCover ​

ts
shadeCover: ShadeCoverOptions

请参阅 ShadeCoverOptions。

animation ​

ts
animation: {
  enterFrom?: TransitionAnimation,
  exitTo?: TransitionAnimation
}

enterFrom 仅在它是第一个打开的视图时应用。

exitFrom 仅在它是最后一个关闭的视图时应用

请参阅 TransitionAnimation。

ShadeCoverOptions ​

opacity ​

ts
opacity: number

color ​

ts
color: Color

设置阴影遮罩的颜色。

请参阅 Color。

tapToClose ​

ts
tapToClose: boolean

允许通过点击阴影遮罩关闭。

animation ​

ts
animation: {
  enterFrom?: TransitionAnimation,
  exitTo?: TransitionAnimation
}

enterFrom 仅在它是第一个打开的视图时应用。

exitFrom 仅在它是最后一个关闭的视图时应用

请参阅 TransitionAnimation。

ignoreShadeRestore ​

ts
ignoreShadeRestore: boolean

TransitionAnimation ​

ts
interface TransitionAnimation {
  translateX?: number
  translateY?: number
  scaleX?: number
  scaleY?: number
  rotate?: number // degrees
  opacity?: number
  duration?: number // in ms
  curve?: CoreTypes.AnimationCurve
}

请参阅 CoreTypes.AnimationCurve。

上一页
GridLayout
下一页
FlexboxLayout