ArkTS 双向绑定输入框代码完整详解和 个人信息卡片代码完整详解（ArkTS）

ArkTS 双向绑定输入框代码完整详解

完整可运行代码

@Entry @Component struct StatesDemo3{ // 响应式状态变量，存储输入框文本 @State inputText:string = "" build() { Column({space:20}){ // 实时展示输入框内容的文本 Text(`你输入的内容是：${this.inputText}`) .fontSize(26) // 单行输入框组件 TextInput({text:this.inputText, placeholder:"请输入任意内容"}) .width('100%') .height(50) .padding({left:20}) // 监听输入变化，更新状态变量 .onChange((value: string) => { this.inputText = value }) } .width('100%') .height('100%') .padding(30) } }

一、顶部装饰器与状态变量解析

@Entry @Component struct StatesDemo3{ @State inputText:string = ""

1. @Entry标记当前组件为页面入口，DevEco Studio 可单独预览、路由可访问该页面，缺少则无法预览。
2. @Component自定义 UI 组件装饰器，必须搭配build()函数渲染界面。
3. @State inputText:string = ""（核心响应式变量）
   • @State：鸿蒙 ArkUI响应式装饰器，被修饰的变量发生修改时，所有引用该变量的 UI 组件会自动刷新；
   • inputText：字符串类型，初始值为空字符串，用来存储用户在输入框中键入的全部内容；
   • 作用：实现数据驱动 UI，输入框和上方 Text 文本共享同一份数据，做到实时同步。

二、根布局 Column 垂直容器

Column({space:20}){ // 子组件：Text、TextInput } .width('100%') .height('100%') .padding(30)

• Column({space:20})：垂直弹性布局，内部两个组件上下排列，组件之间固定间距 20px；
• .width('100%') .height('100%')：布局铺满手机全屏；
• .padding(30)：整体页面四周留白 30px，避免内容贴屏幕边缘。

三、Text 实时展示文本组件

Text(`你输入的内容是：${this.inputText}`) .fontSize(26)

1. `${this.inputText}`：模板字符串插值语法，把状态变量inputText的值嵌入文本；
2. 交互逻辑： 用户在输入框打字 →inputText被更新 → 该 Text 组件自动刷新，实时显示输入内容；
3. .fontSize(26)：设置文字字号 26。

四、TextInput 单行输入框（核心交互组件）

TextInput({text:this.inputText, placeholder:"请输入任意内容"}) .width('100%') .height(50) .padding({left:20}) .onChange((value: string) => { this.inputText = value })

1. 构造参数

• text:this.inputText：输入框绑定状态变量，输入框显示的文本来自inputText；
• placeholder:"请输入任意内容"：输入框空白时的灰色提示占位文字。

2. 样式属性

• .width('100%')：输入框宽度占满父容器；
• .height(50)：输入框高度 50px；
• .padding({left:20})：输入文字距离左侧边框 20px，文字不会紧贴边缘。

3..onChange监听事件（双向绑定核心）

.onChange((value: string) => { this.inputText = value })

• 触发时机：用户每输入 / 删除一个字符就执行一次；
• value：回调参数，代表输入框当前完整文本；
• this.inputText = value：把最新输入内容赋值给响应式变量，完成数据回写；
• 整体形成双向数据绑定闭环：inputText→ 输入框显示文本 / 用户输入 → onChange 更新 inputText → 上方 Text 刷新

五、页面运行交互效果

1. 页面顶部展示文字「你输入的内容是：」，下方空白输入框提示「请输入任意内容」；
2. 在输入框输入文字时，上方文本会实时同步更新输入内容；
3. 删除输入框文字，上方文字同步清空；
4. 页面整体四周留白 30，文字和输入框上下间距 20。

六、核心知识点：@State 单向数据流 + 双向绑定原理

1. 单向数据流：@State变量的值自动流向 UI（Text、TextInput 读取inputText）；
2. 手动双向绑定：通过onChange事件把用户输入反向写回inputText，实现输入框和展示文本同步；
3. 关键特性：仅修改@State修饰的变量，UI 才会自动重绘；普通变量修改不会刷新界面。

StyleDemo1 个人信息卡片代码完整详解（ArkTS）

完整整合可运行代码

@Entry @Component struct StyleDemo1 { build() { // 页面最外层：垂直布局，页面整体留白15 Column({ space: 20 }) { // 卡片容器：浅灰背景、圆角12 Column({ space: 20 }) { // 1. 顶部大标题 Text('个人信息中心') .fontSize(22) .fontWeight(FontWeight.Bold) .width('100%') .textAlign(TextAlign.Center) .margin({ bottom: 20 }) // 底部留白20 // 2. 中间水平布局：头像 + 信息文本 Row({ space: 15 }) { // 左侧圆形头像 Image($r('app.media.startIcon')) .width(80) .height(80) .borderRadius(40) // 宽高一半实现圆形 .objectFit(ImageFit.Cover) // 右侧垂直两行文字 Column({ space: 10 }) { Text('鸿蒙应用开发者：张三') .fontSize(18) Text('计算机应用工程系') .fontSize(18) } } .width('100%') .padding({ left: 10, right: 10 }) // 3. 底部并排按钮（水平布局） Row({ space: 15 }) { Button('编辑资料') .width(140) .height(45) .borderRadius(8) .backgroundColor('#007DFF') .fontColor(Color.White) Button('查看详情') .width(140) .height(45) .borderRadius(8) .backgroundColor('#007DFF') .fontColor(Color.White) } .width('100%') .justifyContent(FlexAlign.Center) } // 卡片样式 .width(340) .padding(20) .backgroundColor('#F5F5F5') // 浅灰色卡片背景 .borderRadius(12) } // 页面全局样式 .width('100%') .height('100%') .padding(15) // 页面整体四周留白15 .justifyContent(FlexAlign.Center) // 卡片在页面垂直居中 } }

一、装饰器与页面根容器解析

@Entry @Component struct StyleDemo1 { build() { // 最外层页面布局 Column({ space: 20 }) { ... } .width('100%') .height('100%') .padding(15) .justifyContent(FlexAlign.Center) } }

1. @Entry：标记为独立页面，预览器 / 路由可直接访问；
2. @Component：自定义 UI 组件，必须搭配build()渲染页面；
3. 外层Column（页面根布局）
   • space:20：页面内卡片与页面边缘默认间距；
   • .width('100%') .height('100%')：铺满手机全屏；
   • .padding(15)：页面四周留白 15px；
   • .justifyContent(FlexAlign.Center)：让中间卡片在屏幕垂直居中。

二、卡片容器（第二层 Column）

Column({ space: 20 }) { // 标题、头像行、按钮行 } .width(340) .padding(20) .backgroundColor('#F5F5F5') .borderRadius(12)

• space:20：卡片内部三大模块（标题、头像区、按钮区）上下间距 20；
• .width(340)：固定卡片宽度；
• .padding(20)：卡片内部四周留白；
• .backgroundColor('#F5F5F5')：卡片浅灰色底色；
• .borderRadius(12)：卡片整体圆角 12。

三、模块 1：顶部标题文本

Text('个人信息中心') .fontSize(22) .fontWeight(FontWeight.Bold) .width('100%') .textAlign(TextAlign.Center) .margin({ bottom: 20 })

• .fontSize(22)：字号 22；
• .fontWeight(FontWeight.Bold)：文字加粗；
• .textAlign(TextAlign.Center)：文字水平居中；
• .margin({ bottom: 20 })：标题底部外边距 20，和下方头像区域拉开距离。

四、模块 2：头像 + 个人信息水平布局（Row）

Row({ space: 15 }) { // 圆形头像 Image($r('app.media.startIcon')) .width(80) .height(80) .borderRadius(40) .objectFit(ImageFit.Cover) // 右侧两行文字 Column({ space: 10 }) { Text('鸿蒙应用开发者：张三').fontSize(18) Text('计算机应用工程系').fontSize(18) } } .width('100%') .padding({ left:10, right:10 })

1. Row({space:15})：水平布局，头像和文字中间间距 15px；
2. 圆形 Image 头像
   • width/height=80：正方形图片；
   • borderRadius(40)：圆角等于宽高一半，实现正圆形；
   • objectFit(ImageFit.Cover)：图片铺满圆形区域，不变形；
3. 内层 Column：垂直排列两行信息文本，行间距 10px，字号 18。

五、模块 3：底部两个并排按钮

Row({ space: 15 }) { Button('编辑资料') .width(140) .height(45) .borderRadius(8) .backgroundColor('#007DFF') .fontColor(Color.White) Button('查看详情') .width(140) .height(45) .borderRadius(8) .backgroundColor('#007DFF') .fontColor(Color.White) } .width('100%') .justifyContent(FlexAlign.Center)

1. 外层 Row：水平放置两个按钮，按钮间距 15px；
2. .justifyContent(FlexAlign.Center)：整行按钮在卡片内水平居中；
3. 按钮通用属性：
   • width:140 / height:45：固定按钮尺寸；
   • borderRadius(8)：按钮圆角 8；
   • 蓝色背景、白色文字。

六、页面运行效果

1. 全屏白色背景，浅灰色圆角卡片居中显示；
2. 卡片顶部居中加粗标题「个人信息中心」；
3. 中间左侧圆形头像，右侧两行个人文字；
4. 底部居中并排两个蓝色圆角按钮：编辑资料、查看详情；
5. 页面四周、卡片内部、组件之间均有规范留白，视觉分层清晰。

七、核心布局知识点总结

1. Column 垂直布局：上下排列组件，用于页面整体、卡片整体、多行文字；
2. Row 水平布局：左右排列组件，用于头像 + 文字、并排按钮；
3. 圆角实现技巧：正方形图片borderRadius=宽/2得到圆形；按钮 / 卡片直接设置固定圆角；
4. 内外边距区分：
   • .padding()：内边距（组件内部留白）；
   • .margin()：外边距（组件外部与其他元素距离）；
5. 居中方案：justifyContent(FlexAlign.Center)控制主轴居中。