文本输入-TextInput

TextInput

– 单行文本输入框组件
代码示例：

@Entry
@Component
struct Index {
  private tio1:TextInputOptions = {
    placeholder:"请输入内容", //输入框为空时显示
    text:"默认文本内容" //默认内容，或者说默认值
  }

  private tio2:TextInputOptions = {
    placeholder:"请输入内容", //输入框为空时显示
    text:""
  }
  build() {
    Column({space:10}){
      TextInput(this.tio1)
        .type(InputType.Normal) //设置输入框类型
        .backgroundColor(Color.White) //设置背景色
        .borderRadius(5) //设置边框圆角
      TextInput(this.tio2)
        .type(InputType.Normal) //设置输入框类型
        .backgroundColor(Color.White) //设置背景色
        .borderRadius(5) //设置边框圆角
    }.backgroundColor(Color.Gray).height('100%')
  }
}

图示：

组件声明

TextInput(value?: TextInputOptions)

• 什么是TextInputOptions?
  {placeholder?:ResourceStr?,text:ResourceStr,controller?:TextInputController}
• 什么是ResourceStr?
  declare type ResourceStr = string | Resource;
• 什么是Resource
declare type Resource = import('../api/global/resource').Resource;
$r('belogin.type.name')获取Resouce下的资源
  $rawfile('file_name.expanded-name')
• 什么是TextInputController?
  请参参考 TextInputController
• Resource

设置文本框类型

TextInput有9种可选类型,通过type属性进行设置：

1. InputType.Normal基本输入模式(默认)
2. InputType.Password密码输入模式
3. InputType.Email邮箱地址输入模式
4. InputType.Number纯数字输入模式
5. InputType.PhoneNumber电话号码输入模式
6. InputType.USER_NAME用户名输入模式
7. InputType.NEW_PASSWORD新密码输入模式
8. InputType.NUMBER_PASSWORD纯数字密码输入模式
9. InputType.NUMBER_DECIMAL带小数点的数字输入模式

设置样式

• 提示文本placeholder:"请输入内容"
  • 提示文本颜色placeholderColor('#fff000')
  • 提示文本字体placeholderFont({size:30,family:'HarmonyOS Sans',style:FontStyle.Italic,weight:300})
    • 提示文本大小：size 默认值：16.0
    • 提示文本字体：family当前支持'HarmonyOS Sans'字体和注册自定义字体
    • 提示文本风格：style设置文本的字体样式，FontStyle.Normal、FontStyle.Italic
    • 提示文本加粗：weight 取值[100, 900]，取值间隔为100，默认400
• 设置默认值text:"默认文本内容"
• 设置背景颜色backgroundColor(Color.White)
• 设置背景图片backgroundImage($r('app.media.ai'))
• 设置边框圆角.borderRadius(5)
• 设置输入文本字体样式：fontColor、fontSize、fontStyle、fontWeight、fontFamily
• 设置光标颜色：caretColor(value: ResourceColor)。例如：careColor('#fff000')
• 文本在输入框中的水平对齐方式:
  • 左对齐TextAlign.Start
  • 居中TextAlign.Center
  • 右对齐TextAlign.End
  • 两端对齐TextAlign.JUSTIFY
• 显示输入框下划线showUnderline(true)
  • 设置输入框非编辑状态时，下划线颜色underlineColor(Color.Red)

更多功能请查看官方文档