一、什麼是圖文混排？為什麼要學

在日常 App UI 開發裏，圖文混排非常常見，比如：

• 商品詳情頁裏：大圖 + 下面配文字
• 新聞/文章裏：正文嵌入插圖 + 文字解釋
• 卡片組件：圖標 + 標題 + 副標題組合
• 標籤/徽章結合文字説明

圖文混排的核心目的是 把圖片和文字有機組合在一個佈局裏，既能描述信息，又增強視覺表現力。它比單純的 Text 或 Image 更靈活，同時也比手動用 Row/Column 單獨拼接更語義清晰

二、常見圖文混排結構有哪些

三、基本組件回顧（圖 + 文）

圖文佈局通常用到兩個核心組件：

1) Image

用於展示圖片，可以是本地資源或網絡資源：

Image($r('app.media.mate60'))
  .width(120)
  .height(80)
  .borderRadius(8)

Image 的關鍵點：

• 常見在卡片、列表或縮略圖使用
• 可配背景圓角、裁剪、縮放模式等
• 若要從網絡加載，需要在 module.json5 配置網絡權限 ohos.permission.INTERNET（針對網絡圖片）

2) Text

用於展示文字內容，可以控制對齊、顏色、大小、最大行數等屬性：

Text('商品標題')
  .fontSize(15)
  .fontColor(0xFF000000)
  .maxLines(2)
  .textOverflow({ overflow: TextOverflow.Ellipsis })

四、最基礎的圖文混排寫法（像人寫的那種）

下面給你幾種最常見、能直接用在項目裏的圖文混排寫法，從簡單到複雜逐步示範：

1. 圖片 + 文字（上圖下文）

最常見的商品詳情/文章示例：

Column({ space: 8 }) {
  Image($r('app.media.sample_pic'))
    .width('100%')
    .height(180)
    .borderRadius(12)

  Text('這裏是圖片下的描述性文字，可能很長，需要自動換行')
    .fontSize(14)
    .fontColor(0xFF333333)
}
.padding(12)

這種結構清晰、可維護，適合內容展示頁、商品詳情等。

2. 圖左文右（列表項典型寫法）

用於商品列表、聯繫人列表等：

Row({ space: 10, alignItems: ItemAlign.Center }) {
  Image($r('app.media.avatar'))
    .width(60)
    .height(60)
    .borderRadius(8)

  Column({ space: 4 }) {
    Text('標題文本')
      .fontSize(16)
      .fontWeight(FontWeight.Medium)

    Text('副標題/説明，最多兩行')
      .fontSize(13)
      .fontColor(0xFF666666)
      .maxLines(2)
      .textOverflow({overflow: TextOverflow.Ellipsis})
  }
}
.padding({ left: 12, right: 12 })

要點：

• 用 Row 保證圖片和文字橫向排列
• alignItems: ItemAlign.Center 讓圖片/文字垂直居中
• 
  

3. 圖片背景上的文字（圖文疊加）

有時候設計稿會要求文字覆蓋在圖上，這時可以用 Stack：

Stack({ alignContent: Alignment.BottomStart }) {
  Image($r('app.media.banner'))
    .width('100%')
    .height(180)
    .borderRadius(12)

  Text('疊加在圖片底部的標題')
    .fontSize(18)
    .fontColor(0xFFFFFFFF)
    .padding(12)
}

這是典型的圖上文字效果，適合焦點圖、輪播頁卡片等場景。

五、進階圖文混排策略

在一些複雜場景裏，你可能需要做到：

圖文環繞佈局

理論上 ArkTS 不直接提供 Text 自動圍繞圖片的 API（比如 CSS 的 float），但你可以用組合佈局達到“視覺上文字圍繞圖”的效果：

Row({ space: 8 }) {
  Column({ width: '30%' }) {
    Image($r('app.media.side_pic')).width('100%').height(120)
  }
  Column({ width: '70%' }) {
    Text('這是一段很長的文字內容，它會填滿剩餘寬度的列...')
    Text('第二段繼續説明性文字...')
  }
}

這種方式是左右分欄模擬圖文環繞，實際在列表/詳情頁裏很常見。

圖標 + 文本混排（小圖標在文字中）

如果要在一段文字裏嵌入一個小圖標，例如 熱門商品 形式：

Row({ space: 6, alignItems: ItemAlign.Center }) {
  Image($r('app.media.icon_star'))
    .width(14).height(14)

  Text('熱門推薦')
    .fontSize(14)
    .fontColor(0xFFFF3B30)
}

這種圖文混排比單純靠字符 Emoji 更規範、易控制，也利於不同屏幕尺寸自適應。

六、圖文混排常見問題（開發者角度）

問題 1 — 圖片尺寸亂了

常見原因： Image 沒指定 width/height 或者沒設比例
解決方式：明確指定固定尺寸或 aspectRatio 約束比例

問題 2 — 文字沒有自動換行

在默認情況下 Text 會自動換行，但當你把 Text 放在一個確定寬度的容器裏時（比如 Row 內 Column），換行才會按你預期發生；如果寬度不夠明確，可能看起來像不換行。
解決方式：明確容器寬度/權重約束

問題 3 — 圖像加載延遲導致佈局跳動

尤其是網絡圖片，在未加載完成前佈局可能“先撐開後收縮”。
解決方式：

• 先設置 width/height（固定佔位），
• 或用骨架屏/佔位圖避免閃動

七、什麼時候用圖文混排

八、小結（像真實開發者寫的重點總結）

• 圖文混排是 UI 常見但不簡單的佈局問題，目的是讓圖和文在視覺上協調、美觀地展現內容。
• 最常用的實現方式就是組合 Row, Column, Stack + Text + Image。
• 關鍵在於 佈局策略（橫向/縱向/疊加）和 尺寸控制（確保圖片/文字空間比例合理）。
• 不同場景的佈局有不同的側重點：
  卡片列表 → 圖左文右
  全屏海報 → 圖上文字
  段落細節 → 圖文分欄