@Entry
@Component
struct StackUp {
  build() {
    Column({ space: 50 }) {  //最外层的垂直布局容器，子元素从上到下排列，且相邻元素之间保持 50vp 的间距。
      Text('这是我的个人主页')
        .fontSize(35)
        .fontWeight(FontWeight.Bolder)
      Row({ space: 25 }) {  //水平布局容器，内部元素横向排列，间距为 25vp。
        Stack() {  //堆叠容器。它的特性是子组件按照代码顺序依次入栈，后写的组件会覆盖在前一个组件之上。
          Text()
            .width(180)
            .height(180)
            .backgroundColor(0x9ff7d7)
            .borderRadius(30)
          Text('你好')
            .fontSize(40)
            .fontColor(Color.Red)
            .width(120)
            .height(120)
            .backgroundColor(0xfad344)
            .borderRadius(30)
            .padding({ left: 15, right: 0, top: 0, bottom: 0 })
        }
        .height(200)
        .width('50%')

        Text('欢迎来到鸿蒙开发')
          .fontSize(35)
          .fontWeight(FontWeight.Bolder)
          .height(200)
          .width('45%')
          .fontColor(Color.White)
      }
      .height(300)
      .width('100%')
      .backgroundColor(0x000000)
      .padding(20)
    }
    .justifyContent(FlexAlign.Center)  //主轴（垂直方向）居中对齐，使内容在屏幕上下居中。
    .alignItems(HorizontalAlign.Center)  //交叉轴（水平方向）居中对齐，使内容在屏幕左右居中。
    .width('100%')
    .height('100%')
  }
}

总结：这段代码是一个非常经典的视觉排版示例。它利用外层 Column 实现了页面的绝对居中，用黑色的 Row 划分出了左右分栏结构，并巧妙地使用了 Stack 容器将两个不同颜色、尺寸的色块和文字叠加在一起，形成了一种类似卡片或头像徽章的层次感效果。

@Entry
@Component
struct flex{
  build() {
    Column({space:30}){  //最外层的垂直布局容器，内部子元素从上到下排列，且相邻元素之间自动保持 30vp 的间距。
      Text("功能中心")
        .fontSize(28)
        .fontWeight(FontWeight.Bolder)
        .width('100%')
        .textAlign(TextAlign.Center)
      Flex({wrap:FlexWrap. Wrap}){  //弹性布局容器。它的核心特性是当一行放不下所有子组件时，会自动进行换行处理。这里非常适合做宫格菜单。
        Button("课程学习").width(140).height(60).fontSize(20).margin(10)
        Button("实训作业").width(140).height(60).fontSize(20).margin(10)
        Button("资料下载").width(140).height(60).fontSize(20).margin(10)
        Button("在线答疑").width(140).height(60).fontSize(20).margin(10)
//每个按钮宽 140vp，高 60vp，并且四周留有 10vp 的外边距（margin）。当屏幕宽度变窄时，这些按钮会自动折行显示
      }
      .width('100%')
      .padding(15)
      Row() { //水平布局容器。
        Column() {  //垂直布局容器，将“开始”和“学习”两个白色大字上下排列。
          Text('开始').fontSize(50).fontColor(Color.White)
          Text('学习').fontSize(50).fontColor(Color.White)
        }

        Stack() {  //将内层的黄底红字作为一个整体，叠加在一个 170x170 的浅绿色圆角矩形之上。这种双层 Stack 的设计形成了一个类似“大底座上放着小铭牌”的视觉层次感。
          Stack(){  //包含一个写着“vip”的红色文字，外部包裹了一个 110x110 的黄色圆角矩形底板。
            Text('vip').fontSize(60).fontColor(Color.Red)
          }
          .width(110)
          .height(110)
          .backgroundColor('#ffd300')
          .borderRadius(32)
        }
        .width(170)
        .height(170)
        .backgroundColor('#86f8c9')
        .borderRadius(36)
      }
      .width('100%')
      .height(260)
      .backgroundColor(Color.Red)
      .margin({top:50})
      .justifyContent(FlexAlign.SpaceAround) //主轴（水平方向）均匀分布，使得左右两侧的内容平分空间，且边缘留有相等的空白。
      .alignItems(VerticalAlign.Center)  //交叉轴（垂直方向）居中对齐。
    }
  }
}

总结：这段代码是一个非常实用的业务页面雏形。上半部分利用 Flex 容器的自动换行能力，轻松实现了响应式的功能菜单；下半部分则通过 Row 分配左右空间，并结合 Stack 嵌套做出了具有设计感的 VIP 卡片效果。

@Entry
@Component
struct  RelativeDemo{
  build() {
    RelativeContainer() {  //最外层的相对布局容器。它的核心特性是子组件不按照默认的堆叠排列，而是根据各自设置的 .alignRules() 来确定在页面中的绝对或相对位置。
      Text('相对布局页面设计')
        .fontSize(40)
        .fontWeight(FontWeight.Bolder)
        .id('title') //关键属性。在相对布局中，每个需要被其他组件引用的子组件都必须有唯一的 ID。
        .alignRules({  //设置了垂直方向（top）和水平方向（left）都锚定'__container__'（即 RelativeContainer 父容器本身），并对齐到左上角。
          top: { anchor: '_container__', align: VerticalAlign.Top },
          left: { anchor: '_container__', 'align': HorizontalAlign.Start }
        })
        .margin(15)
        .backgroundColor(Color.Red)
      Button('基础按钮')
        .width(100)
        .height(40)
        .id('buttonid')
        .alignRules({
          top: { anchor: 'title', align: VerticalAlign.Bottom },
          middle: { anchor: 'title', align: HorizontalAlign.Center }
        })
        .margin(20)

//锚点：以 'title' 为基准。
对齐规则：垂直方向的顶部（top）紧贴 title 的底部（Bottom）；水平方向自身中心（middle）与 title 的中心（Center）对齐。
效果：这个按钮完美地悬挂在标题的正下方，且水平居中。

      Text('这个组件依赖于button')
        .fontSize(26)
        .fontColor(Color.Red)
        .id('textid')
        .alignRules({
          top:{anchor:'buttonid',align:VerticalAlign.Bottom},
          middle:{anchor:'buttonid',align:HorizontalAlign.Center}
        })
        .margin({top:30})

//锚点：以 'buttonid' 为基准。
对齐规则：位于按钮的正下方，且水平居中对齐。
效果：通过 .margin({top:30}) 额外增加了 30vp 的间距，使其与上方按钮拉开距离。

      Button('基础按钮1')
        . width(150)
        . height(80)
        . fontSize(25)
        . id('buttonid1')
        . alignRules({
          top:{anchor:'textid',align:VerticalAlign.Bottom},
          right:{anchor:'textid',align:HorizontalAlign.Center}
        })
        . margin(20)

//锚点：以 'textid' 为基准。
对齐规则：位于提示文本的正下方，但其水平方向的右边缘（right）对齐到了提示文本的水平中心点（Center）。
效果：这个按钮会向左偏移，呈现出一半在文本左边、一半在文本右边的视觉效果。

      Button('基础按钮2')
        . width(150)
        . height(80)
        . fontSize(25)
        . id('buttonid2')
        . alignRules({
          top:{anchor:'buttonid1',align:VerticalAlign.Top},
          left:{anchor:'buttonid1',align:HorizontalAlign.End}
        })
        . margin({left:40})

//锚点：以 'buttonid1' 为基准。
对齐规则：垂直方向的顶部（Top）与 buttonid1 的顶部平齐；水平方向的左边缘（left）紧贴 buttonid1 的右边缘（End）。
效果：两个按钮在同一水平线上横向并排。配合 .margin({left:40})，两者之间保留了 40vp 的间隔。
      Image($r('app.media.first'))
        .width('97%')
        .id('image1')
        .alignRules({
            top:{anchor:'buttonid1',align:VerticalAlign.Bottom},
            left:{anchor:'buttonid1',align:HorizontalAlign.Start}
        })
        .margin({top:30})

//锚点：同样以 'buttonid1' 为基准。
对齐规于 buttonid1 的正下方，并且左边缘（Start）与 buttonid1 的左边缘对齐。
效果：图片宽度设为 97%，紧挨着按钮1的左下角显示。

    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray)
  }
}

总结：这段代码非常清晰地展示了 RelativeContainer 的核心逻辑——像搭积木一样，通过给组件打上 id 标签，然后让后面的组件去“认领”前面的组件作为参照物，从而构建出极其灵活的复杂界面。