完整可运行代码 + 逐行详细讲解（Button 按钮案例 ButtonDemo1.ets）和ArkTS Stack 基础层叠布局代码完整详解和ArkTS Stack 进阶案例（个人中心 VIP 标签）

完整可运行代码 + 逐行详细讲解（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:"删除后数据无法恢复，是否继续？"
    })
  })

ArkTS Stack 基础层叠布局代码完整详解

一、页面整体概述

页面路径：/pages/StackBase，本案例是Stack 堆叠容器最基础入门示例，核心演示Stack图层叠加特性：底层灰色方块容器 + 上层红色文字居中叠加，页面整体全屏白色，堆叠块自动居中。 信心指数：10 分，全部为鸿蒙 ArkUI 官方标准 Stack 基础语法，无推测内容。

二、头部装饰器与页面结构体

@Entry
@Component
struct StackBase{
  build() {
    Stack(){
      // 底层图层：灰色方块Column
      Column(){}
        .width(220)
        .height(220)
        .backgroundColor(Color.Grey)
      // 上层图层：红色文字标签
      Text('鸿蒙实训海报')
        .fontSize(22)
        .fontColor(0x990000)
        .padding(10)
        .borderRadius(20)
    }
    .width('100%')
    .height('100%')
  }
}

1. @Entry：标记当前结构体是独立页面，系统可直接渲染；
2. @Component：标识自定义 UI 组件，必须实现build()函数绘制界面；
3. build()：页面渲染主函数，所有布局组件全部写在该方法内。

三、核心容器 Stack 完整解析

1. Stack 容器全局样式

Stack(){
  // 子图层
}
.width('100%')
.height('100%')

• .width('100%') .height('100%')：Stack 铺满整个手机屏幕；
• Stack默认所有子组件自动居中叠加，不需要额外设置居中修饰器。

2. Stack 图层渲染核心规则

Stack是层叠布局容器，遵循「先写底层，后写上层」：

1. 先定义的组件：放在图层底部；
2. 后定义的组件：覆盖在图层顶部； 本代码中：

• 第一行Column()灰色方块 = 底层背景块；
• 第二行Text()文字 = 上层悬浮文字，直接叠加在灰色方块正中间。

四、两个子图层逐段拆解

图层 1：底层灰色方块 Column

Column(){}
  .width(220)
  .height(220)
  .backgroundColor(Color.Grey)

• 空Column{}：仅作为纯色背景容器，内部无任何子组件；
• 固定宽高 220vp，正方形灰色色块；
• Color.Grey：系统内置灰色常量作为背景色。

图层 2：上层悬浮文字 Text

Text('鸿蒙实训海报')
  .fontSize(22)
  .fontColor(0x990000)
  .padding(10)
  .borderRadius(20)

1. .fontSize(22)：文字字号 22；
2. .fontColor(0x990000)：十六进制深红色文字；
3. .padding(10)：文字四周留白 10 像素，形成文字底色块；
4. .borderRadius(20)：文字块圆角修饰；
5. 自动居中叠加在灰色方块正中间，和预览效果图完全匹配。

五、页面完整渲染流程

1. 根 Stack 铺满全屏，页面默认白色底色；
2. 渲染第一个子组件：220×220 灰色正方形，自动在屏幕居中；
3. 渲染第二个子组件：红色文字标签，自动叠加在灰色方块正上方；
4. 最终效果：灰色方块居中，方块中间覆盖红色圆角文字「鸿蒙实训海报」。

六、Stack 核心知识点（重点区分 Column/Row）

1. Stack vs Column/Row 本质区别

表格

2. Stack 默认对齐规则

Stack 不设置alignContent时，所有子组件水平 + 垂直完全居中，这是开发中最常用的居中叠加场景（海报文字、图片水印、头像标签、弹窗遮罩）。

3. 拓展：自定义图层对齐（可选）

可以给 Stack 添加alignContent修改子组件叠加位置：

Stack(){
  // 图层内容
}.alignContent(Alignment.TopStart) // 左上对齐
// 可选值：TopStart/Top/TopEnd/Center/BottomStart/Bottom/BottomEnd

七、代码拓展优化建议

1. 替换背景为图片 将底层空 Column 替换为Image($r('app.media.poster'))，实现海报图片 + 文字水印效果；
2. 增加阴影美化 给灰色方块添加.shadow({radius:15,color:Color.Grey})，实现卡片悬浮阴影；
3. 多层叠加练习 在 Stack 内新增多个组件，实现多层图层（背景图→半透明遮罩→标题→按钮）；
4. 绑定点击事件 给 Text 添加.onClick()实现海报点击交互；
5. 动态文字数据 使用@State变量存储海报标题，实现动态修改文字。

八、本页面用到的 ArkUI 组件 & API 汇总

表格

ArkTS Stack 进阶案例（个人中心 VIP 标签）完整代码详解

一、页面整体概述

页面路径：/pages/StackNex，综合练习Column 垂直布局 + Stack 层叠布局，模拟 APP 个人中心页面：

1. 顶部大标题「个人中心主页」；
2. Stack 实现圆形头像底框 + 红色 VIP 角标叠加；
3. 下方两行文字：用户名 + 简介； 页面整体全屏白色，所有内容垂直 + 水平双居中，核心掌握 Stack 图层叠加制作悬浮标签 / 角标。 信心指数：10 分，全部为鸿蒙 ArkUI 标准语法，无推测内容。

二、页面头部装饰器与根容器

@Entry
@Component
struct StackNex{
  build() {
    Column({space:20}){
      // 1.页面标题
      Text('个人中心主页')
        .fontSize(35)
        .fontWeight(FontWeight.Bold)
      // 2.Stack圆形头像+VIP标签叠加
      Stack(){
        Column(){}.width(100).height(100).borderRadius(50)
        Text("VIP")
          .fontSize(14)
          .fontColor(Color.White)
          .backgroundColor(0xff3333)
          .padding(5)
          .borderRadius(7)
      }
      // 3.用户信息文字区
      Column(){
        Text('鸿蒙开发者')
          .fontSize(22)
          .fontWeight(FontWeight.Medium)
        Text('专注鸿蒙开发实训')
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .fontColor(Color.Gray)
      }
    }
    // 根Column全局样式
    .width('100%')
    .height('100%')
    .backgroundColor(0xffffff)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

根容器 Column 全局配置

Column({space:20}){ ... }
.width('100%')
.height('100%')
.backgroundColor(0xffffff)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)

1. Column({space:20})：垂直布局，标题、头像、文字三组内容上下统一间距 20；
2. 宽高 100% 铺满手机屏幕，纯白色背景；
3. .justifyContent(FlexAlign.Center)：垂直居中，所有内容整体在屏幕中间；
4. .alignItems(HorizontalAlign.Center)：水平居中，每一组组件自身横向居中。

三、分模块逐段拆解代码

模块 1：页面主标题

Text('个人中心主页')
  .fontSize(35)
  .fontWeight(FontWeight.Bold)

字号 35、加粗，页面顶部大标题，和下方头像自动间距 20。

模块 2：Stack 层叠容器（核心：圆形头像 + VIP 悬浮标签）

Stack(){
  // 底层：圆形头像底色框
  Column(){}.width(100).height(100).borderRadius(50)
  // 上层：红色VIP标签（自动居中叠加在圆形块正中间）
  Text("VIP")
    .fontSize(14)
    .fontColor(Color.White)
    .backgroundColor(0xff3333)
    .padding(5)
    .borderRadius(7)
}

1. Stack 图层规则

Stack 内先写底层，后写上层，默认全部子组件居中叠加：

1. 底层空 Column：宽 100、高 100，borderRadius(50)，圆角等于宽高一半 → 完美正方形变圆形；
2. 上层 VIP 文字：红色背景、白色文字、圆角，自动覆盖在圆形块正中心，实现预览图红色 VIP 标识效果。

2. VIP 标签样式说明

• .fontColor(Color.White)：文字白色；
• .backgroundColor(0xff3333)：大红色背景；
• .padding(5)：文字四周留白 5，形成红色小方块；
• .borderRadius(7)：标签圆角柔和。

模块 3：用户信息文字区域

Column(){
  Text('鸿蒙开发者')
    .fontSize(22)
    .fontWeight(FontWeight.Medium)
  Text('专注鸿蒙开发实训')
    .fontSize(18)
    .fontWeight(FontWeight.Medium)
    .fontColor(Color.Gray)
}

垂直两行文字：

1. 用户名「鸿蒙开发者」：字号 22、中等字重；
2. 简介「专注鸿蒙开发实训」：字号 18、灰色弱化显示； 继承外层 Column 居中属性，两行文字整体居中。

四、核心知识点详解

1. Stack 层叠布局实战用途

本案例演示最常用场景：头像 + 角标 / VIP 标签，其他场景：

• 图片加水印文字；
• 商品图片加「热销 / 折扣」标签；
• 弹窗遮罩、浮窗按钮。

2. 圆形容器标准写法

.width(100).height(100).borderRadius(50)

宽高数值一致，圆角 = 宽高 ÷ 2，正方形裁切为正圆形。

3. 双居中实现逻辑

根 Column 同时设置两个属性，一键实现全屏居中：

• .justifyContent(FlexAlign.Center)：主轴（垂直）居中；
• .alignItems(HorizontalAlign.Center)：交叉轴（水平）居中； 无需给每个子组件单独设置居中。

4. fontWeight 字重分级

• FontWeight.Bold：粗体（标题）；
• FontWeight.Medium：中等常规字重（正文）；
• FontWeight.Normal：默认常规。

五、页面渲染顺序

1. 全屏纯白色背景；
2. 页面垂直居中从上至下依次排列： ① 加粗大标题「个人中心主页」； ② 100×100 圆形底色块，中间叠加红色 VIP 文字标签； ③ 用户名「鸿蒙开发者」； ④ 灰色简介「专注鸿蒙开发实训」； 所有模块上下间距 20，全部居中对齐。

六、拓展优化建议

1. 替换圆形底框为头像图片 把底层空 Column 替换为Image($r('app.media.head'))，实现真实头像 + VIP 角标；
2. VIP 标签偏移 给 Stack 添加.alignContent(Alignment.TopEnd)，让 VIP 标签跑到圆形右上角，模拟商品角标；
3. 增加阴影 给 Stack 添加.shadow({radius:10,color:Color.Grey})，头像卡片悬浮效果；
4. 响应式数据 用@State isVip:boolean控制 VIP 标签显示 / 隐藏，实现会员动态切换。

七、本页面用到的 ArkUI 组件 & API 汇总

表格