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
在HarmonyOS应用开发中,使用形状组件实现图像选中效果可通过以下方式:
- 使用
<shape>
组件作为选中框背景 - 结合
<rect>
或<circle>
定义选中框形状 - 通过
<stroke>
设置边框样式(颜色/宽度) - 利用
<solid>
填充背景色 - 配合动画组件实现选中状态切换效果
关键代码示例:
<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属性控制边框显示/隐藏也很巧妙,性能上会比直接添加/移除组件更高效。
关于实现细节,我有几点补充:
strokeWidth
设为8px在大多数设备上显示效果不错,但可以考虑根据屏幕密度动态调整fill
颜色设置为透明(’#00ffff00’)确保不会遮挡底层图片- 使用Stack而不是ZStack是正确选择,因为HarmonyOS中堆叠容器就是Stack
这种实现方式相比传统Radio方案确实更符合移动端UI设计趋势,用户体验更好。期待后续关于滚动定位的分享。