完整可运行实训代码（直接提取即可运行）

代码功能运行效果说明

结果(所有按钮皆可使用)

1. 输入框区域：手动输入文字，下方结果区域实时同步显示输入内容，实现文本双向绑定

2. 按钮控制：点击按钮，按钮文字、夜览模式背景、状态提示文字全部同步切换

3. Toggle开关控制：滑动右侧开关，效果和点击按钮完全一致，双向联动无冲突

4. 夜览模式变化：开关开启→页面背景变黑（夜览模式）；开关关闭→页面恢复白色背景

5. 状态文字变色：开启状态文字变红，关闭状态文字变绿，视觉区分清晰

6. TextInput输入框双向绑定原理TextInput通过text属性绑定msg变量，onChange事件实时接收用户输入值并赋值给msg，输入和展示双向同步，这是ArkTS表单最基础的双向数据绑定写法。

7. 按钮&Toggle开关状态联动原理

   两处控件都执行同一行代码：this.isOpen = !this.isOpen，对布尔值进行取反操作。

   因为共用同一个状态变量，所以按钮点击 和 开关滑动 效果完全互通，一处改变，全局UI全部联动变化，完美体现状态管理的优势。

8. 三元表达式动态修改UI样式

   案例中大量使用三元运算符，根据isOpen状态，动态修改：按钮文字、页面背景色、文字内容、文字颜色，一行代码实现两种UI样式切换，是ArkTS最常用的动态UI写法。