HarmonyOS7 VideoListLayouts 教程：视频列表为什么要同时掌握横向和纵向两种结构

大奉宁宴

125人浏览 · 2026-08-04 09:41:53

大奉宁宴 · 2026-08-04 09:41:53 发布

文章目录

为一篇 HarmonyOS7 VideoListLayouts 教程生成手绘笔记风信息图，主题是“为

前言

视频内容一多，你迟早会碰到列表布局问题。

是做横向滑动的推荐条，还是做纵向滚动的信息流？缩略图要占多大，标题和播放量放在哪里，播放按钮要不要覆盖在封面上，这些看起来像排版细节，实际上直接决定了页面的浏览节奏。

这份案例很适合用来理解视频列表最常见的两类结构：横向卡片流和纵向列表流。掌握这两种基础模式，后面做首页推荐区、频道页、合集页时就会稳很多。

这份案例在演示什么

代码分成两块：

横向视频列表
纵向视频列表

这两种结构并不是谁替代谁，而是服务不同的浏览目标。

为 HarmonyOS7 视频列表教程生成一张对比型手绘插图，重点对比横向列表与纵向列表的使用场景。

列表类型	更适合什么场景
横向列表	首页推荐、专题推荐、可横向扫览的内容带
纵向列表	频道页、搜索结果页、完整内容流

完整代码

/**
 * VideoListLayouts - Video 视频列表
 * 演示视频缩略图列表布局模式
 */
import { PRESET_COLORS, generateListItems, PAGE_BG_COLOR, PANEL_BG_COLOR, ACCENT_COLOR, MUTED_TEXT_COLOR } from './types'

@Entry
@Component
struct VideoListLayouts {
  @State isShow: boolean = true

  build() {
    Column() {
      if (this.isShow) {
        Scroll() {
          Column({ space: 16 }) {
            Text('Video 视频列表').fontSize(16).fontColor(ACCENT_COLOR).fontWeight(FontWeight.Bold)

            Column() {
              Text('横向视频列表').fontSize(13).fontColor('#4D96FF').margin({ bottom: 8 })
              Scroll() {
                Row({ space: 10 }) {
                  ForEach([0, 1, 2, 3, 4], (idx: number) => {
                    Column() {
                      Stack() {
                        Column() {
                          Text(`${idx + 1}`).fontSize(14).fontColor('#FFFFFF')
                        }
                        .width(120).height(75).backgroundColor(PRESET_COLORS[idx].value).borderRadius(8).justifyContent(FlexAlign.Center)
                        Text('▶').fontSize(16).fontColor('#FFFFFF')
                          .width(32).height(32).backgroundColor('#00000060').borderRadius(16).textAlign(TextAlign.Center)
                      }
                      Text(`视频 ${idx + 1}`).fontSize(11).fontColor('#333333').margin({ top: 4 }).maxLines(1)
                      Text(`${(idx + 1) * 5}万播放`).fontSize(10).fontColor(MUTED_TEXT_COLOR)
                    }
                  })
                }.padding({ left: 4, right: 4 })
              }.scrollable(ScrollDirection.Horizontal)
            }
            .backgroundColor(PANEL_BG_COLOR).padding(12).borderRadius(12)

            Column() {
              Text('纵向视频列表').fontSize(13).fontColor('#6BCB77').margin({ bottom: 8 })
              List() {
                ForEach([0, 1, 2, 3], (idx: number) => {
                  ListItem() {
                    Row() {
                      Stack() {
                        Column() {
                          Text(`${idx + 1}`).fontSize(12).fontColor('#FFFFFF')
                        }
                        .width(100).height(60).backgroundColor(PRESET_COLORS[idx].value).borderRadius(6).justifyContent(FlexAlign.Center)
                        Text('▶').fontSize(14).fontColor('#FFFFFF')
                          .width(28).height(28).backgroundColor('#00000060').borderRadius(14).textAlign(TextAlign.Center)
                      }
                      Column({ space: 3 }) {
                        Text(`视频标题 ${idx + 1}`).fontSize(13).fontColor('#1A1A1A').maxLines(1)
                        Text('作者 | 时长 05:32').fontSize(11).fontColor(MUTED_TEXT_COLOR)
                        Text(`${(idx + 1) * 1.2}万播放 · ${idx * 3 + 1}天前`).fontSize(10).fontColor(MUTED_TEXT_COLOR)
                      }.alignItems(HorizontalAlign.Start).margin({ left: 12 }).layoutWeight(1)
                    }.width('100%').padding(8)
                  }
                })
              }.height(280).divider({ strokeWidth: 0.5, color: '#E8E8E8' })
            }
            .backgroundColor('#F0FAF1').padding(12).borderRadius(12)
          }.width('100%')
        }
      }
      Text('Video 列表布局 - 横向推荐流与纵向信息流的区别')
        .fontSize(12).fontColor(MUTED_TEXT_COLOR).margin({ top: 12 })
    }
    .width('100%').height('100%').backgroundColor(PAGE_BG_COLOR).padding(16)
  }
}

为 HarmonyOS7 VideoListLayouts 教程生成一张手绘流程图，表现视频列表布局

横向列表为什么适合首页推荐区

先看第一块：

Scroll() {
  Row({ space: 10 }) {
    ...
  }
}.scrollable(ScrollDirection.Horizontal)

这种结构的核心在于，它允许用户快速左右扫过一批内容，而不打断页面的主纵向滚动节奏。

这很适合：

首页“猜你喜欢”
课程合集入口
同类内容推荐条
专题卡片流

横向列表的重点通常不是信息讲得多完整，而是先把兴趣勾起来。

为什么横向卡片里的封面更像主角

横向列表的空间有限，所以案例里用了更明显的缩略图区和覆盖式播放按钮：

Stack() {
  封面层
  播放按钮层
}

这类结构特别适合视频列表。因为视频内容最先吸引人的，往往就是封面图和“它可以点开播放”这件事。

纵向列表为什么更适合完整浏览

第二块改成了 List：

List() {
  ForEach(...) {
    ListItem() {
      ...
    }
  }
}

这意味着页面进入了更标准的信息流模式。

纵向列表的优势是每个条目可以承载更多信息，比如：

标题
作者
时长
播放量
发布时间

这类结构适合用户认真比较和挑选内容，而不是只做快速扫览。

`layoutWeight(1)` 为什么在纵向列表里很重要

在条目布局中，这行特别关键：

.layoutWeight(1)

它让右侧文案区自动吃掉剩余空间，避免因为封面固定宽度导致文字排布挤压失衡。

视频列表里这类弹性分配非常常见，因为左侧缩略图尺寸通常比较稳定，右侧信息区则要适应不同标题长度。

`divider(...)` 为什么能让列表更像真实内容流

看这里：

.divider({ strokeWidth: 0.5, color: '#E8E8E8' })

它不是可有可无的点缀，而是在告诉用户每一条内容边界在哪里。

对于纵向列表来说，轻量分割线可以明显提升扫描效率，尤其是在同类型条目连续出现时。

关键代码单独讲解

`.scrollable(ScrollDirection.Horizontal)`

横向推荐流的基础入口，没有它就只是普通的 Row。

`Stack()`

非常适合做“视频封面 + 播放按钮”的叠层结构。

`.maxLines(1)`

限制标题只显示一行，避免横向卡片或紧凑列表被过长标题打乱节奏。

小白最容易踩的坑

1. 横向列表里塞太多文字

结果卡片既不紧凑，也不利于扫览。

2. 纵向列表只有标题，没有辅助信息

用户很难快速判断内容值不值得点开。

3. 缩略图和文案区比例没控制好

封面太大，文字放不下；文字太大，封面又失去吸引力。

这份代码能怎么改成真实业务

场景	改法
首页推荐区	保留横向卡片流做专题推荐
搜索结果页	使用纵向列表承载完整视频信息
课程目录页	横向展示章节预告，纵向展示完整章节列表
媒体频道页	组合使用两种布局做“推荐 + 全部内容”结构