HarmonyOS鸿蒙Next中界面窗体阴影和半透明效果怎么做

在HarmonyOS Next中，实现界面窗体的半透明和阴影效果，主要通过Window的属性和UI组件的样式来完成。

1. 窗体半透明效果

窗体的半透明效果主要通过设置Window的background属性来实现。

• 方法一：在WindowStage中设置 在onWindowStageCreate生命周期中，获取当前窗口并设置其背景。

  import { window } from '@kit.ArkUI';
  
  onWindowStageCreate(windowStage: window.WindowStage) {
    // 获取主窗口
    let mainWindow = windowStage.getMainWindow();
    // 设置窗口背景为半透明黑色 (ARGB: A=0.5, R=0, G=0, B=0)
    // 格式为十六进制：0xAARRGGBB
    mainWindow.setWindowBackgroundColor('#80000000');
    // ... 其他窗口设置和UI加载
  }
  

  • #80000000：80表示透明度（0x80约等于50%），000000表示黑色。你可以根据需要调整ARGB值。

• 方法二：在UI页面根组件设置 你也可以在UI页面的根组件（如Column）上设置背景色，但这通常影响的是组件区域而非整个窗口（除非组件充满窗口）。

  @Entry
  @Component
  struct TransparentPage {
    build() {
      // 在根组件设置半透明背景
      Column() {
        // 页面内容...
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#80000000') // 组件背景半透明
    }
  }
  

2. 窗体阴影效果

阴影效果主要通过UI组件的通用属性 shadow 来添加。这个属性可以应用于大多数容器组件（如Column、Row、Stack、Flex）和基础组件（如Button、Text）。

shadow 属性是一个对象，包含以下参数：

• radius: 阴影模糊半径，值越大阴影越模糊、越柔和。必须设置，否则阴影不显示。
• color: 阴影颜色。默认为黑色。
• offsetX: 阴影在X轴方向的偏移量。正数向右。
• offsetY: 阴影在Y轴方向的偏移量。正数向下。
• fill: （可选）阴影是否填充组件内容区域。默认为false，阴影在组件背景框外显示；设为true时，阴影会填充至组件背景之下（常用于实现“发光”效果）。

示例代码：为一个卡片添加阴影

@Entry
@Component
struct ShadowExample {
  build() {
    Column() {
      // 一个带有阴影和半透明背景的卡片
      Column() {
        Text('HarmonyOS Next')
          .fontSize(20)
          .fontColor(Color.White)
        Text('阴影与半透明示例')
          .fontSize(14)
          .fontColor(Color.White)
          .opacity(0.8)
      }
      .padding(20)
      .width('90%')
      .backgroundColor('#CC333333') // 卡片本身为深色半透明
      .borderRadius(16) // 圆角，阴影会跟随圆角形状
      // 设置阴影
      .shadow({
        radius: 20,        // 模糊半径
        color: '#40000000', // 半透明黑色阴影
        offsetX: 0,
        offsetY: 5        // 阴影向下偏移5vp
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#F5F5F5') // 页面背景色
  }
}

结合使用：半透明窗体与内部组件阴影

一个常见的场景是创建一个半透明的模态窗口（Dialog），其内部内容区域带有阴影以增强层次感。

// 模拟一个模态弹窗
@Entry
@Component
struct ModalDialogExample {
  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 主页面内容（被遮罩）
      Column() {
        Text('主页内容')
      }
      .width('100%')
      .height('100%')

      // 半透明遮罩层
      Column()
        .width('100%')
        .height('100%')
        .backgroundColor('#60000000') // 深色半透明遮罩

      // 弹窗内容（带有阴影）
      Column() {
        Text('弹窗标题')
          .fontSize(18)
          .margin({ bottom: 10 })
        Text('这是一个带有阴影的半透明弹窗示例。')
      }
      .padding(30)
      .width('80%')
      .backgroundColor(Color.White) // 弹窗背景为白色
      .borderRadius(24)
      // 为弹窗添加显著的阴影
      .shadow({
        radius: 35,
        color: '#30000000',
        offsetX: 0,
        offsetY: 10
      })
    }
    .width('100%')
    .height('100%')
  }
}

关键点总结：

1. 窗体半透明：使用window模块的setWindowBackgroundColor方法，或在根组件设置backgroundColor为带透明通道的颜色（格式#AARRGGBB）。
2. 组件阴影：使用组件的.shadow()样式方法，务必设置radius（模糊半径），并可通过offsetX、offsetY控制阴影方向，color控制阴影颜色和透明度。
3. 组合效果：通过Stack布局叠加半透明遮罩层和带有阴影的组件，可以轻松实现模态对话框等高级界面效果。