刚接触HarmonyOS ArkUI开发的时候，对着官方文档一头雾水，折腾半天才摸清楚最基础的规则。把踩过坑整理出来的入门笔记分享给大家，零基础看完就能上手写出第一个简单布局👇
一、先记住三个核心标识，少一个代码都跑不起来
写ArkUI声明式代码，开头必须有这三个核心标识，直接划重点：

@Entry：页面入口标记，相当于C语言里的main函数，加了这个注解的页面才能独立运行
@Component：组件标记，只有加了这个注解，自定义结构体才能用来渲染界面
build()：构建UI的固定方法，所有布局代码必须放在这里才会生效

一个最基础的代码骨架，刚入门照着套就行：
@Entry
@Component
struct MyFirstLayout {
  build() {
    // 布局代码写在这里
  }
}

二、第一个常用布局：Column 垂直布局，从上往下排内容
只要内容是从上往下排列的（比如登录页、个人资料页），直接用Column就对了，系统会自动帮你把所有子元素按顺序从上到下排列。
常用属性+简单登录示例
做了一个超简单的登录框示例，代码如下：
Column({ space: 20 }) {
  Text("用户登录")
    .fontSize(28)
    .fontWeight(FontWeight.Bold)

  TextInput({ placeholder: "请输入账号" })
    .width("80%")
    .height(45)

  TextInput({ placeholder: "请输入密码" })
    .width("80%")
    .height(45)
    .type(InputType.Password)

  Button("登录")
    .width("80%")
    .height(45)
    .backgroundColor("#007DFF")

}
.width('100%')
.height('100%')
.backgroundColor("#F5F5F5")
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)

核心属性记三点就够用：

space：统一设置所有子元素之间的间距，不用一个个给元素加外边距，省事很多
justifyContent：控制垂直方向（排列主轴）对齐：靠顶用FlexAlign.Start，居中用FlexAlign.Center，靠底用FlexAlign.End
alignItems：控制水平方向（交叉轴）对齐：靠左用HorizontalAlign.Start，居中用HorizontalAlign.Center，靠右用HorizontalAlign.End

三、第二个常用布局：Row 水平布局，从左往右排内容
Row是水平排列，做顶部导航、功能按钮组、底部菜单这些场景直接用，所有子元素会自动从左往右排列。
属性逻辑和Column完全一致，只是方向调换：space还是设置横向间距，justifyContent控制水平方向对齐，alignItems控制垂直方向对齐。
拿顶部导航栏举例子，代码非常简单：
@Entry
@Component
struct TopNavDemo {
  build() {
    Column() {
      // 顶部导航用Row实现
      Row() {
        Image("https://example.com/back.png")
          .width(24)
          .height(24)
        Text("消息中心")
          .fontSize(20)
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
        Text("新建")
          .fontSize(16)
          .fontColor("#007DFF")
      }
      .width('100%')
      .height(56)
      .padding({ left: 12, right: 12 })
      .backgroundColor("#FFFFFF")
      .alignItems(VerticalAlign.Center)

      // 下方消息列表区域留白
      Column()
        .width('100%')
        .flexGrow(1)
        .backgroundColor("#F5F5F5")

    }
    .width('100%')
    .height('100%')
  }
}

💡 新手踩坑提醒：这个例子里用layoutWeight(1)让标题自动占满中间空隙，不用手动算宽度，比一个个调百分比方便太多。
基础布局快速对比表

以下是我做的一些作业

基础变量与布局对齐 这是ArkTS基础语法示例，

演示成员变量定义和Column容器布局属性：

1. 变量定义：在struct Index结构体中，定义了4个成员变量，分别存储学生姓名、班级、入学年份、学校名称，对应不同的数据类型（字符串String/数值number）。

2. 布局结构：用Column（垂直列容器）包裹4个文本，space:20设置元素间间距为20dp。 3. 文本展示：通过模板字符串${}把成员变量拼接进文本内容，同时分别设置每个文本的字号和不同字体颜色，对应手机预览中看到的不同颜色文字效果。

4. 容器配置：两张示例的区别是对齐属性：

• 第一张仅设置justifyContent(FlexAlign.Center)，让内容整体在垂直方向居中，水平默认左对齐 • 第二张新增alignItems(HorizontalAlign.End)，让所有内容在水平方向靠右对齐，和预览效果对应
同时设置了容器占满全屏、背景浅灰色。

Row（行）布局按钮组 这是演示垂直布局嵌套水平布局，做学生管理系统个人中心页面：

1. 整体结构：外层用Column做垂直容器，设置间距space:50，同时让整体占满全屏、内容在水平+垂直都居中，背景为白色。

2. 页面内容： • 先添加标题文本和欢迎说明文本，分别设置字号，标题设置加粗。

• 每一行功能按钮用Row（水平行容器）包裹，space:30设置两个按钮间的水平间距，每个按钮统一设置宽高、浅蓝色背景，实现整齐排列的功能按钮，对应预览的效果。