HarmonyOS鸿蒙Next中给控件设置阴影时如何只显示左右的阴影，不显示上下的阴影

HarmonyOS鸿蒙Next中给控件设置阴影时如何只显示左右的阴影，不显示上下的阴影 给控件设置阴影时如何只显示左右的阴影，不显示上下的阴影

3 回复

目前给控件设置阴影位置是通过shadow属性的offsetX和offsetY偏移量来实现的，目前只能只能设置一次，不能达到你想要的效果，我试下了如果想达到这个效果，只能使用stack布局放两个，可以看下demo:

@Entry
@Component
struct ShadowOptionDemo {
  build() {
    Row() {
      Column() {
        Stack({ alignContent: Alignment.Center }){
          Column() {
            Text('shadowOption').fontSize(12)
          }
          .width(100)
          .aspectRatio(1)
          .margin(10)
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#a8a888')
          .borderRadius(20)
          .shadow({ radius: 10, color: Color.Gray, offsetX: 20, offsetY: 0 })
          Column() {
            Text('shadowOption').fontSize(12)
          }
          .width(100)
          .aspectRatio(1)
          .margin(10)
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#a8a888')
          .borderRadius(20)
          .shadow({ radius: 10, color: Color.Gray, offsetX: -20, offsetY: 0 })
        }
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中给控件设置阴影时如何只显示左右的阴影，不显示上下的阴影的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，给控件设置阴影时，可以通过Shadow组件来实现只显示左右阴影而不显示上下阴影的效果。具体步骤如下：

  1. 使用Shadow组件定义阴影效果，设置offsetX属性来控制水平方向的阴影偏移，offsetY属性设置为0以避免垂直方向的阴影。
  2. 通过blurRadius属性调整阴影的模糊程度。
  3. 使用color属性设置阴影的颜色。

代码示例：

import { Shadow, Text } from '@ohos.arkui';

@Entry
@Component
struct ShadowExample {
  build() {
    Column() {
      Text('左右阴影')
        .shadow({
          offsetX: 10, // 水平偏移
          offsetY: 0, // 垂直偏移
          blurRadius: 10, // 模糊半径
          color: Color.Black // 阴影颜色
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

在这个示例中，offsetX设置为10，表示水平方向的阴影偏移，offsetY设置为0，表示垂直方向没有阴影偏移，从而实现只显示左右阴影的效果。

在HarmonyOS鸿蒙Next中，可以通过ShadowEffect类为控件设置阴影效果。要实现只显示左右阴影而不显示上下阴影，可以自定义阴影的偏移量和模糊半径。具体步骤如下：

  1. 创建ShadowEffect对象，设置阴影颜色、模糊半径和偏移量。
  2. 通过setShadowEffect方法将阴影效果应用到控件上。
  3. 调整偏移量，使阴影仅在水平方向（左右）显示。

示例代码：

ShadowEffect shadowEffect = new ShadowEffect();
shadowEffect.setColor(Color.GRAY); // 设置阴影颜色
shadowEffect.setBlurRadius(10); // 设置模糊半径
shadowEffect.setOffsetX(10); // 设置水平偏移量
shadowEffect.setOffsetY(0); // 设置垂直偏移量为0，去除上下阴影

component.setShadowEffect(shadowEffect); // 应用阴影效果

通过调整setOffsetX和setOffsetY的值，可以控制阴影的显示方向。

回到顶部