完整代码 + 逐行详细讲解（ArkTS 个人信息表单页面）

一、完整可运行源码

ets

// 页面入口装饰器，代表该页面为独立可预览页面
@Entry
// 自定义组件装饰器
@Component
struct TextinputDemo2{
  build() {
    // 外层垂直布局容器，内部组件上下间距30
    Column({space:30}){
      // 页面标题文本
      Text('完善个人信息')
        .fontSize(30)                          // 字号30
        .fontWeight(FontWeight.Bold)           // 文字加粗
        .margin({bottom:30})                   // 底部外边距30，和下方输入框拉开距离

      // 第一个输入框：姓名
      TextInput({placeholder:"请输入真实姓名"})
        .width(320)                           // 固定宽度320px
        .height(80)                           // 固定高度80px
        .backgroundColor(0xf8f8f8)            // 浅灰白背景色
        .borderRadius(15)                     // 圆角15，柔和边框

      // 第二个输入框：班级
      TextInput({placeholder:"请输入所在班级"})
        .width(320)
        .height(80)
        .backgroundColor(0xf8f8f8)
        .borderRadius(15)

      // 第三个输入框：联系方式
      TextInput({placeholder:"请输入联系方式"})
        .width(320)
        .height(80)
        .backgroundColor(0xf8f8f8)
        .borderRadius(15)
    }
    // 外层Column铺满手机全屏
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)          // 垂直方向：整体内容居中
    .alignItems(HorizontalAlign.Center)        // 水平方向：所有子组件居中对齐
  }
}

二、整体功能介绍

这是一个鸿蒙 ArkTS 表单 UI 页面，模拟 APP 里「完善个人信息」填写页：

1. 页面顶部加粗大标题：完善个人信息；
2. 垂直排列 3 个圆角浅色输入框，分别用来填写姓名、班级、联系方式；
3. 所有内容整体在手机屏幕水平 + 垂直双居中，界面干净简约；
4. 输入框自带浅灰色提示文字（placeholder），未输入时做文字引导。

预览效果：页面上下左右留白，标题和三个输入框全部居中摆放，输入框圆角柔和，浅底色区分页面背景。

三、代码分模块深度拆解

1. 基础页面装饰器

ets

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

• @Entry：标记当前结构体是页面入口，DevEco 预览器可直接加载；
• @Component：声明这是自定义 UI 组件，必须搭配build()函数绘制界面；
• build()：页面 UI 渲染核心函数，所有可视化组件全部写在此内部。

2. 外层 Column 全局布局（页面容器）

ets

Column({space:30}){
  // 标题+3个输入框写在这里
}
.width('100%')
.height('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. 标题 Text 组件

ets

Text('完善个人信息')
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  .margin({bottom:30})

• fontSize(30)：设置标题大号字体；
• fontWeight(FontWeight.Bold)：文字加粗，突出页面标题；
• margin({bottom:30})：底部外边距，标题和第一个输入框拉开 30 像素空白，区分层级。

4. TextInput 文本输入框（表单核心组件）

ets

TextInput({placeholder:"请输入真实姓名"})
  .width(320)
  .height(80)
  .backgroundColor(0xf8f8f8)
  .borderRadius(15)

1. placeholder:"提示文字"：输入框空白时显示浅灰色引导文字，用户输入后自动消失；
2. width(320) / height(80)：输入框固定宽高，三个输入框尺寸统一，界面整齐；
3. backgroundColor(0xf8f8f8)：十六进制浅灰白色，区分页面纯白背景；
4. borderRadius(15)：设置圆角，去掉直角生硬感，符合移动端现代 UI 设计。

三个输入框代码结构完全一致，仅placeholder提示文字不同，分别对应：姓名、班级、手机号 / 联系方式。

四、页面布局逻辑梳理

1. 最外层全屏 Column，实现全部内容屏幕居中；
2. 内部垂直排列 4 个元素：标题、姓名输入框、班级输入框、联系方式输入框；
3. 元素之间统一上下间距 30；标题额外底部留白，强化层级；
4. 输入框统一圆角、浅底色、固定尺寸，视觉统一美观。

五、核心学习知识点

1. Column垂直布局 + justifyContent/alignItems 实现页面整体居中；
2. margin外边距：控制组件和其他元素之间的空白；
3. TextInput表单输入框基础用法、placeholder 提示、圆角、背景美化；
4. 固定像素宽高与百分比全屏宽高搭配使用；
5. 基础文字样式：字号、文字加粗。

拓展优化思路（可选补充）

当前代码只有静态 UI，无数据存储，可新增@State变量实现输入内容保存：

ets

@State name:string=""
@State clazz:string=""
@State phone:string=""

TextInput({text:this.name, placeholder:"请输入真实姓名"})
  .onChange(v=>this.name=v)

增加@State响应变量 +onChange监听，就能实时获取用户填写的表单内容