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

在鸿蒙Next开发中，我想实现一个Column组件的凸起效果，类似卡片悬浮的立体感。请问应该通过修改阴影参数、叠加图层还是使用自定义组件来实现？有没有具体的代码示例可以参考？目前尝试了elevation属性但效果不明显，是否有其他推荐的实现方案？

2 回复

鸿蒙Next中实现Column凸起效果，可以用elevation属性设置阴影，搭配background设置圆角背景，再结合clip裁剪避免阴影溢出。代码示例：

Column() {
  // 内容
}
.elevation({
  radius: 10, // 阴影半径
  type: ShadowType.OUTER // 外阴影
})
.background(Color.White)
.borderRadius(16)
.clip(true)

简单说就是：阴影+圆角=立体感！

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


在鸿蒙Next中实现Column的凸起效果，可以通过组合使用布局、阴影和圆角来实现。以下是一个示例代码：

import { Column, Stack, Text } from '@kit.ArkUI';

@Entry
@Component
struct RaisedColumnExample {
  build() {
    Stack({ alignContent: Alignment.Top }) {
      Column() {
        Text('凸起内容')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
      }
      .width('90%')
      .height(100)
      .backgroundColor('#FFFFFF')
      .borderRadius(16)
      .shadow({
        radius: 12,
        color: '#20000000',
        offsetX: 0,
        offsetY: 4
      })
      .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }
}

关键实现要点：

  1. 使用Stack作为底层容器，设置浅色背景突出凸起效果
  2. Column设置：
    • 白色背景（.backgroundColor('#FFFFFF')）
    • 圆角边框（.borderRadius(16)）
    • 阴影效果：
      • radius: 12 - 阴影模糊半径
      • color: '#20000000' - 带透明度的黑色阴影
      • offsetY: 4 - 向下偏移制造凸起感
  3. 通过margin调整位置

可根据需要调整：

  • 阴影参数（radius、offsetY、color透明度）
  • 圆角大小
  • 背景颜色对比度
  • 组件尺寸

这种方法利用视觉差营造出凸起效果，适用于卡片、按钮等需要突出显示的UI元素。

回到顶部