HarmonyOS系统开发ArkTS常用组件文本输入及参数

TextInput文本输入组件，用于接收用户输入的文本内容。

1、TextInput组件的参数

TextInput(value?:{placeholder?: string|Resource , text?: string|Resource})

placeholder属性用于设置无输入时的提示文本
text用于设置输入框当前的文本内容


@Entry
@Component
struct textInput {
  @State isOn: boolean = true;

  build() {
    Column({ space: 10 }) {
      Text('文本输入框 TextInput').fontSize(25)
      TextInput({'placeholder':'输入文本内容','text':''}).width(200).height(50)
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

2、常用属性及事件

输入框类型
光标样式
文本样式
change事件
焦点事件

2.1 输入框类型

可通过type()方法设置输入框的类型，该方法的参数为InputType枚举类型，可选的枚举值有


@Entry
@Component
struct textInput {
  @State isOn: boolean = true;

  build() {
    Column({ space: 10 }) {
      Text('文本输入框 TextInput').fontSize(25)
      TextInput({'placeholder':'基本输入','text':''}).type(InputType.Normal).width(200).height(50)
      TextInput({'placeholder':'数字','text':''}).type(InputType.Number).width(200).height(50)
      TextInput({'placeholder':'密码','text':''}).type(InputType.Password).width(200).height(50)
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

2.2 placeholder样式

placeholder样式还可通过placeholderFont()和placeholderColor()方法设置 placeholder 的样式，其中placeholderFont()用于设置字体，包括字体大小、字体粗细等，placeholderColor()用于设置字体颜色


@Entry
@Component
struct textInput {
  @State isOn: boolean = true;

  build() {
    Column({ space: 10 }) {
      Text('文本输入框 TextInput').fontSize(25)
      TextInput({'placeholder':'基本输入','text':''})
        .placeholderFont({weight:'800'})
        .placeholderColor(Color.Orange)
        .type(InputType.Normal)
        .width(200)
        .height(50)

    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

2.3 光标样式

可通过caretColor()方法设置光标的颜色

TextInput({'placeholder':'光标颜色','text':''}).type(InputType.Normal).caretColor(Color.Blue).width(200).height(50)

2.4 文本样式

输入文本的样式可通过fontSize()、fontWeight()、fontColor()等通用属性方法进行设置

2.5 change事件

每当输入的内容发生变化，就会触发 change 事件，开发者可使用onChange()方法为TextInput组件绑定 change 事件。

@Entry
@Component
struct textInput {
  @State isOn: boolean = true;

  build() {
    Column({ space: 10 }) {
      Text('文本输入框 TextInput').fontSize(25)
      TextInput({ 'placeholder': '光标颜色', 'text': '' })
        .type(InputType.Normal)
        .caretColor(Color.Blue)
        .onChange((content) => {
          console.log(content);
        })
        .width(200)
        .height(50)
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

2.6 焦点事件

焦点事件包括获得焦点和失去焦点两个事件，当输入框获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件，开发者可使用onFocus()和onBlur()方法为 TextInput 组件绑定相关事件。

@Entry
@Component
struct textInput {
  @State isOn: boolean = true;

  build() {
    Column({ space: 10 }) {
      Text('文本输入框 TextInput').fontSize(25)
      TextInput({ 'placeholder': '光标颜色', 'text': '' })
        .type(InputType.Normal)
        .caretColor(Color.Blue)
        .onChange((content) => {
          console.log(content);
        })
        .onFocus(() => {
          console.log('输入框获得焦点');
        })
        .onBlur(() => {
          console.log('输入框失去焦点');
        })
        .width(200)
        .height(50)

      TextInput({ 'placeholder': '测试', 'text': '' })
        .width(200)
        .height(50)

    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Center)
  }
}