二、内层输入交互模块（占页面 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绑定msg，onChange监听输入，输入内容实时赋值给变量实现双向绑定； - 状态切换按钮
- 使用三元表达式动态展示文字：
isOpen为 true 显示 “开关已打开”，false 显示 “开关已关闭”； - 点击事件取反布尔值
this.isOpen = !this.isOpen，点击即可切换开关状态。
- 使用三元表达式动态展示文字：
一、外层卡片容器整体样式
这是上一段输入 + 按钮页面的下方展示卡片模块：
卡片宽度铺满屏幕，高度占页面 55%，浅灰色背景、12px 圆角，内部统一预留 15px 内边距； 内部采用垂直布局承载两块展示内容，模块上下间距 15。
二、第一块：输入内容展示区
四、核心知识点
- 标题文字「你输入的内容是：」，字号 20，居左，顶部留出 15px 上边距；
- 下方文本直接绑定响应式变量
this.msg，实时同步输入框填写内容；字号 24、灰色字体，该区域高度占卡片 40%。 - 标题文字「开关状态：」，字号 26、居左；
- 使用三元表达式读取布尔变量
isOpen：变量为 true 显示红色文字「开启」，false 显示红色文字「关闭」，实时同步上方按钮切换后的状态。 @State变量全局共享，输入框、按钮、展示区域共用同一套数据，一处修改全页面同步刷新；- 三元表达式动态控制文字内容与颜色，实现状态实时展示；
- 嵌套 Column + 百分比高度，划分输入区、状态区两大展示板块；
- 卡片式美化：圆角、背景色、内边距提升页面分层视觉效果。