HarmonyOS 鸿蒙Next如何实现组件的阴影效果

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

HarmonyOS 鸿蒙Next如何实现组件的阴影效果

问题描述：

需要一个阴影的view的示例代码。

Harmonyos Next教程
5 回复

解决方案：

[@Entry](/user/Entry) 
[@Component](/user/Component) 
struct ShadowOptionDemo { 
  build() { 
    Row() { 
      Column() { 

    Column() { 
      Text(<span class="hljs-string"><span class="hljs-string">'shadowOption'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>) 
    } 
    .width(<span class="hljs-number"><span class="hljs-number">100</span></span>) 
    .aspectRatio(<span class="hljs-number"><span class="hljs-number">1</span></span>) 
    .margin(<span class="hljs-number"><span class="hljs-number">10</span></span>) 
    .justifyContent(FlexAlign.Center) 
    .borderRadius(<span class="hljs-number"><span class="hljs-number">50</span></span>) 
    .shadow(ShadowStyle.OUTER_FLOATING_SM) 

    Column() { 
      Text(<span class="hljs-string"><span class="hljs-string">'shadowOption'</span></span>).fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>) 
    } 
    .width(<span class="hljs-number"><span class="hljs-number">100</span></span>) 
    .aspectRatio(<span class="hljs-number"><span class="hljs-number">1</span></span>) 
    .margin(<span class="hljs-number"><span class="hljs-number">10</span></span>) 
    .justifyContent(FlexAlign.Center) 
    .borderRadius(<span class="hljs-number"><span class="hljs-number">50</span></span>) 
    .shadow(ShadowStyle.OUTER_DEFAULT_MD) 
  } 
  .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>) 
  .height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>) 
  .justifyContent(FlexAlign.Center) 
} 
.height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>) 

}
}

请问下如何设置指定位置的阴影呢，比如只设置底部的阴影，我看目前效果是四周都有阴影效果

请问这个解决了吗。我也是这个问题现在

在HarmonyOS鸿蒙Next中，实现组件的阴影效果主要通过使用阴影接口shadow来完成。该接口支持两种类型参数，开发者可配置ShadowOptions来自定义阴影效果。以下是实现组件阴影效果的关键步骤：

  1. 配置ShadowOptions：

    • 使用shadow接口，并传入ShadowOptions对象。
    • 在ShadowOptions中，设置阴影的半径（radius）、颜色（color）、水平偏移量（offsetX）和垂直偏移量（offsetY）。
    • 注意，当radius为0或color的透明度为0时，无阴影效果。

  2. 应用于组件：

    • 将配置好的阴影效果应用于目标组件，如Text、Button等。
    • 可以通过组件的style或直接在代码中设置阴影效果。

  3. 示例代码：

    [@Entry](/user/Entry) [@Component](/user/Component) struct ShadowOptionDemo {
    build() {
        Row() {
            Column() {
                Text('shadowOption').fontSize(12)
                    .width(100).aspectRatio(1).margin(10)
                    .justifyContent(FlexAlign.Center)
                    .backgroundColor(Color.White).borderRadius(20)
                    .shadow({ radius: 10, color: Color.Gray })
            }
        }
    }
}

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

HarmonyOS 鸿蒙Next教程已发布，学习地址：https://www.itying.com/category-93-b0.html

回到顶部