NavigationStack

NavigationStack 渲染原生 SwiftUI 导航栈。它的子视图是根页面，path 中的每个值都会通过 destination 渲染为一个被压入的页面。

import { app } from "onescript"
import { Modifier, NavigationLink, NavigationStack, Text, VStack } from "onescript/views"

function Detail(props: { id: string }) {
  return (
    <Text modifier={Modifier.navigationTitle(`条目 ${props.id}`)}>
      {props.id} 的详情
    </Text>
  )
}

await app.show(
  <NavigationStack destination={(id: string) => <Detail id={id} />}>
    <VStack
      spacing={12}
      modifier={Modifier.navigationTitle("列表")}
    >
      <NavigationLink value="a">打开 A</NavigationLink>
      <NavigationLink value="b">打开 B</NavigationLink>
    </VStack>
  </NavigationStack>
)

受控 path

传入 path 和 onPathChange 即可自行管理导航状态。赋值新数组即可压入、弹出或一次跳转多级页面。用户点击返回按钮或侧滑返回时，OneScript 会以缩短后的 path 调用 onPathChange。

import { Button, NavigationStack, Text, VStack, useState } from "onescript/views"

function App() {
  const [path, setPath] = useState<number[]>([])

  return (
    <NavigationStack
      path={path}
      onPathChange={setPath}
      destination={id => (
        <VStack spacing={12}>
          <Text>第 {id} 页</Text>
          <Button action={() => setPath([...path, id + 1])}>下一页</Button>
          <Button action={() => setPath([])}>回到首页</Button>
        </VStack>
      )}
    >
      <Button action={() => setPath([1])}>开始</Button>
    </NavigationStack>
  )
}

属性	类型	说明
`children`	`ViewChild`	根页面。
`destination`	`(value: T) => ViewChild`	为 path 中的每个值渲染页面。path 非空时必填。返回的组件内部可以使用 Hook。
`path`	`T[]`	可选的受控 path，`T` 为 `string \| number`。
`onPathChange`	`(path: T[]) => void`	path 变化时调用。传入 `path` 时必填。

行为

NavigationStack 必须是传给 app.show() 的根视图、某个 Tab 的唯一直接内容，或 sheet、fullScreenCover、popover 的呈现内容，且不能嵌套。在这些位置的 NavigationStack 上使用呈现修饰符不受影响。
每个页面由所在层级和值共同标识。替换某一层的值会重建该页面并重置其状态，下层页面的状态保持不变。
关闭和控制台按钮只出现在根页面，被压入的页面显示系统返回按钮。
根页面未设置 navigationTitle 时，使用项目名称作为标题。navigationTitle 不能用在 NavigationStack 本身上，请设置在各页面内的视图上。
请将 toolbar 应用在导航栈内部的视图上，直接应用在 NavigationStack 上会抛出错误。

受控 path

行为

本页目录