ArkTS 入门实战：构建一个交互式信息展示页面

一、代码核心功能概览这段代码实现了以下功能信息输入用户可以在文本框中输入任意内容。状态切换通过一个按钮来切换布尔状态开 / 关。模式切换通过一个开关组件来切换 “夜览模式”改变整个页面的背景色。实时反馈页面会实时显示用户输入的内容以及两个开关的当前状态。二、核心知识点拆解1. 组件定义Entry与Componenttypescript运行Entry Component struct Examp1 { // ... }Component: 这是一个装饰器用于声明一个自定义组件。struct Examp1由此成为一个可复用的 UI 单元。每个组件都必须实现build()方法来描述其 UI 结构。Entry: 这同样是一个装饰器用于标记当前组件作为应用的入口组件。一个应用只能有一个Entry组件它是 UI 界面的起点。2. 状态管理Statetypescript运行State msg:string State isOpen:booleanfalse State iskai:booleanfalseState: 这是 ArkTS 中最核心的状态管理装饰器。被它标记的变量如msg,isOpen,iskai是组件内部的状态数据。核心特性当这些状态变量的值发生变化时ArkUI 框架会自动检测到变化并重新渲染rebuild依赖这些变量的 UI 部分。这就是所谓的 “状态驱动 UI 更新”。3. UI 构建build()方法与布局组件typescript运行build() { Column({space:60}){ // ... Row() { // ... } } }build()方法: 所有Component都必须实现此方法。它是用来描述 UI 结构的地方返回一个组件树。布局组件:Column: 垂直布局容器子组件从上到下依次排列。{space:60}设置了子组件之间的垂直间距为 60vp。Row: 水平布局容器子组件从左到右依次排列。通过嵌套Column和Row我们可以构建出复杂的页面布局。4. 基础 UI 组件详解Text: 用于显示文本内容。可以通过.fontSize(),.width(),.textAlign()等方法设置样式。TextInput: 用于用户输入文本。placeholder: 设置输入框为空时的提示文字。.onChange(): 输入内容变化时的回调事件我们在这里更新msg状态变量。Button: 按钮组件响应用户点击。按钮的标题使用了条件渲染this.isOpen ? 开关已打开 : 开关已关闭根据isOpen的状态动态显示不同文本。.onClick(): 点击事件的回调我们在这里取反isOpen的值。Toggle: 开关组件这里使用了ToggleType.Switch样式。.onChange(): 开关状态变化时的回调我们在这里取反iskai的值。5. 数据绑定与条件渲染ArkTS 采用声明式 UI 范式UI 是状态数据的直观反映。数据绑定:TextInput的text属性绑定到this.msg。Text的内容直接绑定到this.msg,this.isOpen,this.iskai。Column的backgroundColor绑定到this.iskai实现了夜览模式的背景色切换。条件渲染:三元表达式是实现条件渲染的常用方式this.isOpen ? 开关已打开 : 开关已关闭this.iskai ? 0xd3d3d3 : Color.White当状态变量变化时这些表达式的结果也会随之变化从而触发 UI 的更新。三、完整代码逻辑解析初始化: 页面加载时msg为空字符串isOpen和iskai均为false。输入交互: 用户在TextInput中输入文字onChange事件触发msg变量被更新。绑定了msg的Text组件会自动刷新显示最新输入的内容。按钮交互: 用户点击按钮onClick事件触发isOpen变量取反。绑定了isOpen的按钮标题和下方的状态文本会同步更新。开关交互: 用户切换Toggle开关onChange事件触发iskai变量取反。绑定了iskai的背景色和状态文本会同步更新实现 “夜览模式” 的切换。