鸿蒙Next中view凸起效果如何实现

在鸿蒙Next中，如何实现View的凸起效果？比如让某个按钮或布局看起来有立体感，是否可以通过设置阴影、边框或自定义绘制来实现？具体的API或代码示例是什么？

2 回复

鸿蒙Next里想给View“隆胸”？用elevation属性就行！设置阴影高度，View立马挺起来，自带3D立体感。代码示例：view.elevation = 10f 记得搭配背景色效果更佳，不然可能“平胸”变“透明”😂

更多关于鸿蒙Next中view凸起效果如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中实现View的凸起效果，可以通过以下步骤实现：

  1. 使用背景阴影：通过background属性设置阴影效果。
  2. 自定义绘制：使用Canvas绘制凸起效果。

方法一：使用背景阴影（推荐）

在XML布局中为View设置阴影背景：

<View
    ohos:height="100vp"
    ohos:width="100vp"
    ohos:background="$graphic:shadow_background"/>

创建shadow_background.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid ohos:color="#FFFFFF"/>
    <corners ohos:radius="10vp"/>
    <shadow
        ohos:shadow_radius="10vp"
        ohos:shadow_color="#80000000"
        ohos:shadow_offset_x="2vp"
        ohos:shadow_offset_y="4vp"/>
</shape>

方法二：自定义绘制

创建自定义组件，重写onDraw方法：

public class RaisedView extends Component {
    public RaisedView(Context context) {
        super(context);
    }

    @Override
    public void onDraw(Canvas canvas) {
        // 绘制阴影
        Paint shadowPaint = new Paint();
        shadowPaint.setColor(new Color(0x80000000));
        shadowPaint.setShadowRadius(10, 0, 0); // 阴影半径
        canvas.drawRect(0, 0, getWidth(), getHeight(), shadowPaint);
        
        // 绘制前景
        Paint foregroundPaint = new Paint();
        foregroundPaint.setColor(Color.WHITE);
        canvas.drawRect(5, 5, getWidth()-5, getHeight()-5, foregroundPaint);
    }
}

参数说明：

  • shadow_radius：阴影模糊半径
  • shadow_color：阴影颜色（建议使用半透明）
  • shadow_offset_x/y：阴影偏移量

注意事项：

  1. 确保View有明确的宽高尺寸
  2. 阴影颜色建议使用半透明值
  3. 可通过调整阴影参数控制凸起程度

这两种方法都能实现凸起效果，推荐使用XML方式，性能更好且易于维护。

回到顶部