Image 中图片超出指定高度 截取上面部分 的问题 - HarmonyOS 鸿蒙Next
Image 中图片超出指定高度 截取上面部分 的问题 - HarmonyOS 鸿蒙Next 【设备信息】Mate60
【API版本】Api13
【DevEco Studio版本】5.0.7.200
【问题描述】
Image 中图片超出指定高度 想要截取上面部分,这么做?
3 回复
在父组件上添加
.clip(true)
更多关于Image 中图片超出指定高度 截取上面部分 的问题 - HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
参考demo
//比例宽度填满 高度自适应且超出指定高度裁剪
@Entry
@Component
struct Page {
build() {
Column({ space: 20 }) {
Scroll() {
Image($r('app.media.startIcon'))
.objectFit(ImageFit.Cover) //按比例缩放且不小于边界
}
.width('100%')
.height(200) //需要设置的图片高度
.scrollBar(BarState.Off) // 滚动条常驻显示
.enabled(false) //禁用滑动
}
.width("100%")
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
在HarmonyOS鸿蒙Next中,如果Image组件中的图片超出指定高度并需要截取上面部分,可以使用clip
属性。clip
属性允许你对图片进行裁剪,以显示指定区域。具体实现可以通过设置clip
的Rect
参数来定义裁剪区域。例如,使用Rect(0, 0, width, height)
,其中width
和height
分别为图片的宽度和指定高度,这样可以确保只显示图片的上半部分。此外,还可以结合scaleType
属性来控制图片的缩放方式,确保裁剪效果符合预期。