二、内层输入交互模块占页面 35% 高度内层垂直容器内部元素间距 25包含三部分三、外层页面布局最外层为垂直布局下方预留另一块垂直容器间距 15可拓展新增其他组件输入交互区域单独限制高度为页面 35%实现区块高度划分。基础装饰器Entry页面入口、ComponentUI 组件、State响应式数据基础布局Column垂直布局容器基础控件Text文本、Button按钮包含尺寸、颜色、圆角、边距等链式样式交互能力onClick点击事件监听页面路由基础获取 UI 上下文、获取 Router 路由对象实现跨页面导航前置逻辑调试工具console.info控制台打印日志布局居中Column 容器通过justifyContent实现内部元素居中摆放Button 基础样式自定义背景、百分比宽高点击交互onClick监听按钮点击行为页面路由流程获取 UI 上下文 → 获取 Router 实例 → pushUrl 跳转页面Promise 异步处理then 处理成功逻辑、catch 捕获业务异常日志调试console.info正常打印、console.error 打印错误信息用于真机 / 预览器调试。一、页面基础与响应式变量Entry、Component将Example1定义为独立可预览页面。声明两个响应式变量msg字符串同步存储文本输入框填写的内容isOpen布尔值记录开关状态仅存在 true、false 两种值用于控制按钮文字切换。提示文本文字 “请输入信息:”字号 26居左对齐铺满整行宽度文本输入框通栏宽度、高 50、字号 24通过text绑定msgonChange监听输入输入内容实时赋值给变量实现双向绑定状态切换按钮使用三元表达式动态展示文字isOpen为 true 显示 “开关已打开”false 显示 “开关已关闭”点击事件取反布尔值this.isOpen !this.isOpen点击即可切换开关状态。一、外层卡片容器整体样式这是上一段输入 按钮页面的下方展示卡片模块卡片宽度铺满屏幕高度占页面 55%浅灰色背景、12px 圆角内部统一预留 15px 内边距 内部采用垂直布局承载两块展示内容模块上下间距 15。二、第一块输入内容展示区四、核心知识点标题文字「你输入的内容是」字号 20居左顶部留出 15px 上边距下方文本直接绑定响应式变量this.msg实时同步输入框填写内容字号 24、灰色字体该区域高度占卡片 40%。标题文字「开关状态」字号 26、居左使用三元表达式读取布尔变量isOpen变量为 true 显示红色文字「开启」false 显示红色文字「关闭」实时同步上方按钮切换后的状态。State变量全局共享输入框、按钮、展示区域共用同一套数据一处修改全页面同步刷新三元表达式动态控制文字内容与颜色实现状态实时展示嵌套 Column 百分比高度划分输入区、状态区两大展示板块卡片式美化圆角、背景色、内边距提升页面分层视觉效果。