“Play Hongmeng on Mac with Hardware 13” Hongmeng UI Components Part 3 – کامپوننت TextInput برای به دست آوردن ورودی کاربر

  @Entry
  @Component
  struct TextInputDemo {
    @State inputText: string = ''; // 定义状态变量保存输入内容

    build() {
      Column() {
        TextInput({ placeholder: 'Enter text here' }) // 创建带占位符的输入框
          .onChange((value) => this.inputText = value) // 监听输入变化，将内容保存到 inputText
          .backgroundColor(Color.Pink) // 设置背景颜色为粉色
          .fontColor(Color.Black) // 设置文本颜色为黑色
          .fontSize(20) // 设置字体大小
      }
      .width('100%') // 设置列宽度为 100%
      .height('100%') // 设置列高度为 100%
    }
  }

  TextInput({ placeholder: 'Enter your username' }) // 设置占位符文本
    .placeholderColor(Color.Gray) // 设置占位符颜色为灰色
    .fontSize(18) // 设置字体大小为 18
    .fontWeight(FontWeight.Normal) // 设置字体粗细为正常

  TextInput({ placeholder: 'Enter your password' }) // 设置占位符文本
    .borderColor(Color.Blue) // 设置边框颜色为蓝色
    .borderWidth(2) // 设置边框宽度为 2
    .borderRadius(10) // 设置圆角半径为 10

  TextInput({ placeholder: 'Type here...' }) // 设置占位符文本
    .backgroundColor(Color.Gray) // 设置背景颜色为灰色

  @Entry
  @Component
  struct InputListener {
    @State userInput: string = ''; // 定义状态变量保存输入内容

    build() {
      Column() {
        TextInput({ placeholder: 'Enter text here' }) // 创建带占位符的输入框
          .onChange((value) => this.userInput = value) // 输入内容变化时，更新 userInput
          .fontSize(18) // 设置字体大小为 18

        Text(`You entered: ${this.userInput}`) // 显示输入的内容
          .fontSize(16) // 设置显示文本的字体大小为 16
          .margin({ top: 10 }) // 设置上边距为 10
      }
    }
  }

  TextInput({ placeholder: 'Type your message' }) // 创建带占位符的输入框
    .onFocus(() => console.log('Input field focused')) // 输入框聚焦时，输出日志
    .onBlur(() => console.log('Input field unfocused')) // 输入框失焦时，输出日志

  @Entry
  @Component
  struct SearchInput {
    @State searchText: string = ''; // 定义状态变量保存搜索内容

    build() {
      Column() {
        Row() {
          TextInput({ placeholder: 'Search here...' }) // 设置搜索输入框占位符
            .onChange((value) => this.searchText = value) // 输入变化时更新 searchText
            .fontColor(Color.Black) // 设置字体颜色为黑色
            .backgroundColor(Color.Gray) // 设置背景颜色为灰色
            .fontSize(18) // 设置字体大小为 18
            .width('80%') // 设置宽度为 80%

          Button('Clear') // 创建清除按钮
            .onClick(() => this.searchText = '') // 点击清除按钮时清空搜索内容
            .width(60) // 设置按钮宽度为 60
            .margin({ left: 10 }) // 设置左边距为 10
        }
        .margin({ bottom: 20 }) // 设置下边距为 20

        if (this.searchText.length > 0) {
          Text(`Searching for: ${this.searchText}`) // 显示当前输入的搜索内容
            .fontSize(16) // 设置字体大小为 16
            .fontColor(Color.Blue) // 设置字体颜色为蓝色
        } else {
          Text('Please enter a search term.') // 当没有输入时显示提示文本
            .fontSize(16) // 设置字体大小为 16
            .fontColor(Color.Gray) // 设置字体颜色为灰色
        }
      }
      .padding(20) // 设置整体容器内边距为 20
    }
  }

  TextInput({ placeholder: 'Enter your username' }) // 设置占位符文本
    .maxLength(10) // 限制最多输入 10 个字符

  Row() {
    TextInput({ placeholder: 'Type here...' }) // 设置占位符文本
      .onChange((value) => this.text = value) // 绑定内容变化

    Button('Clear') // 创建清除按钮
      .onClick(() => this.text = '') // 点击清除按钮时清空内容
      .width(50) // 设置按钮宽度为 50
      .margin({ left: 10 }) // 设置左边距为 10
  }