一、屏幕类型为啥要分类

前面那篇说了页面布局场景，这篇说的是从屏幕类型的角度看布局。为啥要分类？因为不同屏幕形态差异太大，用同一套方案适配不了。

市场上的智能设备五花八门：手机、平板、折叠屏、三折叠、PC/2in1、智能手表，每种设备屏幕尺寸和形状都不一样。你写一套代码，想在这些设备上都能跑，就得根据屏幕形态设计不同的布局策略。

HarmonyOS 把屏幕形态分成 8 类：

屏幕类型	特点	典型设备
超大屏横屏	横向分辨率 > 1440vp	PC/2in1
大屏横屏	横向分辨率 > 840vp	Pad、三折叠三屏态
大屏竖屏	横向分辨率 md，纵向分辨率 lg	Pad 竖屏
大方形屏	比例 1:1，横向分辨率 > 600vp	Mate X 展开态
直板机竖屏	横向分辨率 sm，纵向分辨率 lg	Mate 60
直板机横屏	横向分辨率 md，纵向分辨率 sm	Mate 60 横屏
小方形屏	比例 1:1，横向分辨率 < 600vp	Pura X 外屏
圆形屏	圆形表盘	智能手表

每种屏幕类型有不同的断点和布局策略，下面一个一个说。

上图清晰地展示了各个设备在不同屏幕形态下的断点。

---

二、超大屏横屏：充分利用大屏空间

超大屏横屏设备横向分辨率超过 1440vp，比如 PC/2in1。这类设备具备更强的多任务处理能力，可同时展示多个应用或复杂布局。

断点判断

横纵断点	设备
横向断点 xl，纵向断点 sm	PC/2in1

布局策略

超大屏横屏的核心是充分利用屏幕空间，提升信息密度和用户操作效率。建议采用响应式布局，结合导航栏、重复布局和多栏布局。

1. 导航栏：挪移布局

布局建议：横向断点为 xl 时，建议采用挪移布局，将底部导航栏变更为侧边分级导航栏。

实现原理：使用 SideBarContainer 组件实现侧边栏效果，传入两个子组件，分别表示侧边栏区域和内容区域。

2. 网格：重复布局

布局建议：页面中需要展示较多元素内容时，建议采用重复布局，结合网格实现结构化排布。

实现原理：Grid 组件设置不同断点下的 columnsTemplate 和 rowsTemplate。

<

3. 列表：重复布局

布局建议：在大屏上展示更多内容信息，可以根据断点展示更多列数。

实现原理：List 组件的 lanes 属性设置更多列数。

4. 三分栏：分栏布局

布局建议：面对具有多级属性的内容，建议采用分栏布局，清晰展现层级结构。

实现原理：组合使用 Navigation 和 SideBarContainer，xl 断点下设置 SideBarContainer 的 showSideBar 为 true，Navigation 的 mode 为 Auto。

---

三、大屏横屏：横向空间充裕

大屏横屏横向分辨率超过 840vp，比如 Pad、三折叠三屏态。这类屏幕提供更宽广的显示视野，适合展示丰富和多层次的内容。

断点判断

横纵断点	设备
横向断点 lg，纵向断点 sm	Pad（横向）、三折叠三屏态（横向）、折叠 PC（半折叠态）

布局策略

大屏横屏的核心是利用横向空间，展示更多信息，提升信息密度。

1. 导航栏：挪移布局

布局建议：横向断点为 lg 时，建议将底部导航栏变更为侧边导航栏。

实现原理：Tabs 组件设置 barPosition 为 Start，vertical 为 true。

2. 瀑布流：重复布局

布局建议：小尺寸屏幕上的全屏内容，在宽屏设备上自动切换为瀑布流布局，提升浏览效率。

实现原理：WaterFlow 组件的 columnsTemplate 属性设置列数。

3. 轮播图：重复布局

布局建议：多张图片展示的场景，使用轮播图展示，设置多个轮播项。

实现原理：Swiper 组件的 displayCount 属性设置视窗内图片显示个数。

4. 网格：重复布局

布局建议：重复内容根据可用空间动态调整列数、间距与排列方向。

实现原理：Grid 组件设置不同断点下的 columnsTemplate 和 rowsTemplate。

5. 列表：重复布局

布局建议：大量重复内容有序展示，采用重复布局，结构化排列。

实现原理：List 组件的 lanes 属性设置列数或行数。

6. 侧边栏：分栏布局

布局建议：充分发挥大屏优势，合理划分主内容区与侧边栏区域。

实现原理：SideBarContainer 组件在 lg 断点下设置 showSideBar 为 true。

7. 三分栏：分栏布局

布局建议：页面包含层级关系，使用分栏布局实现三分栏效果。

实现原理：组合使用 SideBarContainer 与 Navigation，lg 断点下设置 SideBarContainer 的 showSideBar 为 true，Navigation 的 mode 为 Auto。

](https://i-blog.csdnimg.cn/direct/adcf7b3335e04c64bcd97a0e6d82bbda.png)

8. 插图和文字组合：挪移布局

布局建议：图文并茂展示，采用挪移布局，图片与文字左右分布。

实现原理：GridRow 和 GridCol 设置不同断点下栅格子元素占据的列数，超过总列数时自动换行。

---

四、大屏竖屏：纵向空间充裕

大屏竖屏是 Pad 等设备旋转 90 度后的状态，横向断点 md，纵向断点 lg。便于用户聚焦内容流并进行滚动、点击等基础操作。

断点判断

横纵断点	设备
横向断点 md，纵向断点 lg	Pad（竖屏）、三折叠三屏态（竖屏）

布局策略

大屏竖屏的核心是利用纵向空间，导航栏通常位于顶部或底部。

1. 导航栏：底部布局

布局建议：推荐将页签栏布局在底部，提升核心功能的可访问性。

实现原理：Tabs 组件设置 barPosition 为 End，vertical 为 false。

2. 轮播图：重复布局

布局建议：屏幕宽度较大，采用重复布局，多张图片轮播。

实现原理：Swiper 组件的 displayCount 属性设置多个轮播项同时展示。

3. 列表：重复布局

布局建议：相较于直板机竖屏具有更大的展示内容区，设置为一行多列或一列多行。

实现原理：List 组件的 lanes 属性设置列数或行数。

](https://i-blog.csdnimg.cn/direct/041889d7001e44049546b63a7b8e0d6f.png)

4. 网格：重复布局

布局建议：支持设置多行多列展示。

实现原理：Grid 组件设置不同断点下的 columnsTemplate 和 rowsTemplate。

---

五、大方形屏：折叠屏展开态

大方形屏比例 1:1，横向分辨率超过 600vp，比如 Mate X 系列展开态。这类屏幕非常适合多任务处理、内容分屏展示以及创作类应用。

断点判断

横纵断点	设备
横向断点 md，纵向断点 md	Mate X 系列（展开态）、Mate XT 系列（双屏 M 态）

布局策略

大方形屏的核心是利用宽广的横向和纵向空间，采用分栏布局。

1. 导航栏：底部布局

布局建议：md 断点的大方形屏，推荐页签栏位于底部，图标与文字水平排列，页签高度固定 56vp。

实现原理：Tabs 组件设置 barPosition 为 End，vertical 为 false。

2. 瀑布流：重复布局

布局建议：小尺寸屏幕上的单列瀑布流，在大方形屏上变为多列瀑布流。

实现原理：WaterFlow 组件的 columnsTemplate 属性设置列数。

3. 网格：重复布局

布局建议：使用重复布局，多行多列展示重复性信息元素。

实现原理：Grid 组件定义行列结构和单元格分布。

4. 列表：重复布局

布局建议：通过"一行多列"或"一列多行"展示更多内容。

实现原理：List 组件的 lanes 属性设置列数或行数。

5. 双栏：分栏布局

布局建议：采用分栏布局，利用横向空间优势，清晰展示层级关系。

实现原理：Navigation 的 mode 属性设置为 Auto，自动实现单/双栏切换。

<

6. 侧边栏：分栏布局

布局建议：横向空间充裕，添加侧边栏，提升信息展示效率。

实现原理：SideBarContainer 组件动态设置 showSideBar 为 true。

7. 插图和文字组合：挪移布局

布局建议：部分小屏上下显示的场景，大方形屏时左右分布。

实现原理：GridRow/GridCol 设置栅格子元素占据的列数，超过总列数时自动换行。

---

六、直板机竖屏：主流手机屏幕

直板机竖屏是手机的主流屏幕类型，横向断点 sm，纵向断点 lg。适合单手操作和日常信息浏览。

断点判断

横纵断点	设备
横向断点 sm，纵向断点 lg	Mate 60、小折叠（展开态）、阔折叠（展开态）、双折叠（折叠态）、三折叠（折叠态）

布局策略

直板机竖屏的核心是简洁直观、操作高效，推荐采用单栏布局。

1. 导航栏：底部布局

布局建议：使用底部页签栏布局，方便用户快速切换功能模块。

实现原理：Tabs 组件设置 barPosition 为 End，vertical 为 false。

<

2. 瀑布流：重复布局

布局建议：使用重复布局，提升内容展示密度与滚动浏览体验。

实现原理：WaterFlow 组件的 columnsTemplate 属性设置列数。

3. 插图和文字组合：上下布局

布局建议：推荐使用上下布局，按内容优先级从上至下排列。

实现原理：GridRow 和 GridCol 配置栅格子元素占据的列数。

4. 单栏：分栏布局

布局建议：推荐使用单栏布局，按内容顺序垂直排列。

实现原理：Navigation 组件的 mode 属性设置为 Stack。

---

七、直板机横屏：横向显示增强

直板机横屏是竖屏设备旋转至横屏后的状态，横向断点 md，纵向断点 sm。适合观看视频、浏览网页、编辑文档及游戏。

断点判断

横纵断点	设备
横向断点 md，纵向断点 sm	Mate 60（横屏）、小折叠（展开态横屏）、阔折叠（展开态横屏）、双折叠（折叠态横屏）、三折叠（折叠态横屏）

布局策略

直板机横屏的核心是利用横向空间，采用重复布局和分栏布局。

1. 网格：重复布局

布局建议：利用较宽的显示区域横向展示更多内容。

实现原理：Grid 组件定义行列结构和单元格分布。

2. 插图与文字组合：挪移布局

布局建议：将图片与文字左右排列，合理利用横向空间。

实现原理：GridRow/GridCol 设置栅格子元素占据的列数，超过总列数时自动换行。

3. 双栏：分栏布局

布局建议：将界面划分为左右两部分，充分利用横向空间。

实现原理：Navigation 组件设置 mode 为 Auto，或 SideBarContainer 组件设置 showSideBar 为 true。

---

八、小方形屏：阔折叠外屏

小方形屏比例 1:1，横向分辨率低于 600vp，比如 Pura X 外屏。主要用于即时信息处理、便捷出行导航、快速移动支付。

断点判断

横纵断点	设备
横向断点 sm，纵向断点 md	阔折叠（折叠态）

布局策略

小方形屏的核心是确保布局完整显示，避免内容截断、挤压或堆叠。

1. 页面支持滑动、完整显示

布局建议：使用 Scroll 组件实现页面支持滑动，确保内容完整显示。

2. 短视频播放页面完整显示

布局建议：背景图片（视频）等比例缩放并上下沉浸，侧边控件支持滑动。

实现原理：使用 Stack 组件控制页面内容显示层级，Z序从下到上分别是背景图片区、底部页签区、短视频描述区、侧边控件区、顶部页签区。

Stack({ alignContent: Alignment.BottomEnd }) {
  // Background image
  Row() {
    Image($r('app.media.background_image'))
      .height('100%')
      .objectFit(ImageFit.Cover)
      .aspectRatio(0.6)
  }
  .height('100%')
  .width('100%')

  // Bottom tabs
  List() {
    // ...
  }
  .backgroundColor($r('sys.color.mask_secondary'))
  .listDirection(Axis.Horizontal)
  .height(this.bottomBarHeight)
  .padding({ bottom: this.bottomAvoidHeight })

  // Video description
  Column() {
    // ...
  }
  .alignItems(HorizontalAlign.Start)
  .padding({
    left: $r('app.float.margin_md'),
    right: $r('app.float.margin_md')
  })

  // Sidebar buttons
  Scroll() {
    Column() {
      Blank()
        .layoutWeight(3)
        .displayPriority(1)
      // ...
      Blank()
        .layoutWeight(1)
        .displayPriority(1)
    }
  }
  .scrollBar(BarState.Off)
  .layoutWeight(1)
  .width('56vp')
  .edgeEffect(EdgeEffect.None)
  .align(Alignment.Bottom)
  .margin({
    top: this.topAvoidHeight + 24,
    bottom: this.bottomBarHeight,
    right: '8vp'
  })

  // Top tabs
  Row() {
    // ...
  }
}
.height('100%')
.width('100%')
.backgroundColor(Color.Black)

3. 自定义弹窗适配小方形屏

布局建议：弹窗内容区使用 Scroll 组件包裹，约束高度不超过父组件的 90%。

实现原理：Scroll 组件设置 constraintSize，maxHeight 为 90%。

Scroll() {
  Column() {
    // ...
  }
}
.scrollBar(BarState.Off)
.constraintSize({
  minHeight: 0,
  maxHeight: '90%'
})

4. 沉浸式浏览

布局建议：使用上滑隐藏、下滑恢复显示的功能，实现全屏内容浏览。

实现原理：监听滚动行为，动态调整页面组件的高度和透明度。

关键代码：

• 使用 @StorageLink 控制顶部标题栏和底部页签栏的高度及透明度
• 监听系统避让区变化，调整避让高度
• onScrollFrameBegin 回调中，上滑时减少固定区高度和透明度，下滑时恢复
  

---

九、圆形屏：智能手表

圆形屏是智能手表的典型屏幕形态，横向断点 xs，纵向断点 sm。主要用于即时通知和轻量级交互。

断点判断

横纵断点	设备
横向断点 xs，纵向断点 sm	智能手表（圆形屏）

特殊处理

圆形屏幕设备在屏幕形态和使用场景上独特，建议专门为圆形屏幕设备进行界面和逻辑设计，独立创建一个 HAP 包。

开发时，需要将 module.json5 的 deviceTypes 改为 wearable。

弧形组件

ArkUI 为圆形屏幕提供了弧形组件：

组件名	说明
ArcList	弧形列表组件，适合连续、多行呈现同类数据
ArcButton	弧形按钮组件，提供强调、普通、警告等样式
ArcSlider	弧形滑动组件，用于快速调节设置值
ArcScrollBar	弧形滚动条组件，配合可滚动组件使用
ArcAlphabetIndexer	弧形索引条，按字母顺序快速定位
ArcSwiper	弧形滑块视图容器，提供子组件滑动轮播显示
ArcListItem	展示列表具体子组件，必须配合 ArcList 使用

圆角处理

圆形表盘需要在最外层容器添加 borderRadius 属性，设置 50% 大小的圆角：

build() {
  Navigation(this.pathStack) {
    // ...
  }
  .backgroundColor(Color.Black)
  .hideTitleBar(true)
  .hideToolBar(true)
  .height('100%')
  .width('100%')
  .borderRadius('50%')
}

滑动切屏

建议使用 ArcSwiper 组件实现手表上页面滑动切换：

ArcSwiper() {
  CarInformationView()
  CarControlView({ pathStack: this.pathStack })
}

---

十、总结

8 种屏幕类型各有特点，适配策略也不同：

屏幕类型	核心策略	典型布局
超大屏横屏	充分利用空间，提升信息密度	侧边导航、网格、列表、三分栏
大屏横屏	利用横向空间，展示更多信息	侧边导航、瀑布流、轮播、侧边栏、三分栏、图文左右
大屏竖屏	利用纵向空间，导航栏底部	底部导航、轮播、列表、网格
大方形屏	利用宽广空间，分栏布局	底部导航、瀑布流、网格、双栏、侧边栏、图文左右
直板机竖屏	简洁直观，单栏布局	底部导航、瀑布流、图文上下、单栏
直板机横屏	利用横向空间，重复分栏	网格、图文左右、双栏
小方形屏	确保完整显示，避免截断	滑动页面、短视频沉浸、弹窗适配、沉浸式浏览
圆形屏	弧形组件，专门设计	ArcList、ArcSwiper、圆角处理

关键要点：

• 断点判断要准确：横向断点和纵向断点组合判断屏幕类型
• 布局策略要匹配：根据屏幕特点选择合适的布局方式
• 特殊屏幕要专门处理：小方形屏要确保完整显示，圆形屏要用弧形组件

掌握这 8 种屏幕类型的适配策略，就能写出真正的"一次开发，多端部署"代码。