鸿蒙开发实战：打造高颜值毛玻璃效果按钮

在鸿蒙（HarmonyOS）应用开发中，美观的 UI 设计能极大提升用户体验，毛玻璃（磨砂玻璃）效果作为经典的视觉设计风格，常被用于按钮、卡片等组件，营造出轻盈、通透的视觉层次。本文将手把手教你实现一款基于 ArkTS 的毛玻璃效果按钮，适配鸿蒙应用开发场景。

一、效果预览

最终实现的毛玻璃按钮具备以下特性：

• 磨砂模糊的半透明背景
• 圆润的边角设计
• 细腻的阴影效果
• 白色系的视觉基调（文字、背景、阴影均为白色系）

二、核心技术点

1. Stack 堆叠容器：实现背景与文字的层叠布局
2. Rect 绘制：构建按钮的毛玻璃背景
3. 模糊（blur） ：实现毛玻璃核心的磨砂效果
4. 透明度（opacity） ：控制背景通透度
5. 阴影（shadow） ：增强按钮的视觉层次感
6. 圆角与裁剪：保证按钮的圆润视觉效果

三、完整代码实现

@Entry
@Component
struct FrostedGlassButton {
  build() {
    Column() {
      // 毛玻璃按钮核心实现
      Stack() {
        // 毛玻璃背景层
        Rect()
          .width(149)
          .height(49)
          .fill(Color.White) // 背景填充白色
          .antiAlias(true) // 抗锯齿
          .blur(20) // 模糊半径，值越大磨砂效果越明显
          .opacity(0.3) // 背景透明度，0.3保证通透感
          .borderRadius(25) // 圆角

        // 按钮文字层
        Text('离线下载') // 替换为实际业务文字
          .fontSize(16)
          .fontColor(Color.White) // 文字白色
          .margin({ left: 5 });
      }
      .borderRadius(25) // 整体圆角
      .clip(true) // 裁剪超出圆角的内容
      // 白色系阴影，offsetY控制阴影偏移，radius控制阴影范围
      .shadow({ radius: 5, color: Color.White, offsetY: 1 })
      .margin({ top: 50 }) // 页面布局间距，可根据需求调整
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Black) // 黑色背景更凸显毛玻璃效果，可替换为业务背景
  }
}

四、代码解析

1. 布局容器选择

使用Stack堆叠容器作为按钮的基础容器，能够将背景（Rect）和文字（Text）层叠显示，是实现复合视觉效果的最佳选择。

2. 毛玻璃背景实现

• fill(Color.White)：将背景填充色设置为白色，作为毛玻璃的基底色
• blur(20)：核心的模糊属性，数值越大，磨砂效果越强烈（建议取值 10-30）
• opacity(0.3)：降低背景不透明度，实现 “玻璃” 的通透感，配合底层背景可呈现不同的视觉效果
• antiAlias(true)：开启抗锯齿，让圆角和边缘更顺滑

3. 文字样式

• fontColor(Color.White)：文字设置为纯白色，保证在半透明背景上的可读性
• fontSize(16)：适中的文字大小，兼顾视觉效果和可读性
• margin({ left: 5 })：文字与左侧的小间距，优化视觉居中效果

4. 整体样式优化

• borderRadius(25)：按钮高度为 49，圆角 25 接近圆形，打造圆润的视觉效果
• clip(true)：裁剪超出圆角的内容，避免模糊背景溢出圆角
• shadow({ radius: 5, color: Color.White, offsetY: 1 })：白色浅阴影，增强按钮的立体感，offsetY 控制阴影向下偏移 1px，营造轻微的悬浮感

五、个性化调整建议

1. 模糊程度：调整blur()的数值（如 10-30），数值越大磨砂效果越明显
2. 透明度：修改opacity()的数值（如 0.2-0.5），数值越小背景越通透
3. 尺寸适配：将宽度和高度改为百分比（如width('80%')），适配不同屏幕尺寸
4. 交互效果：添加点击态，结合stateStyles实现按下时的样式变化：