页面大概分为三个模块，从上之下依次为输入区、内容展示区、夜览开关区。

1.顶部输入模块

包含提示文字、输入框、切换按钮

.textlnput绑定msg，输入文字实时同步；

.button文字由isOpen状态控制，点击按钮切换全局布尔值

2.中间展示模版

上面是实时展示输入框录入的文字。

下面是红色文字显示当前开关装填（开启/关闭）。

3.底部夜览开关

toggle开关使用isOpen变量，点击按钮就可以改变背景颜色，实现深色夜览模式。

一.TextInput({text:this.msg,placeholder:"请输入内容:"})

           .onChange((value:string)=>{

                  this.msg = value

            })

@State修饰msg，输入时onChange持续更新变量，下方Text(this.msg)自动刷新文字，实现输入同步显示。

二, Button(this.isOpen?"开关已打开":"开关已关闭")

            .onClick(()=>{

                  this.isOpen=!this.isOpen

             })

三元表达式动态渲染按钮文字；!this.isOpen对布尔值取反，修改后页面所有使用isOpen的组件全部更新。

三。Toggle({

             type: ToggleType.Switch,

             isOn: this.isOpen

         })

         .onChange((value: boolean) => {

              this.isOpen = value

          })

四。全局夜览模式切换

.backgroundColor(this.isOpen ? 0xd3d3d3 : 0xffffff)

isOpen=true：页面灰色背景，夜览开启。

isOpen=false：页面白色背景，正常模式。