ArkUI 基础控件与页面路由跳转功能实现

二、内层输入交互模块（占页面 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 + 百分比高度，划分输入区、状态区两大展示板块；
• 卡片式美化：圆角、背景色、内边距提升页面分层视觉效果。