HarmonyOS 鸿蒙Next如何设置Image为圆形

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何设置Image为圆形

width(“13.6%”)
我的宽度是这样的
高度不固定,
如何设置Image为圆形

3 回复

可以参考demo

import display from '[@ohos](/user/ohos).display'


[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page4 {
 [@State](/user/State) imgWidth:number=0

 // 2、获取相关信息,宽高
   aboutToAppear() {
     display.getAllDisplays((err, data) => {
       let screenWidth : number = data[0].width
       this.imgWidth=screenWidth * 0.136
     })
 }

 build() {
   Column({space:20}){
     Column(){
     }
     .width(this.imgWidth)
     .height(this.imgWidth)
     .clip(true)
     .borderRadius(this.imgWidth/2)
     .backgroundImage($r('app.media.app_icon'))
     .backgroundImagePosition(Alignment.Center)
     .border({width:1})
     .backgroundImageSize(ImageSize.Cover)

     Column(){
       Image($r('app.media.app_icon'))
         .width('100%')
         .height('100%')
     }
     .width(this.imgWidth)
     .height(this.imgWidth)
     .clip(true)
     .borderRadius(this.imgWidth/2)
   }

 }
}

更多关于HarmonyOS 鸿蒙Next如何设置Image为圆形的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Image().
width("13.6%").
.borderRadius(this.imageHeight/2)
.onSizeChange((oldSize, newSize) => {
this.imageHeight = newSize.heigh as number
})

在HarmonyOS 鸿蒙Next中,设置Image为圆形通常可以通过自定义布局和样式来实现。具体步骤如下:

  1. 布局文件:在XML布局文件中定义Image组件,并为其设置一个包含圆形剪裁的容器。例如,使用ShapeDrawable或ClipDrawable来定义圆形剪裁。
<Image
    ohos:id="$+id:my_image"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="$graphic:circle_shape"
    ohos:image_src="$media:your_image"
    ohos:scale_mode="aspect_fill"/>

其中,circle_shape是一个在resources/graphic目录下定义的ShapeDrawable资源文件,内容如下:

<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">
    <solid ohos:color="#FFFFFF"/>
</shape>
  1. 代码实现:如果需要在代码中动态设置圆形Image,可以使用Canvas和Paint类来绘制圆形图像。但这通常用于自定义组件,对于普通Image组件,推荐通过布局文件设置。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部