分栏视图布局
它把相关内容并排放进两个或多个区域，让用户保留上下文并同时查看详情。
- 左边列表右边同时看详情的页面
- 屏幕分成两块各显示一部分内容
- 拖中间分界线能改两边宽度的布局
- 拆分视图
- 主从分栏
- 多窗格布局
示例
Web / iOS / Android 对照
Web需自己实现
桌面现代浏览器与大屏布局
Split View
也叫 Window Splitter
网页没有原生可拖动分栏组件，布局、分隔条键盘操作和最小尺寸都需要自行实现。
通常怎么做：固定分栏用 CSS Grid；可调分栏按 APG Window Splitter 模式实现。
iOS原生支持
iPadOS 与宽窗口；紧凑宽度自动折叠
Split View
SwiftUI: NavigationSplitView｜UIKit: UISplitViewController
Android原生支持
Android 大屏与自适应窗口
List-detail layout
也叫 Supporting pane
Material 3 Adaptive: NavigableListDetailPaneScaffold / SupportingPaneScaffold
使用规范
什么时候用
- 大屏上列表与详情、主内容与辅助工具需要同时可见并保持关系
什么时候别用
- 手机窄屏、两个区域彼此无关，或每个区域已经复杂到需要独立页面
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。