鸿蒙 PC 应用开发：挪移布局与缩进布局

挪移布局与缩进布局概述

布局类型	实现方案
插图和文字组合布局	GridRow/GridCol 组件 + 断点 + 栅格
底部/侧边导航	SideBarContainer 组件 + 断点
单列列表布局	GridRow/GridCol 组件 + 断点 + 栅格

挪移布局

挪移布局是指在空间充足时，通过调整组件的位置与展示方式，在左右布局与上下布局之间切换，用以展示更多内容或提高用户体验。常用的挪移布局包括插图和文字组合布局、底部/侧边导航。

插图和文字组合布局

插图和文字组合布局基于横向断点，设置组件所占不同的栅格数，实现左右布局与上下布局的切换。

布局效果

实现方案

设置不同横向断点下，GridRow 组件的 columns、breakpoints 属性，和 GridCol 组件的 span 属性实现目标效果。

示例代码

GridRow({ 
  columns: { xs: 4, sm: 4, md: 8, lg: 12, xl: 12 }, 
  gutter: 0, 
  breakpoints: { value: ['320vp', '600vp', '840vp', '1440vp'] }, 
  direction: GridRowDirection.Row 
}) {
  GridCol({ 
    span: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4 }, 
    offset: 0 
  }) {
    // ...
  }
  .height(this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? this.getGridColHeight() : '100%')
  .padding({ top: this.getUIContext().px2vp(this.mainWindowInfo.AvoidSystem?.topRect.height) + 12 })
  .backgroundColor('#AAD3F1')

  GridCol({ 
    span: { xs: 4, sm: 4, md: 4, lg: 8, xl: 8 }, 
    offset: 0 
  }) {
    // ...
  }
  .backgroundColor(Color.Pink)
  .layoutWeight(1)
  .padding({ top: this.mainWindowInfo.widthBp === WidthBreakpoint.WIDTH_SM ? 0 : this.getUIContext().px2vp(this.mainWindowInfo.AvoidSystem?.topRect.height) })
}

代码解析：

1. 初始化网格布局：使用 GridRow 组件初始化一个网格行，设置了列的数量、间距和断点，方向为行方向。
2. 定义第一个网格列：使用 GridCol 定义一个网格列，设置列在不同屏幕尺寸下的跨度和偏移量。设置列的高度和内边距，根据屏幕宽度调整高度和内边距的值。设置背景颜色为 #AAD3F1。
3. 定义第二个网格列：使用 GridCol 定义另一个网格列，设置列在不同屏幕尺寸下的跨度和偏移量。设置背景颜色为粉色。设置布局权重为 1，根据屏幕宽度调整内边距的值。
4. 布局适应性：通过 breakpoints 和 span 的设置，确保布局在不同屏幕尺寸下都能自适应显示。使用 layoutWeight 来控制列的布局权重，影响在多余空间的分配。

此布局场景也常用于页面顶部页签与搜索框，具体可参考如下布局效果。