HarmonyOS-UIAbitity-TextInput——【坚果派-红目香薰】
摘要
作者:红目香薰
团队:坚果派
团队介绍:坚果派由坚果创建,团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。
目录
摘要
HarmonyOS-UIAbitity-TextInput
设置输入提示文本
设置输入类型
type的参数类型为InputType,包含以下几种输入类型:
设置光标位置
获取输入文本
总结
HarmonyOS-UIAbitity-TextInput
TextInput组件用于输入单行文本,响应输入事件。TextInput的使用也非常广泛,例如应用登录账号密码、发送消息等。和Text组件一样,TextInput组件也支持文本样式设置,下面的示例代码实现了一个简单的输入框:
@Entry@Component
struct Index {
@State info: string = '一杯敬自由,一杯敬死亡。'
build() {
Row() {
Column() {
TextInput()
.fontColor(Color.Blue)
.fontSize(20)
.fontStyle(FontStyle.Italic)
.fontWeight(FontWeight.Bold)
.fontFamily('华文行楷')
}.width('100%')
.borderStyle(BorderStyle.Solid)
.borderWidth(2)
.borderColor('#C75450')
}
.width('100%')
.height('100%')
}
}
编辑
设置输入提示文本
当我们平时使用输入框的时候,往往会有一些提示文字。例如登录账号的时候会有“请输入账号”这样的文本提示,当用户输入内容之后,提示文本就会消失,这种提示功能使用placeholder属性就可以轻松的实现。您还可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式,示例代码如下:
@Entry@Component
struct Index {
@State info: string = '一杯敬自由,一杯敬死亡。'
build() {
Row() {
Column() {
TextInput({ placeholder: '请输入信息' })
.fontColor(Color.Blue)
.fontSize(20)
.fontStyle(FontStyle.Italic)
.fontWeight(FontWeight.Bold)
.fontFamily('华文行楷')
}.width('100%')
.borderStyle(BorderStyle.Solid)
.borderWidth(2)
.borderColor('#C75450')
}
.width('100%')
.height('100%')
}
}
编辑
设置提示文字样式
TextInput({ placeholder: '请输入信息' })
.fontColor(Color.Blue)
.fontSize(20)
.fontStyle(FontStyle.Italic)
.fontWeight(FontWeight.Bold)
.fontFamily('华文行楷')
.placeholderColor(0x999999)
.placeholderFont({ size: 20, weight: FontWeight.Medium, family: '华文行楷', style: FontStyle.Italic })
设置输入类型
可以使用type属性来设置输入框类型。例如密码输入框,一般输入密码的时候,为了用户密码安全,内容会显示为“......”,针对这种场景,将type属性设置为InputType.Password就可以实现。示例代码如下:
TextInput({ placeholder: '请输入密码' })
.type(InputType.Password)
效果图如下:
编辑
type的参数类型为InputType,包含以下几种输入类型:
Normal:基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Password:密码输入模式。
Email:e-mail地址输入模式。
Number:纯数字输入模式。
设置光标位置
可以使用TextInputController动态设置光位置,下面的示例代码使用TextInputController的caretPosition方法,将光标移动到了第二个字符后。
编辑
@Entry@Component
struct Index {
@State info: string = '一杯敬自由,一杯敬死亡。'
controller: TextInputController = new TextInputController()
build() {
Row() {
Column() {
TextInput({ controller: this.controller })
Button('设置光标位置')
.onClick(() => {
this.controller.caretPosition(2)
})
}.width('100%')
.borderStyle(BorderStyle.Solid)
.borderWidth(2)
.borderColor('#C75450')
}
.width('100%')
.height('100%')
}
}
获取输入文本
我们可以给TextInput设置onChange事件,输入文本发生变化时触发回调,下面示例代码中的value为实时获取用户输入的文本信息。
编辑
@Entry
@Component
struct Index {
@State info: string = '一杯敬自由,一杯敬死亡。'
controller: TextInputController = new TextInputController()
build() {
Row() {
Column() {
TextInput({ placeholder: '请输入账号' })
.caretColor(Color.Blue)
.onChange((value: string) => {
this.info = value
})
Text(this.info)
}.width('100%')
.borderStyle(BorderStyle.Solid)
.borderWidth(2)
.borderColor('#C75450')
}
.width('100%')
.height('100%')
}
}
总结
TextInput表单操作是一个非常重要的操作,基本上各种交互都需要用到它,所以需要我们多练习几次哦。
- 点赞
- 收藏
- 关注作者
评论(0)