HarmonyOS 鸿蒙Next 给Image增加圆角

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

HarmonyOS 鸿蒙Next 给Image增加圆角 标题栏渐变，但是只渐变背景色，不渐变整个控件，标题栏上还有按钮，不能渐变导致标题栏控件也看不见，现在以下面这段代码会导致标题栏头像图片和扫一扫图片默认不展示。

需要图片默认展示，向上滑动后渐变背景颜色

Row() {
  RelativeContainer() {
    Image($r('app.media.home_unlogin'))
      .width('35vp')
      .height('35vp')
      .borderRadius(90)
      .alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top },
        bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
        left: { anchor: "__container__", align: HorizontalAlign.Start }
      })
      .margin({ left: '16vp' })
      .id("row1")

    Image($r('app.media.home_top_scan'))
      .width('35vp')
      .height('35vp')
      .alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top },
        bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
        end: { anchor: "__container__", align: HorizontalAlign.End }
      })
      .margin({ right: '16vp' })
      .id("row2")
      .onClick(() => {
        let options: scanBarcode.ScanOptions = {
          scanTypes: [scanCore.ScanType.ALL],
          enableMultiMode: true,
          enableAlbum: true
        };
        scanBarcode.startScanForResult(context, options)
          .then((result: scanBarcode.ScanResult) => {
            hilog.info(0x0001, '[Scan CPSample]',
              `Succeeded in getting ScanResult by promise with options, result is ${JSON.stringify(result)}`);
          }).catch((error: BusinessError) => {
          hilog.error(0x0001, '[Scan CPSample]',
            `Failed to get ScanResult by promise with options. Code:${error.code}, message: ${error.message}`);
        });
      })

  }
}
.width('100%')
.height('80vp')
.backgroundColor($r('app.color.custom_tab_selected_text_color'))
.padding({ top: this.topRectHeight })
.opacity(this.scrollLength)
.zIndex(100)

更多关于HarmonyOS 鸿蒙Next 给Image增加圆角的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

该问题是因为你控制了整个控件的透明度，只需要将背景色部分单独抽离出来即可。

参考：

Stack(){
  // 背景抽离出来放在后面即可
  Row() {
  }
  .width('100%')
  .height('80vp')
  .backgroundColor($r('app.color.custom_tab_selected_text_color'))
  .padding({ top: this.topRectHeight })
  .opacity(this.scrollLength)
  .zIndex(100)

  RelativeContainer () {
    Image($r('app.media.home_unlogin'))
      .width('35vp')
      .height('35vp')
      .borderRadius(90)
      .alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top },
        bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
        left: { anchor: "__container__", align: HorizontalAlign.Start }
      })
      .margin({ left: '16vp' })
      .id("row1")

    Image($r('app.media.home_top_scan'))
      .width('35vp')
      .height('35vp')
      .alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top },
        bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
        end: { anchor: "__container__", align: HorizontalAlign.End }
      })
      .margin({ right: '16vp' })
      .id("row2")
      .onClick(() => {
        let options: scanBarcode.ScanOptions = {
          scanTypes: [scanCore.ScanType.ALL],
          enableMultiMode: true,
          enableAlbum: true
        };
        // 可调用getContext接口获取当前页面关联的UIAbilityContext
        scanBarcode.startScanForResult(context, options)
          .then((result: scanBarcode.ScanResult) => {
            // 收到扫码结果后返回
            hilog.info(0x0001, '[Scan CPSample]',
              `Succeeded in getting ScanResult by promise with options, result is ${JSON.stringify(result)}`);
          }).catch((error: BusinessError) => {
            hilog.error(0x0001, '[Scan CPSample]',
              `Failed to get ScanResult by promise with options. Code:${error.code}, message: ${error.message}`);
          });
      })
  }
}

更多关于HarmonyOS 鸿蒙Next 给Image增加圆角的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，为Image组件增加圆角效果，可以通过设置Image组件的样式属性来实现。鸿蒙系统提供了丰富的样式和布局能力，允许开发者自定义组件的外观。

要为Image组件增加圆角，你可以使用shape属性配合corner属性进行设置。以下是一个简要的示例代码：

<Image
    ohos:id="$+id:my_image"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:image_src="$media:my_image"
    ohos:shape="rectangle"
    ohos:top_left_corner="16vp"
    ohos:top_right_corner="16vp"
    ohos:bottom_left_corner="16vp"
    ohos:bottom_right_corner="16vp"/>

在上述代码中，ohos:shape="rectangle"指定了形状为矩形，而ohos:top_left_corner、ohos:top_right_corner、ohos:bottom_left_corner和ohos:bottom_right_corner属性分别设置了四个角的圆角大小。这里的16vp表示视口单位（Viewport units），你可以根据需要调整这个值来改变圆角的大小。

确保你的XML布局文件中已经正确引入了鸿蒙系统的命名空间，并且Image组件的ohos:image_src属性指向了一个有效的图片资源。

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

回到顶部