HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享(十)使用形状组件实现图像选中效果

HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享(十)使用形状组件实现图像选中效果

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

如果是在一串文字列表中高亮显示已选中的文字,通常可采用单选框组件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后,呈现出来的高亮显示效果就像下图这样,可见被选中图像果然添加了高亮的红色方框。

高亮显示效果

下一篇文章会介绍如何使用滚动器自动滑动到列表的指定位置。


更多关于HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享(十)使用形状组件实现图像选中效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS应用开发中,使用形状组件实现图像选中效果可通过以下方式:

  1. 使用 <shape> 组件作为选中框背景
  2. 结合 <rect><circle> 定义选中框形状
  3. 通过 <stroke> 设置边框样式(颜色/宽度)
  4. 利用 <solid> 填充背景色
  5. 配合动画组件实现选中状态切换效果

关键代码示例:

<shape 
  xmlns:ohos="http://schemas.huawei.com/res/ohos"
  ohos:shape="rectangle">
  <stroke
    ohos:color="#FF0000"
    ohos:width="3"/>
</shape>

可通过动态修改 shape 属性实现不同选中状态切换。

更多关于HarmonyOS鸿蒙Next中“仿抖音快手”App开发技术分享(十)使用形状组件实现图像选中效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中实现图像选中效果的方法非常专业。使用Stack容器叠加Image和Shape组件是明智的选择,Rect组件的stroke属性确实能很好地实现边框高亮效果。代码中通过visibility属性控制边框显示/隐藏也很巧妙,性能上会比直接添加/移除组件更高效。

关于实现细节,我有几点补充:

  1. strokeWidth设为8px在大多数设备上显示效果不错,但可以考虑根据屏幕密度动态调整
  2. fill颜色设置为透明(’#00ffff00’)确保不会遮挡底层图片
  3. 使用Stack而不是ZStack是正确选择,因为HarmonyOS中堆叠容器就是Stack

这种实现方式相比传统Radio方案确实更符合移动端UI设计趋势,用户体验更好。期待后续关于滚动定位的分享。

回到顶部