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 Entry标记当前组件为页面入口DevEco Studio 可单独预览、路由可访问该页面缺少则无法预览。Component自定义 UI 组件装饰器必须搭配build()函数渲染界面。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)${this.inputText}模板字符串插值语法把状态变量inputText的值嵌入文本交互逻辑 用户在输入框打字 →inputText被更新 → 该 Text 组件自动刷新实时显示输入内容.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输入框绑定状态变量输入框显示的文本来自inputTextplaceholder:请输入任意内容输入框空白时的灰色提示占位文字。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 刷新五、页面运行交互效果页面顶部展示文字「你输入的内容是」下方空白输入框提示「请输入任意内容」在输入框输入文字时上方文本会实时同步更新输入内容删除输入框文字上方文字同步清空页面整体四周留白 30文字和输入框上下间距 20。六、核心知识点State 单向数据流 双向绑定原理单向数据流State变量的值自动流向 UIText、TextInput 读取inputText手动双向绑定通过onChange事件把用户输入反向写回inputText实现输入框和展示文本同步关键特性仅修改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) } }Entry标记为独立页面预览器 / 路由可直接访问Component自定义 UI 组件必须搭配build()渲染页面外层Column页面根布局space:20页面内卡片与页面边缘默认间距.width(100%) .height(100%)铺满手机全屏.padding(15)页面四周留白 15px.justifyContent(FlexAlign.Center)让中间卡片在屏幕垂直居中。二、卡片容器第二层 ColumnColumn({ 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头像 个人信息水平布局RowRow({ 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 })Row({space:15})水平布局头像和文字中间间距 15px圆形 Image 头像width/height80正方形图片borderRadius(40)圆角等于宽高一半实现正圆形objectFit(ImageFit.Cover)图片铺满圆形区域不变形内层 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)外层 Row水平放置两个按钮按钮间距 15px.justifyContent(FlexAlign.Center)整行按钮在卡片内水平居中按钮通用属性width:140 / height:45固定按钮尺寸borderRadius(8)按钮圆角 8蓝色背景、白色文字。六、页面运行效果全屏白色背景浅灰色圆角卡片居中显示卡片顶部居中加粗标题「个人信息中心」中间左侧圆形头像右侧两行个人文字底部居中并排两个蓝色圆角按钮编辑资料、查看详情页面四周、卡片内部、组件之间均有规范留白视觉分层清晰。七、核心布局知识点总结Column 垂直布局上下排列组件用于页面整体、卡片整体、多行文字Row 水平布局左右排列组件用于头像 文字、并排按钮圆角实现技巧正方形图片borderRadius宽/2得到圆形按钮 / 卡片直接设置固定圆角内外边距区分.padding()内边距组件内部留白.margin()外边距组件外部与其他元素距离居中方案justifyContent(FlexAlign.Center)控制主轴居中。