HarmonyOS鸿蒙Next中给组件设置环形阴影

HarmonyOS鸿蒙Next中给组件设置环形阴影 例子: Column() { }
.backgroundColor(Color.White)
.width(60)
.height(60)
.borderRadius(30)

需要给Column组件设置环形的阴影（弧度设置范围:0 ~ 360）。

麻烦帮忙提供一下Demo，谢谢

3 回复

可以使用shadow,参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-image-effect-V5#shadow

参考demo

@Entry
@Component
struct Page {
  @State myBorderWidth: number = 20
  build() {
    Column() {
      Row()
        .border({
          width: this.myBorderWidth,
          radius: '50%',
          color: '#FFE4B5'
        })
        .width(100 + this.myBorderWidth * 2)
        .height(100 + this.myBorderWidth * 2)
        .borderRadius('50%')
        .margin(80)
      // .shadow({radius:50,color:'red',type:ShadowType.BLUR})
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
  }
}

，这里可以将barHeight设置为0，自定义tabbar样式，这里可以自定义背景图片

自定义demo参考：

@Entry
@Component
struct Drag2 {
  @State tabArray: Array<number> = [0, 1, 2]
  @State focusIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder
  myTabBar() {
    Row(){
      Row(){
        ForEach(this.tabArray, (item: number, index) => {
          Column(){
            Image($r('app.media.app_icon')).width('20').padding(2)
            Text('测试')
              .fontSize(14)
              .fontColor(this.focusIndex === index ? '#4862ba' : '#333333')
          }
          .onClick(() => {
            this.controller.changeIndex(index)
            this.focusIndex = index
          })
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .width(50)
          .height(50)
        })
      }
      .height(50)
      .width('90%')
      .justifyContent(FlexAlign.SpaceAround)
      .backgroundColor('white')
      .borderRadius(25)
    }
    .justifyContent(FlexAlign.Center)
    .height("50")
    .width('100%')
    .margin({ bottom: 50 })
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.BottomStart }) {
        //tabs
        Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
          ForEach(this.tabArray, (item: number, index: number) => {
            TabContent() {
              Text('我是页面 ' + item + " 的内容")
                .height('100%')
                .width('100%')
                .fontSize(30)
            }
            .backgroundColor("#33333333")
          })
        }
        .barHeight(0)
        .animationDuration(200)
        .onChange((index: number) => {
          console.log('foo change')
          this.focusIndex = index
        })
        // 页签
        this.myTabBar()
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中给组件设置环形阴影的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过Graphic模块中的ShadowEffect类来为组件设置环形阴影。具体步骤如下：

  1. 导入相关模块：

    import { ShadowEffect } from '[@ohos](/user/ohos).graphic';

  2. 创建阴影效果： 使用ShadowEffect类创建阴影效果，并设置阴影的颜色、模糊半径、偏移量等属性。

    let shadowEffect = new ShadowEffect();
shadowEffect.color = '#80000000'; // 阴影颜色，带透明度
shadowEffect.blurRadius = 10; // 模糊半径
shadowEffect.offsetX = 0; // X轴偏移量
shadowEffect.offsetY = 0; // Y轴偏移量

  3. 应用阴影效果到组件： 将创建的阴影效果应用到组件的shadow属性上。

    let component = ...; // 获取或创建组件
component.shadow = shadowEffect;

  4. 设置环形效果： 为了使阴影呈现环形效果，可以通过设置组件的borderRadius属性为50%，使其变为圆形。

    component.borderRadius = '50%';

完整示例代码如下：

import { ShadowEffect } from '[@ohos](/user/ohos).graphic';

let shadowEffect = new ShadowEffect();
shadowEffect.color = '#80000000';
shadowEffect.blurRadius = 10;
shadowEffect.offsetX = 0;
shadowEffect.offsetY = 0;

let component = ...; // 获取或创建组件
component.shadow = shadowEffect;
component.borderRadius = '50%';

通过上述步骤，可以在HarmonyOS鸿蒙Next中为组件设置环形阴影。

在HarmonyOS鸿蒙Next中，可以通过Canvas组件和Path类来绘制环形阴影。首先，使用Path类创建一个环形路径，然后通过Canvas的drawPath方法绘制阴影。示例代码如下：

import { Canvas, Path, Paint } from '@ohos.graphics';

let canvas = new Canvas();
let path = new Path();
path.addCircle(100, 100, 50); // 创建一个半径为50的圆
let paint = new Paint();
paint.setShadow(10, 10, 5, '#888888'); // 设置阴影偏移和模糊半径
canvas.drawPath(path, paint);

此代码在(100,100)位置绘制一个半径为50的圆，并为其添加阴影效果。

回到顶部