HarmonyOS鸿蒙Next中如何创建不影响组件尺寸的发光和阴影效果

HarmonyOS鸿蒙Next中如何创建不影响组件尺寸的发光和阴影效果 直接使用的话，shadow会被父容器裁剪掉

特别是在边缘位置的按钮


更多关于HarmonyOS鸿蒙Next中如何创建不影响组件尺寸的发光和阴影效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

如果没有设置clip(false),并没有剪掉。

@Entry
@Component
struct Page27 {
    @State isClip: boolean = false;

    build() {
        Column({ space: 0 }) {
            Column({ space: 10 }) {
                // 主页面内容
                Button('clip=' + this.isClip)
                        .type(ButtonType.Capsule)
                        .height(48)
                        .shadow(ShadowStyle.OUTER_FLOATING_MD)
                        .onClick(() => {
                                this.isClip = !this.isClip;
                        })

                Column() {
                        Text('ShadowOptions').fontSize(12)
                }
                .width(100)
                .aspectRatio(1)
                // .margin(10)
                .justifyContent(FlexAlign.Center)
                .backgroundColor('#a8a888')
                .borderRadius(50)
                .shadow({
                        radius: 120,
                        color: Color.Red,
                        type: ShadowType.COLOR
                })

                Column() {
                        Text('ShadowStyle').fontSize(12)
                }
                .width(100)
                .aspectRatio(1)
                // .margin(10)
                .justifyContent(FlexAlign.Center)
                .backgroundColor('#a8a888')
                .borderRadius(50)
                .shadow(ShadowStyle.OUTER_FLOATING_MD)

            }
            .border({ width: 1, color: Color.Red, style: BorderStyle.Solid })
            .backgroundColor(Color.White)
            .clip(this.isClip)

        }.width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
    }
}

图片

更多关于HarmonyOS鸿蒙Next中如何创建不影响组件尺寸的发光和阴影效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


clip

clip(value: boolean): T

是否对子组件超出当前组件范围外的区域进行裁剪。不设置该接口时，默认不对子组件超出当前组件范围外的区域进行裁剪。

系统能力： SystemCapability.ArkUI.ArkUI.Full

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

参数名 类型 必填 说明
value boolean 是 设置子组件是否按照当前组件边缘轮廓进行裁剪。
true表示子组件按照当前组件边缘轮廓进行裁剪，false表示不对子组件进行裁剪。
说明： 设置为true后，子组件超出当前组件范围外的区域将不响应绑定的手势事件。

返回值：

展开

类型 说明
T 返回当前组件。

详见开发文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sharp-clipping

学习了

学习一下

学习了，

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

让发光／阴影元素脱离父容器的裁剪边界，通过绝对定位或 overlay 实现，

在HarmonyOS NEXT中，使用overlay组件叠加一个透明形状并施加.blur()模糊可模拟发光，叠加半透明黑色渐变层可模拟阴影。因overlay为独立层，不改变原始组件尺寸布局。亦可使用effect({ shadow: { radius, color, offsetX, offsetY, spread:0 } })，但需验证版本兼容性，overlay方案更可靠。

在 HarmonyOS Next 中，使用 .shadow() 添加阴影时，阴影绘制在组件边界之外，不会影响组件自身的测量尺寸，但默认会被父容器的裁剪区域裁掉，尤其在靠近边缘的按钮上。
解决裁剪问题只需关闭父容器或层叠容器的裁剪：对父组件设置 .clip(false) 和 .overflow(Overflow.Visible)，阴影即可完整显示。
如果还需要发光这类更复杂的效果且不希望占用布局空间，可以将发光层放在 Stack 中，使用绝对定位 (position: absolute) 并将模糊/发光图形置于目标组件下层，这样发光完全脱离正常流，不影响原有组件尺寸和交互，同时避免裁剪。

回到顶部