1单层 Column 基础纵向布局

本页面案例基于 ArkTS 实现TextInput 输入框双向数据绑定，核心使用@State装饰器定义响应式字符串变量msg，完成输入内容实时同步展示效果。
1.布局采用纵向Column容器，设置组件间距 25，整体页面铺满屏幕并预留 20 内边距；

2.顶部放置文本输入框TextInput，预设占位提示文字 “请输入内容：”，绑定状态变量msg；通过onChange监听输入事件，用户每输入字符都会实时更新this.msg的值；

3.下方搭配两组 Text 文本组件：一组固定提示文字 “你输入的内容是：”，另一组动态渲染msg变量，以灰色小字实时回显用户输入内容；

4.完整体现鸿蒙响应式 UI 核心逻辑：@State修饰变量变更后，所有绑定该变量的组件自动刷新，无需手动操作 DOM，是表单、搜索框等文本交互功能的基础实现模板。

2嵌套 Column 上下分层布局

鸿蒙 ArkTS 文本输入双向绑定实战案例，采用嵌套 Column 分层布局，页面划分为输入区与内容回显区，通过百分比高度划分页面模块。借助 @State 响应式变量搭配 TextInput 的 onChange 监听，实现输入内容实时同步展示；同时综合运用 space 组件间距、padding 内边距、圆角、背景色等样式美化页面，直观演示数据驱动 UI 的核心特性。

3添加按钮

页面采用双层嵌套 Column 纵向布局，通过百分比高度将页面划分为上下两大功能模块：

1. 顶部输入模块：定义字符串状态msg，配合 TextInput 的 onChange 事件实现输入内容实时绑定；新增 Button 按钮，依托布尔状态isOpen与三元表达式动态切换按钮文字，点击时对布尔值取反完成开关切换效果。
2. 底部展示模块：带圆角与浅灰色背景，读取字符串状态实时回显用户输入内容。 代码同时覆盖字符串、布尔两种常用 @State 状态使用场景，结合 space 组件间距、padding 内边距、百分比高度、圆角容器等样式，完整展示鸿蒙 ArkUI 多状态共存的响应式交互开发流程。

4输入 + 开关双状态联动布局

• 布局结构 外层大 Column 承载上下两大模块，通过百分比高度分割页面；上层输入模块使用纵向 Column，下层展示模块内部嵌套纵向 Column + 横向 Row，实现横竖混合布局。
• 两类响应式状态
  • msg字符串状态：绑定 TextInput 输入框，输入内容实时回显至下方文本；
  • isOpen布尔状态：一处控制按钮文字 “开关已打开 / 开关已关闭”，一处在 Row 布局中用红色文字展示 “开启 / 关闭”，一处修改多处同步刷新。
• 交互逻辑 点击按钮触发 onClick 事件，布尔值取反更新isOpen；由于变量被@State监听，所有绑定该变量的组件自动同步刷新文字，体现鸿蒙数据驱动 UI 的核心优势。
• 页面美化 使用 space 控制组件间距、padding 设置内边距、borderRadius 实现圆角容器、#F5F5F5 浅灰背景区分展示区域，搭配不同字号、红色状态文字做视觉区分。

5Toggle 开关主题切换布局（夜览模式开关）

1. 布局结构 外层纵向 Column 容器，内部嵌套横向 Row 布局，放置提示文字与 Switch 类型 Toggle 开关，下方搭配状态提示文本。
2. 核心交互 定义布尔响应式变量isOpen，监听 Toggle 的onChange事件，切换开关时对布尔值取反。
3. 多位置状态联动

• 底部 Text 组件：根据布尔值显示 “夜览模式已开启 / 已关闭”；
• 最外层 Column 背景：布尔为 true 时显示灰色底色，false 时为白色底色； 一处修改状态，页面文字、背景两处视觉元素同步刷新，直观体现 ArkUI 数据驱动 UI 特性。