完整可运行代码 + 逐行详细讲解（Button 按钮案例 ButtonDemo1.ets）

一、完整源码

ets

@Entry
@Component
struct ButtonDemo1{
  build(){
    // 外层垂直布局容器，内部组件上下间距30
    Column({space:30}){
      // 蓝色主按钮：确认提交
      Button("确认提交")
        .width(300)
        .height(50)
        .backgroundColor(0x007DFF) // 蓝色
        .fontSize(20)
        .borderRadius(18) // 圆角

      // 水平行容器：两个按钮左右并排
      Row(){
        // 灰色按钮：取消操作
        Button("取消操作")
          .width(140)
          .height(50)
          .backgroundColor(0x999999) // 灰色
          .fontSize(20)
          .borderRadius(18)

        // 红色危险按钮：删除数据
        Button("删除数据")
          .width(140)
          .height(50)
          .backgroundColor(0xf53f3f) // 红色
          .fontSize(20)
          .borderRadius(18)
      }
    }
    // 外层容器铺满全屏
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center) // 垂直方向整体居中
    .alignItems(HorizontalAlign.Center) // 水平方向全部居中
  }
}

二、整体功能与页面介绍

这是鸿蒙 ArkTS 基础多风格按钮 UI 演示页面，模拟业务中常见的三种功能按钮：

1. 主操作按钮（蓝色）：「确认提交」，宽度更大，作为页面核心操作；
2. 次要操作按钮（灰色）：「取消操作」，用来返回、放弃操作；
3. 危险操作按钮（红色）：「删除数据」，醒目红色提示该操作存在风险；

布局效果：

• 页面所有按钮整体在手机屏幕水平 + 垂直双居中；
• 上方单独一个蓝色大按钮；
• 下方一行并排摆放灰色取消、红色删除两个小按钮；
• 全部按钮统一圆角设计，视觉柔和，符合移动端 UI 规范。

三、分模块逐段深度讲解

1. 页面基础装饰器

ets

@Entry
@Component
struct ButtonDemo1{
  build(){}
}

• @Entry：标记为独立页面，DevEco 预览器可直接加载预览；
• @Component：声明自定义 UI 组件，所有界面代码写在build()函数内；
• build()：页面渲染入口，所有按钮、布局容器都写在此函数。

2. 外层 Column 全局居中布局

ets

Column({space:30}){
  // 所有按钮写在这里
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)

1. Column({space:30})：垂直布局，上下两组按钮（蓝色按钮 / 下方按钮行）之间间距 30 像素；
2. .width('100%') / .height('100%')：容器铺满整个手机屏幕；
3. .justifyContent(FlexAlign.Center)：垂直居中，所有按钮整体上下居中；
4. .alignItems(HorizontalAlign.Center)：水平居中，蓝色按钮、下方整行按钮全部横向居中。

3. 主按钮：确认提交（蓝色大按钮）

ets

Button("确认提交")
  .width(300)
  .height(50)
  .backgroundColor(0x007DFF)
  .fontSize(20)
  .borderRadius(18)

• Button("文字")：基础按钮组件，括号内为按钮显示文字；
• width(300)：固定宽度 300px，尺寸大于下方两个按钮，突出主操作；
• height(50)：按钮高度统一 50；
• backgroundColor(0x007DFF)：十六进制颜色码，标准业务蓝色，代表正向、确认类操作；
• fontSize(20)：按钮内文字字号；
• borderRadius(18)：圆角修饰，消除直角生硬感。

4. Row 水平容器：取消 + 删除按钮并排

ets

Row(){
  Button("取消操作")...
  Button("删除数据")...
}

Row()是水平布局容器，内部组件从左到右依次排列，实现灰色取消按钮、红色删除按钮并排显示。

（1）取消操作 灰色按钮

ets

Button("取消操作")
  .width(140)
  .height(50)
  .backgroundColor(0x999999)
  .fontSize(20)
  .borderRadius(18)

宽度 140px，灰色背景，用于次要、放弃、返回类操作，视觉权重更低。

（2）删除数据 红色危险按钮

ets

Button("删除数据")
  .width(140)
  .height(50)
  .backgroundColor(0xf53f3f)
  .fontSize(20)
  .borderRadius(18)

红色高对比度背景，用来警示用户：该操作不可逆、存在风险（删除数据、清空内容等）。

四、UI 设计规范知识点（行业通用）

1. 蓝色：主操作、确认、提交、下一步（正向操作）；
2. 灰色：次要操作、取消、返回、关闭；
3. 红色：危险操作、删除、清空、注销；
4. 主按钮尺寸 > 次要按钮，区分操作优先级；
5. 统一圆角，现代 APP 通用柔和视觉风格。

五、拓展补充（增加点击交互）

当前代码只有静态样式，无点击事件，可给 Button 添加.onClick()实现功能：

ets

Button("确认提交")
  .onClick(()=>{
    // 点击后执行提交逻辑、弹窗、页面跳转
  })

示例：给删除按钮加弹窗提示风险

ets

import AlertDialog from '@ohos.promptAction'

Button("删除数据")
  .onClick(()=>{
    AlertDialog.show({
      title:"确认删除",
      message:"删除后数据无法恢复，是否继续？"
    })
  })