代码练习：按钮，输入文本

基础组件

Column / Row：线性布局容器，space 控制子组件间距。

Text：显示文本，可设置 fontSize、fontColor、textAlign。

TextInput：输入框，通过 onChange 回调获取用户输入。

Button：可点击按钮，onClick 触发逻辑。

Toggle：开关组件，type: ToggleType.Switch 呈现滑动开关，onChange 回调。

下面有代码解析

预览结果如下：

点击按钮，背景颜色会改变

代码如下：

@Entry
@Component
struct  Exampl1{
  @State msg:string=""
  @State isOpen:boolean = false
  build() {
    Column({space:50}){
      Column({space:25}) {
        Text('请输入信息')
          .fontSize(26)
          .textAlign(TextAlign.Start)
          .width('100%')
        TextInput({ placeholder: '请输入内容：' })
          .width('100%')
          .height(50)
          .fontSize(24)
          .onChange((value: string) => {
            this.msg = value
          })
        Button(this.isOpen?"开关已打开":"开关已关闭")
          .width('100%')
          .height(50)
          .fontColor(Color.Red)
          .fontSize(18)
          .onClick(()=>{
            this.isOpen = !this.isOpen
          })
        Row({space:20}) {
          Text('夜览模式')
            .fontSize(30)
          Toggle({ type: ToggleType.Switch })
            .width('35%')
            .height(50)
            .onChange(() => {
              this.isOpen = !this.isOpen
            })
        }


      }
      .height('35%')


      Column({space:15}) {
        Text("你输入的内容是：")
          .fontSize(26)
          .textAlign(TextAlign.Start)
          .width('100%')
          .padding({top:15})
        Text(this.msg)
          .width('100%')
          .fontSize(24)

          .fontColor(Color.Black)
      Row(){
        Text("开关的状态：")
          .fontSize(25)
        Text(this.isOpen?"开启":"关闭")
          .fontSize(25)
          .fontColor(Color.Red)


      }
      .width('100%')
        Text(this.isOpen?"夜览模式已开启":"夜览模式已关闭")


      }
      .backgroundColor("#F5F5F5")
      .width("100%")
      .height("55%")
      .borderRadius(12)
      .padding(15)

    }
    .width('100%')
    .height('100%')
    .padding(60)
    .backgroundColor(this.isOpen?0xd3d3d3:Color.White)
  }
}

解析：

开头的代码

• @Entry：装饰器，表示该组件是页面的入口组件（即启动时第一个加载的页面）。

• @Component：装饰器，表示下面定义的是一个自定义组件，可以像HTML标签一样被复用。

• struct Exampl1：定义了一个名为 Exampl1 的结构体，它继承自ArkUI的组件能力。

Column：纵向线性布局，space: 25 表示子组件间隔25

Text('请输入信息') 显示为文本

重点是textinput：

Column({space:25}) {
  Text('请输入信息')
    .fontSize(26)
    .textAlign(TextAlign.Start)
    .width('100%')
  TextInput({ placeholder: '请输入内容：' })
    .width('100%')
    .height(50)
    .fontSize(24)
    .onChange((value: string) => {
      this.msg = value
    })

TextInput：输入框，placeholder 显示灰色提示文字（请输入内容）。

下面的onchang是：

在鸿蒙系统中，onChange 是 TextInput 组件的一个重要事件回调，用于监听输入框内容的变化。当用户输入或删除字符时，onChange 会被触发，从而实现实时响应和交互。

当用户输入时，onChange 回调会触发，将输入值赋给 this.msg，然后显示在文本  你输入的内容是：

效果预览：

（可输入文本）

按钮命令：

Button(this.isOpen?"开关已打开":"开关已关闭")
  .width('100%')  //宽度占比
  .height(50)    //高度
  .fontColor(Color.Red) //字体颜色
  .fontSize(18)   //字体字号（大小）
  .onClick(()=>{      //判断开关
    this.isOpen = !this.isOpen

})

Row({space:20}) {
  Text('夜览模式')
    .fontSize(30)
  Toggle({ type: ToggleType.Switch })
    .width('35%')
    .height(50)
    .onChange(() => {
      this.isOpen = !this.isOpen
    })
}

Column({space:15}) {
  Text("你输入的内容是：")
    .fontSize(26)
    .textAlign(TextAlign.Start)    //文本对齐
    .width('100%')
    .padding({top:15})
  Text(this.msg)    //实时更新
    .width('100%')
    .fontSize(24)

Row(){
  Text("开关的状态：")
    .fontSize(25)
  Text(this.isOpen?"开启":"关闭")
    .fontSize(25)
    .fontColor(Color.Red)

.width('100%')
  Text(this.isOpen?"夜览模式已开启":"夜览模式已关闭") 

最后一段代码

.width('100%')
.height('100%')
.padding(60)
.backgroundColor(this.isOpen?0xd3d3d3:Color.White) //跟随开关，变换背景颜色