HarmonyOS 鸿蒙Next 【ArkUI】关于shadow的问题

HarmonyOS 鸿蒙Next 【ArkUI】关于shadow的问题

代码：

Image($r('app.media.back_ceshi'))
  .width('92%')
  .height(150)
  .margin({left:"4%",top:30,bottom:30})
  .border({radius:15})
  .shadow({
    radius:20,
    offsetY:25,
    offsetX:25,
    color:"#bfbfbf"
  })

效果如图：

图片

问题：为什么红框圈出来的部分，也就是图片右侧，没有阴影效果呢？感觉就是直接被截掉了一样，求助


更多关于HarmonyOS 鸿蒙Next 【ArkUI】关于shadow的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

ArkUI的padding会把阴影遮住

更多关于HarmonyOS 鸿蒙Next 【ArkUI】关于shadow的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


代码没问题,是不是你布局上的问题! 给个 width(‘100%’)

cke_820.png

cke_132.png ```

讲道理应该就是你这样的结果……但是我也不知道为啥我这里就出不来。。。

你Image的上层容器类没有100%的宽度。你检查一下上面几层的宽度。实在看不出问题，上面的包装容器全部加上背景色。

在HarmonyOS（鸿蒙）中，ArkUI框架提供了shadow属性，用于为组件添加阴影效果。shadow属性可以设置阴影的颜色、模糊半径、偏移量等参数。具体来说，shadow属性的语法如下：

shadow?: {
  color?: ResourceColor, // 阴影颜色
  radius?: number | string, // 模糊半径
  offsetX?: number | string, // 水平偏移量
  offsetY?: number | string // 垂直偏移量
}

其中：

  • color：定义阴影的颜色，类型为ResourceColor，可以是颜色值或资源引用。
  • radius：定义阴影的模糊半径，值越大，阴影越模糊。
  • offsetX：定义阴影在水平方向上的偏移量，正值向右偏移，负值向左偏移。
  • offsetY：定义阴影在垂直方向上的偏移量，正值向下偏移，负值向上偏移。

示例代码：

Text('Hello HarmonyOS')
  .shadow({
    color: Color.Black,
    radius: 10,
    offsetX: 5,
    offsetY: 5
  })

这段代码为Text组件添加了一个黑色的阴影，模糊半径为10，水平偏移量为5，垂直偏移量为5。

需要注意的是，shadow属性适用于支持阴影效果的组件，如Text、Button等。不同的组件可能对阴影效果的支持程度有所不同。

回到顶部