📐 Adaptive Behavior

Adaptive Behavior / 自适应行为

Behavior matrix / 行为矩阵

Window widthClassonTap behavior
< 600compactpush a new page (classic Navigator stack) / push 新页面(经典 Navigator 栈)
600 – 839mediumpush a new page (single column, different shell chrome) / push 新页面(单列,shell chrome 不同)
>= 840expandedexpand / update the right sidebar pane (master-detail) / 展开或更新右侧侧栏 pane(master-detail)

Breakpoints / 断点

class Breakpoints {
  const Breakpoints({this.compactMaxWidth = 600, this.expandedMinWidth = 840});
}

Classification is based on the window width, deliberately decoupled from the device type, so foldables, small desktop windows and browser zoom all classify correctly. Pass your own Breakpoints to ZeroRouter(breakpoints: …).

档位判定依据是窗口宽度(与设备类型刻意解耦),折叠屏、桌面小窗、浏览器缩放都能正确归类。可向 ZeroRouter(breakpoints: …) 传入自定义断点。

The width is read from MediaQuery (which hosts, tests and the example’s width presets can override), falling back to the layout constraints.

宽度读取自 MediaQuery(宿主、测试与示例的宽度预设均可覆盖),回退到布局约束。

Pane semantics (expanded) / pane 语义(expanded)

ScenarioBehavior
Target extends the current right pane (/products → /products/42)New pane slides in from the right; the old pane shifts left / 新 pane 右滑入,旧 pane 左移
Same branch, not a prefix (/products/41 → /products/42)A leaf is appended to the stack; the viewport shows the last two panes, so the right pane updates in place / 栈上追加叶子;视口只显示最后两个 pane,右 pane 原地更新
Target location already visibleFocus that pane, no duplicate expansion (idempotent) / 聚焦该 pane,不重复展开(幂等)
pushReplacementNamedThe right pane is replaced in place / 右 pane 原地替换
Cross-tabSwitch tabs and rebuild that tab’s stack from the URL / 切换 tab,并按 URL 重建该 tab 的栈
pop / maybePopCollapse the rightmost pane; when the tab stack is exhausted, step toward the root / 收起最右 pane;tab 栈无栈可退时逐级向根退

SlidingPanes only does 1/2 columns; three or more columns are out of scope for v0.1.0.

SlidingPanes 只做单列 / 双列;三列及以上不在 v0.1.0 范围内。

Cross-breakpoint rebuilds / 跨断点重建

Crossing the 840 boundary rebuilds page State (Navigator tree ↔ viewport tree). Keep persistent state in the URL, an external store, or a signal — not in page-local State — and read Caveats in the FAQ.

跨越 840 边界会重建页面 State(Navigator 树 ↔ 视口树)。持久状态请放 URL、外部 store 或 signal,不要放在页面局部 State;详见 FAQ 的 Caveats。

Customization / 定制点

ParameterDefaultEffect
slideDuration280msPane slide duration / pane 滑动时长
slideCurveCurves.easeOutCubicPane slide curve / pane 滑动曲线
paneBuilderCard when wide, flat when narrowWraps each pane / 包裹每个 pane
resizeHandleBuilderRounded animated barWidget Function(BuildContext, bool isHovered)
resizeHandleWidth4Hit width of the handle / 分割线命中宽度
placeholderOutline iconShell-level empty right pane; ZeroTab.placeholder wins / shell 级空右 pane;ZeroTab.placeholder 优先
showBreadcrumbstrueMaster switch for the breadcrumb bar / 面包屑栏总开关
breadcrumbsBuilderInkWell + Text barCustom breadcrumb bar / 自定义面包屑栏
escapePopstrueEscape pops one level / Escape 退一级
1-column transitionsThemeData.pageTransitionsThemeNo private transition hiding / 不私藏转场