TabView

TabView 渲染原生 SwiftUI 标签栏，每个 Tab 是一个标签页。在 iOS 26 及以上系统中，标签栏使用 Liquid Glass 样式，并带有选中高亮。

import { app } from "onescript"
import { NavigationLink, NavigationStack, Tab, TabView, Text, useState } from "onescript/views"

function App() {
  const [tab, setTab] = useState("home")

  return (
    <TabView
      selection={tab}
      onSelectionChange={setTab}
    >
      <Tab
        value="home"
        title="首页"
        icon="house"
      >
        <NavigationStack destination={(id: string) => <Text>条目 {id}</Text>}>
          <NavigationLink value="1">打开条目 1</NavigationLink>
        </NavigationStack>
      </Tab>
      <Tab
        value="community"
        title="社区"
        icon={{ name: "store.default.fill", source: "pika" }}
      >
        <Text>社区</Text>
      </Tab>
      <Tab
        value="settings"
        title="设置"
        icon="gearshape"
        badge={3}
      >
        <Text>设置</Text>
      </Tab>
    </TabView>
  )
}

await app.show(<App />)

属性	类型	说明
`selection`	`T`	可选的受控选中值，`T` 为 `string \| number`。
`onSelectionChange`	`(value: T) => void`	用户切换标签时调用。传入 `selection` 时必填。
`children`	`Tab`	标签页列表。

未传入 selection 时由 TabView 自行管理选中状态，默认选中第一个标签。

Tab

属性	类型	说明
`value`	`string \| number`	标签的唯一标识。
`title`	`string`	标签文字。
`icon`	`string \| { name: string; source?: "sf" \| "pika" }`	标签图标。字符串表示 SF Symbol；对象可以指定 Pika 图标。
`badge`	`number \| string`	可选的角标。
`children`	`ViewChild`	标签页内容。

标签栏会把 SF Symbol 自动显示为实心样式，例如 house 显示为 house.fill。Pika 图标不会自动转换，建议直接使用 .fill 款。

行为

TabView 必须是传给 app.show() 的根视图，不能嵌套，也不能放在 NavigationStack 中。
TabView 的子节点必须直接写 <Tab>，可以使用数组、Fragment 或条件渲染，但不能把 <Tab> 封装在自定义组件中。
每个标签页可以把 NavigationStack 作为唯一的直接内容，各标签页的导航栈相互独立。
关闭和控制台按钮显示在每个标签页的根页面上。标签页未设置 navigationTitle 时，以 title 作为标题；使用 navigationTitle("") 可以隐藏标题。
所有标签页在启动时同时渲染，切换标签时保留各自的状态。各标签页中的 useEffect 都会在启动时执行。
在标签页中使用 placement="bottomBar" 的 toolbar 时，工具栏显示在标签栏上方。
Widget 不支持 TabView。

TabView

TabView

Tab

行为

本页目录