@Entry
@Component
struct StatesDemo3{
@State msg: string = ""
@State flge : boolean=false
@State output:string="关闭"
build() {
Column({space: 20}){
Text("请输入信息:")
.fontSize(32)
.width('100%')
TextInput({text: this.msg, placeholder:"请输入任意内容"})
.width('100%')
.height(50)
.padding({left: 20})
.fontSize(24)
.onChange((value: string) => {
if (this.flge===true) {
this.msg = value
}
        })
Row({space:30}){
Button(this.flge?'输入已开':"输入已关")
.onClick(()=>{
if (this.flge) {
this.flge=false
              this.output="关闭"
}
else {
this.flge=true
              this.output="开启"
}
          })
Button('清空按钮')
.onClick(()=>{
this.msg=""
})
}
Row({space:5}){
Text('开关状态：')
.fontSize(22)
Text(this.output)
.fontSize(22)
}
Column({space: 10}){
Text(`你输入的内容是: `)
.fontSize(28)
.width('100%')
.textAlign(TextAlign.Start)
Text(`${this.msg}`)
.fontSize(26)
.width('100%')
.textAlign(TextAlign.Start)
}
.width('100%')
.padding(30)
.margin({top:100})
.backgroundColor("#F5F5F5")
.height("55%")
.border({radius: 30})
}
.width('100%')
.height('100%')
.padding({top:50})
.padding(15)
}
}

二、夜览模式

@Entry
@Component
struct yelan{
@State isOpen: boolean = true
build() {
Column(){
Row(){
Text("夜览模式：")
.fontSize(30)
Toggle({type: ToggleType.Switch, isOn: this.isOpen})
.width("35%")
.height(50)
.onChange((val: boolean) => {
this.isOpen = val
})
}
Text(this.isOpen?"夜览模式已开启":"夜览模式已关闭")
}
.width("100%")
.height("100%")
.backgroundColor(this.isOpen ? 0xd3d3d3 : Color.White)
}
}

三、结合

@Entry
@Component
struct StatesDemo3{
@State msg: string = ""
@State flge : boolean=false
@State output:string="关闭"
@State isOpen: boolean = true
build() {
Column({space: 20}){
Text("请输入信息:")
.fontSize(32)
.width('100%')
TextInput({text: this.msg, placeholder:"请输入任意内容"})
.width('100%')
.height(50)
.padding({left: 20})
.fontSize(24)
.onChange((value: string) => {
if (this.flge===true) {
this.msg = value
}
        })
Row({space:30}){
Button(this.flge?'输入已开':"输入已关")
.onClick(()=>{
if (this.flge) {
this.flge=false
              this.output="关闭"
}
else {
this.flge=true
              this.output="开启"
}
          })
Button('清空按钮')
.onClick(()=>{
this.msg=""
})
}
Row(){
Text("夜览模式：")
.fontSize(22)
Toggle({type: ToggleType.Switch, isOn: this.isOpen})
.width("15%")
.height(30)
.onChange((val: boolean) => {
this.isOpen = val
})
}
Row({space:5}){
Text('开关状态：')
.fontSize(22)
Text(this.output)
.fontSize(22)
}
Text(this.isOpen?"夜览模式已开启":"夜览模式已关闭")
Column({space: 10}){
Text(`你输入的内容是: `)
.fontSize(28)
.width('100%')
.textAlign(TextAlign.Start)
Text(`${this.msg}`)
.fontSize(26)
.width('100%')
.textAlign(TextAlign.Start)
}
.width('100%')
.padding(30)
.margin({top:100})
.backgroundColor("#F5F5F5")
.height("55%")
.border({radius: 30})
}
.width('100%')
.height('100%')
.padding({top:50})
.padding(15)
}
}