HarmonyOS 鸿蒙Next中图文混排

一、场景概述

图文混排是指在同一布局中将文字与图片有机结合，形成更具表现力的 UI 展示方式。它不仅仅是简单地放置一个Text或Image，而是通过布局策略让两者在视觉上协调，增强信息传达效果。常见形式包括文字环绕图片、图上叠加文字、图标与文字组合等，广泛应用于商品详情页、新闻正文、卡片组件、标签徽章等场景。

1.1 使用场景

图文混排在空间充足时，通过调整组件的位置与展示方式，在左右布局与上下布局之间切换，用以展示更多内容或提高用户体验。图文组合与自适应导航均属于挪移布局的一种，单页面分上下两部分，上图下文。图片区固定，文字区可滑动。并且根据不同的设备宽度调整左图右文的比例显示。包括：直板机、PAD、PC、TV、座舱、折叠屏（阔折叠、双折叠、三折叠）。

说明

图1 基准直板机、双折叠外屏、三折叠F态，横屏、竖屏布局如下（图文高度比 6：4，默认系统安全区不考虑挖孔避让）

图2 在阔折叠的内屏、外屏以如下方式显示（内屏与直板机相同处理）

图3 在双折叠展开态、三折叠M态、Pad mini，横屏、竖屏以如下方式显示（横竖屏：6：4）

图4 平板和三折叠G态的横屏、竖屏以如下方式显示（横屏1:1，竖屏：6:4）

图 5 pc端如下方式显示

图 6 座舱、tv如下方式显示

1.2 常见问题

图 7 三屏态下首页、详情页显示大图、留白

1.3 多设备适配

1.3.1 图片与文字段落区域尺寸多设备自适应适配

图片、文字区域，支持依据设备窗口宽度调整最佳展示比例。

1.3.2 图文组合适配窗口变化

1、图文组合响应横竖屏切换引起的窗口变化，文字区支持滚动条形式展示避免遮挡、截断

2、图文组合响应分屏引起的窗口变化，基于握持方向窗口宽度判断展示形态

3、图文组合响应悬浮窗引起的窗口变化，基于握持方向窗口宽度判断展示形态，避让状态栏

二、开发指导

2.1 H5开发

2.1.1 关键能力

图文混排关键能力是识别不同设备，调整不同比列，这部分功能主要通过以下能力进行实现，包含以下几个核心api。

通过Web组件的src属性引入H5页面，并使用**registerJavaScriptProxy()**原生侧方法，将JavaScript对象注入到window对象中，从而在window对象中调用该对象的方法，实现H5页面调用原生方法。

Web({ src: 'http://localSampleWSC0170/MainPage', controller: this.webController })
  .onControllerAttached(() => {
    this.webController.registerJavaScriptProxy(this, 'webClass', ['pushToPage', 'clearPage', 'getLastPage']);
    this.webController.refresh();
  })

breakpointsStore：断点工具类，根据breakpointStore.curBreakpoint获取屏幕当前端点值，根据端点值判断图文混排比例分配。

const layout = computed(() => {
  const breakpoint = breakpointStore.curBreakpoint
  if (breakpoint === 'xs' || breakpoint === 'sm') {
    return 'vertical'
  } else {
    return 'horizontal'
  }
})

2.1.2 指导案例

以图文混排为例，在vue开发框架下给出具体的开发指导。

1、由于图文混排是根据断点进行比例适配，我们需要用到web_adaptive_layout_vue3里面封装的组件MultiDiversionVue, DiversionItemVue，根据断点值选择对应的界面显示，达到比例显示。

<template>
  <div class="page-wrapper">
    <MultiDiversionVue
      :direction="direction"
      :splitLine="splitLine">
  
      <DiversionItemVue
        name="image-section"
        :diversion-cols="imageCols">
        <div :class="imageInnerClass">
            <img class="image-content" src="./picture.png" alt="示例图片">
        </div>
      </DiversionItemVue>
  
      <DiversionItemVue
        name="text-section"
        :diversion-cols="textCols">
        <!-- Use different class names for portrait and landscape -->
        <div v-if="isVertical" class="text-area-vertical">
          <h2 class="text-title">{{ title }}</h2>
          <p class="text-content">{{ description }}</p>
        </div>
        <div v-else class="text-area-horizontal">
          <h2 class="text-title">{{ title }}</h2>
          <p class="text-content">{{ description }}</p>
        </div>
      </DiversionItemVue>
    
    </MultiDiversionVue>
  </div>
</template>

2、设置布局样式

根据断点判断布局样式，在xs、sm时布局为上下结构，大屏时为左右结构，代码如下。

// Direction config: set by breakpoint
const direction = computed(() => {
  return {
    xs: 'vertical',
    sm: 'vertical',
    md: 'horizontal',
    lg: 'horizontal',
    xl: 'horizontal'
  }
})

根据断点设置图文所占屏幕比例。

// Image column config - controls width ratio
const imageCols = computed(() => {
  return {
    xs: 12,
    sm: 12,
    md: 7,
    lg: 6,
    xl: 6