企业官网建设流程全解析

平板与大屏：分栏与效率

一、引言

平板是「移动与桌面之间」的折中形态：它有手机的触控直觉，却有接近桌面的屏幕面积（800~1200vp，LG 断点）。把手机版直接铺满平板，得到的是字大如斗、留白成片的「半成品」；把桌面版搬上平板，又丢掉触控的轻盈。平板的正确姿势是分栏：主列表常驻，评论与个人作品以侧面板形式并排出现，用户在主内容与详情之间「同时看到、随时切换」——这是平板「效率感」的来源。

本项目products/default同时覆盖 phone 与 tablet 两种 deviceType（module.json5的deviceTypes: ["phone", "tablet"]），平板形态完全由断点驱动，无需第二个入口。本文结合AdaptiveVideoForDefault.ets、SplitComment.ets、IndividualByRouter.ets与Index.ets的真实代码，拆解平板大屏的分栏设计与效率优化。

二、平板宽屏布局优势

平板的宽度优势直观体现在「三段式」布局：导航栏（主列表的容器）+ 主内容区 + 详情侧面板。Index.ets中导航栏宽度按断点分级：

// products/default/src/main/ets/view/Index.ets.navBarWidthRange([newWidthBreakpointType<number>(410,410,700,700).getValue(this.windowInfo.widthBp),'100%']).navBarWidth(newWidthBreakpointType<number>(410,410,700,700).getValue(this.windowInfo.widthBp))

手机（SM）导航栏 410vp 全窗口展示内容；平板（MD/LG）放大到 700vp，为侧面板预留空间。宽屏带来的不仅是「更大」，更是信息并置——手机上看视频 → 返回 → 看评论 → 返回，是串行流程；平板上视频与评论分栏并排，主内容不丢失上下文，操作路径从「进出 4 次」缩短为「打开/关闭面板」。这是平板效率的核心：用空间换时间。

宽屏的第二个红利是「内容密度」：平板端推荐页的视频卡片、个人作品页的作品网格都可以承载更多信息而不显拥挤。Works.ets在平板断点（MD/LG）下将网格列数从手机的 3 列扩展到 4~6 列（'repeat(3,1fr)'→'repeat(4,1fr)'/'repeat(6,1fr)'），同一屏展示更多作品；视频页的操作列（点赞/评论/分享/头像）在平板断点下从侧边独立成列（而非手机 XS 的隐藏或内联），图标尺寸同步放大到 32vp。密度提升不是「塞更多控件」，而是「让每个控件的可用面积更大、同时展示的条目更多」——平板的设计语言是「从容」：内容多而不挤、操作全而不乱。

三、侧面板的展开时机

侧面板「何时弹出、以何种形态弹出」由widthBp统一裁决。AdaptiveVideoForDefault.ets中评论的打开逻辑是典型样例：

// features/multishortvideoadaptivevideo/src/main/ets/view/AdaptiveVideoForDefault.ets.gesture(TapGesture().onAction(()=>{if(this.showSideComment||this.windowInfo.widthBp===WidthBreakpoint.WIDTH_XS){return;}if(this.windowInfo.widthBp>WidthBreakpoint.WIDTH_SM){// 平板/大屏：分栏侧面板this.showSideComment=true;this.pathStack.pushPathByName('SplitComment',null);}else{// 手机：半模态弹窗this.showComment=true;}}))

逻辑只有两行，却定义了两种形态的完整行为：**SM 以下（手机）**走bindSheet半模态弹窗（AdaptiveVideoForDefault底部bindSheet($$this.showComment, ...)），**SM 以上（平板）**走Navigation的Split模式分栏。个人作品页的打开同样按断点分流：平板showSideIndividual = true后推IndividualByRouter入栈，手机则直接整页压栈。三个开关（showSideComment/showSideIndividual）是分栏状态机的心脏——它们同时驱动Navigation.mode的 Split/Stack 切换、hitTestBehavior的点击拦截与onGestureRecognizerJudgeBegin的空白关闭（点空白处弹栈复位），与折叠屏展开态、TV、PC 完全共用同一套状态。

个人作品分栏还处理了一个「容器级断点」的细节：侧面板宽度不等于窗口宽度，作品网格的列数若按窗口断点计算，面板内会出现「4 列挤成一团」或「2 列过于空旷」。Works.ets的做法是按侧栏实际宽度重新判定断点：

// features/multishortvideoindividual/src/main/ets/view/Works.ets.columnsTemplate(...newWidthBreakpointType<string>('repeat(3,1fr)','repeat(4,1fr)','repeat(6,1fr)','repeat(6,1fr)','repeat(2,1fr)').getValue(this.showSideIndividual?WindowUtil.getInstance().getCustomWidthBreakpoint(this.individualWidth):this.windowInfo.widthBp))

分栏打开时，网格列数由individualWidth（侧栏宽度）经getCustomWidthBreakpoint换算的断点决定，而非窗口断点——手机整页 3 列、平板侧栏内仍 3 列，作品卡片的视觉大小几乎不变，用户不会感到「内容忽大忽小」。分栏的每个子容器都应有自己的断点感知，这是大屏分栏区别于整页布局的关键进阶。

四、分栏切换动画

分栏切换最忌「跳变」——面板弹入时主列表宽度突变，视觉上像页面被「挤」了一下。项目用两层动画控制：

// products/default/src/main/ets/view/SplitComment.ets（平板分栏评论面板）aboutToAppear():void{this.pathStack.disableAnimation(true);// 分栏面板禁用路由转场动画}// products/default/src/main/ets/view/Index.ets.enableModeChangeAnimation(false)// 关闭 Navigation 模式切换动画

// features/multishortvideoindividual/src/main/ets/view/IndividualByRouter.etsaboutToAppear():void{this.pathStack.disableAnimation(this.windowInfo.widthBp<WidthBreakpoint.WIDTH_MD?false:true);}

差异很精妙：评论面板无条件禁用动画（SplitComment中写死true），因为评论面板是「附加层」，滑入滑出属于干扰；个人作品面板按断点决定（IndividualByRouter中 MD 以下保留动画、MD 及以上禁用）——手机上个人作品是正经的页面跳转，动画提供空间连续性；平板上它是侧栏，动画反而造成跳变感。动画策略本身也是响应式的，这是「状态驱动动画」在工程上的体现。

五、大屏信息密度与多任务分屏

平板分栏的另一个课题是信息密度：面板不能太宽（空旷）、也不能太窄（拥挤）。SplitComment.ets通过LayoutPolicy.matchParent跟随分栏宽度，评论列表高度用calc精确预留：

// products/default/src/main/ets/view/SplitComment.etsColumn(){this.CustomTitleBuilder()Comment().height('calc(100% - 92vp)')// 92vp = 标题区 56 + 渐变 36}.height(LayoutPolicy.matchParent).ignoreLayoutSafeArea().backgroundColor(newWidthBreakpointType<ResourceColor>($r('sys.color.white'),$r('sys.color.white'),$r('app.color.bg_dark'),$r('app.color.bg_dark')).getValue(this.windowInfo.widthBp))

ignoreLayoutSafeArea()让面板顶到屏幕边缘（平板竖屏时状态栏区域也归面板使用，视频背景自然延伸），背景色按断点切换（手机白底、大屏深底）——面板的视觉重量随屏显环境调整。密度控制的关键是「面板内部继续断点化」：标题字号、关闭按钮、评论行高都按widthBp取值，平板面板内呈现的仍是经过筛选的信息，而非手机内容的机械放大。

面板的尺寸策略同样是「响应式而非固定式」：SplitComment的评论列表高度用calc(100% - 92vp)计算——92vp 由标题区 56vp 与顶部渐变 36vp 组成，列表在分栏内「撑满剩余空间」，无论窗口怎么缩放、分栏怎么变宽，列表始终占满面板、不留底部空白；Comment内部的输入框固定在面板底部（键盘避让走WindowInfo.avoidKeyboard），形成「标题固定、列表可滚、输入贴底」的稳定三段结构——用户在任何窗口尺寸下都清楚「输入框在哪、列表滚到哪」，这是大屏分栏面板区别于整页滚动的关键体验差异。

多任务分屏下，平板窗口可能被压到半屏（约 500~600vp），此时断点降回 SM，showSideComment打开逻辑自动切回半模态——同一个开关，窗口宽时是分栏、窗口窄时是弹窗，无需任何额外代码。这与折叠屏展开/折叠、PC 窗口拖拽是同一套机制的三种演绎。

平板自身的旋转与分屏组合进一步考验这套机制：

同一台平板，旋转与分屏就能让窗口宽度横跨 MD 到 LG 再跌回 SM，评论交互随之在「分栏 ↔ 半模态」间自动切换。旋转是横屏到竖屏的断点迁移、分屏是窗口宽度的断点迁移——两者在机制上没有任何新东西，却覆盖了平板用户最常遇到的真实场景。这正是「断点驱动、形态无感」架构对平板的价值：平板没有专属代码，却自动获得了横竖屏、多任务、窗口化的全部适配能力。

六、分栏打开时序

分栏从「点击评论」到「面板就位」的完整时序，是理解平板交互的关键链路：

两个关键点藏在时序里。其一，showSideComment的置位必须先于pushPathByName——Navigation.mode依赖该状态决定 Split/Stack，若先压栈后置位，面板会以 Stack 模式全屏弹出再跳回 Split，造成闪跳；其二，面板的disableAnimation(true)在aboutToAppear中执行，早于任何转场帧渲染，保证面板是「静默出现」而非「滑入」。分栏体验的成败，往往取决于状态置位与路由动作的先后顺序——这比任何动画参数都重要。关闭分栏的时序与之对称：pathStack.pop()与showSideComment = false在点击空白/关闭按钮时同步执行，Index.ets的onGestureRecognizerJudgeBegin拦截 Tap 后先弹栈再复位开关，保证「关闭动画」与「模式回切」同时完成，不留中间态。

七、与折叠屏展开态的差异

平板与折叠屏展开态共享分栏机制，但有两处本质差异，直接导致「不必为平板写新代码」：

折叠屏需要motion.on('holdingHandChanged')持握感知与防跳变三板斧；平板则长期稳定在一个断点，widthBp只随分屏窗口变化。正因为平板在机制上只是「折叠屏展开态的静止版」，default 产品才能在 phone + tablet 双 deviceType 下共用一份代码——断点系统的「形态与机型解耦」在平板这里是终极检验：平板没有获得任何一行专属代码。

平板与桌面（PC 产品）的差异同样值得厘清：两者都是大屏，但 PC 走SideBarContainer左侧导航 + 自绘窗口装饰，平板走底部 Tab + 系统窗口——因为平板保持触控直觉（拇指可达的底部导航），PC 追求桌面效率（常驻侧栏）。这个差异不是断点能回答的（同一宽度下两种范式都存在），而是产品定位的差异，因此由 products 层（default vs pc 两个 HAP）显式区分。这也界定了断点机制的边界：断点解决「同一产品在不同宽度下的布局」，产品层解决「不同设备的不同范式」——两者分工明确，互不越界。

八、总结与最佳实践

1. 分栏即效率：主列表 + 侧面板的并置布局用空间换时间，评论/个人作品从「串行进出」变为「并行切换」；
2. 断点裁决形态：widthBp > WIDTH_SM决定分栏还是半模态，一个开关（showSideComment）驱动模式、点击拦截、空白关闭的全链路；
3. 动画响应式：评论面板无条件禁动画、个人作品按断点决定——动画策略随形态切换而非一刀切；
4. 面板内部继续断点化：calc预留高度、背景色按断点切换、内容按密度筛选，侧面板不是手机的放大版；
5. 机制复用：平板、折叠屏展开态、PC、TV 共享分栏状态机，断点系统保证「新形态 = 新断点组合」，不新增机型代码。