HarmonyOS掌上记账APP开发实践第93篇：自定义输入框组件实现

自定义输入框场景介绍输入框是一种常见的场景开发者为了丰富其多样性在输入框中的占位符、下划线做了相关处理。本文即为大家介绍如何开发自定义输入框。效果呈现效果图如下实现思路点击输入框提示文字向上浮动并同时改变文字颜色输入框底线进行匀速放缩通过监听输入框状态(onEditChange)发生变化时提示文字向上浮动以及底部线进行放缩同时改变文字和底部线的颜色。在输入文本时输入框右侧显示“清除”图标。点击“清空”图标清空输入文本通过监听输入框中有文本输入(onChange)时右侧显示“清除”图标。开发步骤封装TextInput组件去监听onEditChange事件输入状态的变化和onchange事件输入内容的变化。具体代码块如下TextInput({text:this.textValue}).width(100%).height(100%).borderRadius(0).borderColor(#86C7CC).borderWidth({bottom:1}).backgroundColor(Color.Transparent).type(this.typeInput).showPasswordIcon(false)// 输入内容发生变化.onEditChange((isEditing){this.isEditingisEditingthis.isFloatHintthis.isEditing||this.textValue!})// 输入状态变化时.onChange((value){this.textValuevaluethis.isFloatHintthis.isEditing||this.textValue!})输入状态发生变化(onEditChange)时,提示文字向上浮动并同时改变颜色输入框底线匀速放缩并改变颜色。具体代码如下// 提示文本占位符Text(this.placeholder).enabled(false).fontColor(this.isFloatHint?#5D7DB3:#E1E4EA).position({x:0,y:this.isFloatHint?0:50%}).translate({x:15,y:-50%}).animation({duration:100,curve:Curve.Linear})// 底部线Line().width(100%).height(1).backgroundColor(#5D7DB3).position({x:0,y:44}).scale({x:this.isFloatHint?1:0,centerX:0}).animation({duration:300,curve:Curve.Linear})输入内容发生变化(onChange)时输入框右侧显示“清除”图标点击该图标清空输入框内容。具体代码块如下if(this.textValue){Image($r(app.media.canel)).width(15).height(15).border({width:1,radius:15,color:#fffffff}).position({x:90%,y:50%}).translate({y:-50%}).onClick((){this.textValue})}构建界面UI。具体代码块如下EntryComponentstruct InputFloatHintPage{build(){Column(){Text(欢迎使用).fontSize(50).fontColor(#91B5A9)Column(){InputFloatHint({placeholder:请输入用户名})Blank().height(30)InputFloatHint({placeholder:请输入密码})Column(){Row(){Checkbox().select(false).selectedColor(0x39a2db).padding({left:1})Text(免密登录)Blank().width(150)Text(忘记密码).fontColor(#5C9DBA)}}.justifyContent(FlexAlign.SpaceBetween)Blank().height(50)Button(登录).width(150)}.width(90%).padding(30).backgroundColor(Color.White).border({radius:10}).shadow({radius:10,color:#5C9DBA})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}完整代码完整示例代码如下Componentstruct InputFloatHint{StateisFloatHint:booleanfalseStatetextValue:stringisEditingfalseplaceholder:stringtypeInput:InputTypeInputType.Normalbuild(){Stack(){TextInput({text:this.textValue}).width(100%).height(100%).borderRadius(0).borderColor(#86C7CC).borderWidth({bottom:1}).backgroundColor(Color.Transparent).type(this.typeInput).showPasswordIcon(false).onEditChange((isEditing){this.isEditingisEditingthis.isFloatHintthis.isEditing||this.textValue!}).onChange((value){this.textValuevaluethis.isFloatHintthis.isEditing||this.textValue!})Text(this.placeholder).enabled(false).fontColor(this.isFloatHint?#5D7DB3:#E1E4EA).position({x:0,y:this.isFloatHint?0:50%}).translate({x:15,y:-50%}).animation({duration:100,curve:Curve.Linear})Line().width(100%).height(1).backgroundColor(#5D7DB3).position({x:0,y:44}).scale({x:this.isFloatHint?1:0,centerX:0}).animation({duration:300,curve:Curve.Linear})if(this.textValue){Image($r(app.media.canel)).width(15).height(15).border({width:1,radius:15,color:#fffffff}).position({x:90%,y:50%}).translate({y:-50%}).onClick((){this.textValue})}}.width(100%).height(45)}}EntryComponentstruct InputFloatHintPage{build(){Column(){Text(欢迎使用).fontSize(50).fontColor(#91B5A9)Column(){InputFloatHint({placeholder:账号})Blank().height(30)InputFloatHint({placeholder:密码})Blank().height(50)Button(登录).width(150)}.width(90%).padding(30).backgroundColor(Color.White).border({radius:10}).shadow({radius:10,color:#5C9DBA})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}参考图形变换TextInput