鸿蒙开发—【扩展textinput组件】-编程知识

鸿蒙开发—【扩展textinput组件】

扩展鸿蒙textinput组件，支持快速扩展展性，标题文本等，文本内容双向绑定、文本组件快速复用。
扩展鸿蒙textinput组件-鸿蒙开发者社区

/*** 单选文本*/
@Component
export default  struct DiygwInput{//绑定的值@Link value:string;//未选中图标@State labelImg: Resource = $r('app.media.user');//是否文本图片@State isLabelImg: boolean = false;@State labelImgWidth: number = 20;@State labelImgHeight: number = 20;//标题文本@State label:string = '文本';//水平状态时，文本占大小@State labelWidth:number = 80;//是否标题文本换行@State isWrapLabel:boolean = false;//是否标题文本@State isLabel:boolean = true;//标题颜色@State labelColor:string = "#333333";//自动标题长度@State isLabelAuto:boolean = false;//文本字体大小@State textSize:number = 14;//选中图版本大小@State imgSize:number = 28;//每个占比@State itemWidth:string = '33%';//组件内边距@State leftRightPadding:number = 16;@State topBottomPadding:number = 6;@State placeHolder:string = '请输入'@State placeHolderColor:string = '#fff'@State inputRadius:number = 2;@State textHeight:number = 30@State isBorder:boolean = true;@State inputType:InputType = InputType.Normalbuild() {Flex({alignItems:this.isWrapLabel?ItemAlign.Start:ItemAlign.Center,direction:this.isWrapLabel?FlexDirection.Column:FlexDirection.Row,justifyContent:FlexAlign.Start}){if(this.isLabel){Row(){if(this.isLabelImg){Image(this.labelImg).width(this.labelImgWidth).height(this.labelImgHeight).margin({ left:3 }).flexShrink(0)}if(this.isLabelAuto){Text(this.label).flexShrink(0).fontColor(this.labelColor).fontSize(this.textSize).margin({bottom:this.isWrapLabel?10:0,right:10,}).textAlign(TextAlign.Start);}else{Text(this.label).fontColor(this.labelColor).width(this.isWrapLabel?'100%':this.labelWidth).fontSize(this.textSize).margin({bottom:this.isWrapLabel?10:0}).textAlign(TextAlign.Start);}}.margin({top:this.isWrapLabel?10:0})}TextInput({ placeholder: this.placeHolder,text:this.value }).fontSize(this.textSize).type(this.inputType).borderRadius(this.inputRadius).padding({ left:this.isWrapLabel?3:10 }).placeholderColor(this.placeHolderColor).backgroundColor(Color.White).fontWeight(FontWeight.Normal).fontStyle(FontStyle.Normal).fontColor(Color.Black).height(this.textSize+15).width('100%') .onChange((value: string) => {this.value = value;})}.borderWidth({bottom: this.isBorder?1:0}).borderColor({bottom: "#eee"}).borderStyle(BorderStyle.Solid).borderStyle(BorderStyle.Solid).height(this.textSize+(this.isWrapLabel?20:0)+30+this.topBottomPadding*2).padding({left:this.leftRightPadding,right:this.leftRightPadding,top:this.topBottomPadding,bottom:this.topBottomPadding})// .onAppear(() => {//   this.initCheck()// })}
}1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54.55.56.57.58.59.60.61.62.63.64.65.66.67.68.69.70.71.72.73.74.75.76.77.78.79.80.81.82.83.84.85.86.87.88.89.90.91.92.93.94.95.96.97.98.99.

快速调用代码

import {navigateTo
} from '../common/Page'
import DiygwInput from '../component/Input'
@Entry
@Component
export struct Form {@State input: string = '';@State input1: string = '';@State input2: string = '';async onPageShow() {}async aboutToAppear() {await this.onPageShow()}build() {Row() {Navigation() {Column() {Scroll() {Column() {DiygwInput({label: '标题',placeHolder: '请输入标题',value: $input}).width('100%')DiygwInput({label: '标题',placeHolder: '请输入Password',inputType: InputType.Password,value: $input1}).width('100%')DiygwInput({label: '标题',placeHolder: '请输入电话',inputType: InputType.PhoneNumber,value: $input2}).width('100%')}.alignItems(HorizontalAlign.Start)}}.height('100%').alignItems(HorizontalAlign.Start).backgroundColor('#fff')}.width('100%').height('100%').backgroundColor('#07c160').title(this.NavigationTitle()).titleMode(NavigationTitleMode.Mini).align(Alignment.Center).hideBackButton(true)}.width('100%').height('100%')}@BuilderNavigationTitle() {Column() {Text('表单').width('100%').textAlign(TextAlign.Center).height('28vp').fontSize('20fp').fontWeight(500).fontColor('#fff')}}}