UI导航
toolbar
在导航栏或底部栏放置条目。
toolbar(content) 为视图所在的页面添加工具栏条目。content 支持 ToolbarItem、ToolbarItemGroup、ToolbarSpacer、返回它们的组件，或由它们组成的数组。
import { app } from "onescript"
import {
Button, Modifier, Symbol, Text, ToolbarItemGroup, ToolbarSpacer, useState,
} from "onescript/views"
function Editor() {
const [status, setStatus] = useState("就绪")
return (
<Text modifier={Modifier.toolbar([
<ToolbarSpacer placement="bottomBar" />,
<ToolbarItemGroup placement="bottomBar">
<Button action={() => setStatus("依赖")}><Symbol name="shippingbox" /></Button>
<Button action={() => setStatus("终端")}><Symbol name="apple.terminal" /></Button>
<Button action={() => setStatus("运行中")}><Symbol name="play" /></Button>
</ToolbarItemGroup>,
<ToolbarSpacer placement="bottomBar" />,
])}>
{status}
</Text>
)
}
await app.show(<Editor />)在 iOS 26 及以上系统中，同一个 ToolbarItemGroup 内的按钮会合并为一个 Liquid Glass 胶囊；两侧的弹性 Spacer 让分组居中。
ToolbarItem
放置单个条目。
| 属性 | 类型 | 说明 |
|---|---|---|
placement | ToolbarItemPlacement | 条目位置，默认 "automatic"。 |
children | ViewChild | 条目内容，通常是 Button。 |
ToolbarItemGroup
在同一位置放置多个条目。
| 属性 | 类型 | 说明 |
|---|---|---|
placement | ToolbarItemPlacement | 条目位置，默认 "automatic"。 |
children | ViewChild | 分组内的条目。 |
ToolbarSpacer
在工具栏条目之间增加间距。
| 属性 | 类型 | 说明 |
|---|---|---|
sizing | "flexible" | "fixed" | 默认 "flexible"。 |
placement | ToolbarItemPlacement | 间距位置，默认 "automatic"。 |
iOS 26 及以上系统使用原生 ToolbarSpacer。在更早的系统上，flexible 会退化为弹性空白，fixed 不生效。
ToolbarItemPlacement
| 值 | 位置 |
|---|---|
"automatic" | 由系统决定。 |
"principal" | 导航栏中央，替代标题。 |
"navigation" | 导航类操作，通常位于前缘。 |
"primaryAction" | 主要操作，通常位于后缘。 |
"secondaryAction" | 次要操作，可能被收进菜单。 |
"status" | 状态信息，通常位于底部栏。 |
"confirmationAction" | 确认操作。 |
"cancellationAction" | 取消操作。 |
"destructiveAction" | 破坏性操作。 |
"keyboard" | 键盘上方。 |
"topBarLeading" | 导航栏前缘。 |
"topBarTrailing" | 导航栏后缘。 |
"bottomBar" | 底部工具栏。 |
行为
- 无论是否使用
NavigationStack，toolbar 都可以使用。被压入的页面只显示该页面自己的工具栏条目。 - 链中位于
toolbar之前的修饰符作用于内容，之后的作用于整体结果，与 SwiftUI 的修饰符顺序一致。 ToolbarItem、ToolbarItemGroup和ToolbarSpacer不接受modifier，请把修饰符应用在它们内部的视图上。- 根页面还会在
cancellationAction和confirmationAction位置显示关闭和控制台按钮。 - Widget 不支持 toolbar。
How is this guide?
最后更新于