Title Bar 标题栏

用于自由窗口的窗口标题栏——PC/2in1 以及处于自由多窗 / 电脑模式的平板。它用 SparkUI 的标题栏替换系统标题栏：图标、标题、插槽、跟随主题的窗口按钮，拖动移动、双击最大化。在手机和全屏窗口中会自动隐藏。

标题栏属于窗口装饰（窗口按钮、拖动、最大化、系统标题栏 API），只存在于 HarmonyOS 的自由窗口中，本页示例只展示代码。

预览

分离的预览不会影响真实窗口；点击窗口按钮只会上报对应动作。

STitleBar({ title: 'SparkUI Gallery', icon: 'sparkles', systemButtons: 'custom' }) {
  SButton({ variant: 'ghost', sizing: 'icon-sm', icon: 'search', label: 'Search' })   // actions slot
}

// systemButtons:
//   'keep'   — system buttons stay (restyled via setDecorButtonStyle), the bar reserves getTitleButtonRect
//   'custom' — system buttons hidden, SparkUI draws its own (minimize / maximize·restore / close)
//   'hidden' — no caption buttons

插槽

尾随闭包放操作按钮；sidebarController 会在最左侧加上侧边栏切换按钮；其他内容通过 startBuilder / leadingBuilder / centerBuilder 传入 wrapBuilder(globalBuilder)。这些区域不会触发窗口拖动，它们周围的空白处才会。

// regions take wrapBuilder(globalBuilder); a component keeps the region's state
@Builder function noteMenu() { SButton({ variant: 'ghost', sizing: 'icon-sm', icon: 'menu', label: 'Menu' }) }
@Builder function noteTabs() { NoteTabs() }   // @ComponentV2 struct with its own @Local tab

STitleBar({
  title: 'Notes', icon: 'file-text',
  sidebarController: this.sidebar,            // SSidebarTrigger before the icon
  leadingBuilder: wrapBuilder(noteMenu),       // after the title
  centerBuilder: wrapBuilder(noteTabs)         // centred
}) {
  SButton({ variant: 'ghost', sizing: 'icon-sm', icon: 'share', label: 'Share' })   // trailing actions
}
// every region is no-drag; the free bar area drags the window, double-click maximizes / restores.

当前窗口

来自 SparkWindowChrome 的实时状态。“应用”会隐藏当前窗口的系统标题栏，并在画廊顶部显示 STitleBar；需要处于自由窗口中。

接入

先绑定一次主窗口，再把标题栏放在页面顶部。

// EntryAbility.onWindowStageCreate — inside the loadContent callback (decor APIs need it):
windowStage.loadContent('pages/Index', (err) => {
  if (err.code) { return; }
  SparkWindowChrome.init(windowStage, this.context);
});

// Page: the bar lives outside the scrolling content. On phones / outside free windows /
// in full screen it renders nothing, and the system title bar comes back when it unmounts.
Column() {
  STitleBar({ title: 'My App', icon: 'sparkles' })
  MyContent().layoutWeight(1)
}