鸿蒙NEXT版仿抖音快手App的实现图像选中效果

aqi00

发布于 2025-07-21 09:43:13

1510

上一节我们利用元数据提取器从媒体文件中提取了音视频规格信息，还利用图像生成器从视频文件中提取了指定时间点的缩略图。那么在选取视频封面的时候，就要展示一串候选的缩略图列表，为了方便用户选取正确的封面图，还要高亮显示已选中的缩略图。接下来就介绍如何在一串图像列表中高亮显示已选中的图片。

如果是在一串文字列表中高亮显示已选中的文字，通常可采用单选框组件Radio，但是对于图像列表来说，通过一组单选框高亮显示已选中的图片并不常见，更常见的是给已选中的图像加上红色边框，这样既不需要额外空间放置单选框，也能更直观地定位已选中的图片。

考虑到红色边框与已选中图像属于上下叠加的关系，因此可将添加边框的过程分为以下两个步骤：

1、引入堆叠容器Stack实现叠加效果

Stack是鸿蒙提供的堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。那么在列表容器List中引入Stack组件的框架代码示例如下：

List() {
  ForEach(this.frameArray, (item: FrameThumbnail) => {
    ListItem() {
      Stack() {
        Image(item.pixelMap).width('100%').height('100%')
          .objectFit(ImageFit.Contain)
        // 这里暂时省略红色方框的布局代码
      }.width(54).height('100%')
      .onClick(() => {
        this.refreshImageList(item) // 刷新图片列表
      })
    }
  })
}

2、引入形状容器Shape添加红色方框

Shape是鸿蒙提供的形状容器，它是绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。Shape容器的子组件包含Rect、Path、Circle、Ellipse、Polyline、Polygon等等，其中绘制方框可采用Rect组件。Rect为矩形绘制组件，通用属性中的width和height对应矩形的宽高，Rect组件还支持以下的常用属性：

fill：设置填充区域颜色。默认值Color.Black表示黑色。

radius：设置圆角半径大小。默认值0。

strokeWidth：设置边框宽度。默认值1。

stroke：设置边框颜色，不设置时，默认没有边框。

注意：如果不设置stroke和strokeWidth属性，Rect组件就展示为单一颜色的方块；如果设置了stroke和strokeWidth属性，Rect组件就展示为边框与内部拥有不同颜色的方框。

根据Rect组件的各属性用途，可编写红色方框的Rect布局代码如下所示：

Shape() {
  Rect().width('100%').height('100%')
    .strokeWidth(8).stroke('#ff0000').fill('#00ffff00')
}.visibility(item.selected ? Visibility.Visible : Visibility.None)

把上面的Shape布局代码补充到前一步骤的List代码中，就变成了下面这样：

List() {
  ForEach(this.frameArray, (item: FrameThumbnail) => {
    ListItem() {
      Stack() {
        Image(item.pixelMap).width('100%').height('100%')
          .objectFit(ImageFit.Contain)
        Shape() {
          Rect().width('100%').height('100%')
            .strokeWidth(8).stroke('#ff0000').fill('#00ffff00')
        }.visibility(item.selected ? Visibility.Visible : Visibility.None)
      }.width(54).height('100%')
      .onClick(() => {
        this.refreshImageList(item) // 刷新图片列表
      })
    }
  })
}

那么运行App后，呈现出来的高亮显示效果就像下图这样，可见被选中图像果然添加了高亮的红色方框。