了解更多开源内容请访问：开源基础软件社区https://ost.51cto.com前言来自上一篇#HarmonyOSArkUI入门培训营地—健康生活实战#健康饮食APP分解整体介绍展示健康饮食APP的效果。本帖基于常用组件TextPicker进行详细介绍，并扩展了一些自定义组件。这里，首先让我们看一下自定义组件成员变量的初始化，TextPicker组件的属性和方法。下面将展示本贴demo的效果：自定义组件组件的成员变量可以通过两种方式初始化，局部初始化，例如：@Statecounter:Counter=newCounter()是在构造参数时初始化的构造组件，例如：MyComponent({counter:$myCounter})允许使用哪种方法取决于状态变量的装饰器：通过构造函数方法初始化成员变量，需要遵循以下规则。TextPicker组件参数：事件：Demo介绍新建一个eTS文件编写自定义TextPicker组件，代码如下：@ComponentexportstructCustomTextPicker{@Stateselect:number=0@Stateranges:string[]|Resource=undefinedprivatechangeCallback:(value:string,index:number)=>voidbuild(){TextPicker({range:this.ranges,selected:this.select}).layoutWeight(1).linearGradient({angle:0},方向:GradientDirection.Top,颜色:[[0xfdfdfd,0.0],[0xe0e0e0,0.5],[0xfdfdfd,1]],}).onChange((value:string,index:number)=>{this.changeCallback(value,index)})}}将自定义TextPicker组件引用到import要使用的页面，创建一个Sample页面，里面显示一个按钮和一段文字，点击按钮打开对话框，有四个自定义TextPicker组件对话框中，餐饮数据源是通过资源文件引用的，其他数据源通过定义变量或直接提供。TextPicker组件的rang参数支持字符串数组和Resource资源文件。示例代码如下：首先引用自定义组件。import{CustomTextPicker}from'../components/CustomTextPicker'在自定义对话框中使用。@CustomDialogstructRecord{私有控制器：CustomDialogControllerprivatemileTimeLabels:Resource=$r('app.strarray.mealTime_labels')privatefoodWeights:string[]=['150','200','250','300','350']@LinkmileTime:string@LinkfoodWeight:string@Linkgender:string@Linkage:numberonChangeMileTimeCallback(value:string,index:number){console.log('xx'+value+"index:"+index)AppStorage.SetOrCreate("mileTime",value)}onChangeFoodWeightCallback(value:string,index:number){console.log('xx'+value+"index:"+index)AppStorage.SetOrCreate("复制代码foodWeight",value)}onChangeGenderCallback(value:string,index:number){console.log('xx'+value+"index:"+index)AppStorage.SetOrCreate("gender",value)}onChangeAgeCallback(value:string,index:number){console.log('xx'+value+"index:"+index)AppStorage.SetOrCreate("age",value)}build(){Column({space:10}){Row({space:5}){Text('用餐：').fontSize(20)CustomTextPicker({select:0,ranges:this.mileTimeLabels,changeCallback:this.onChangeMileTimeCallback})Text('重量：').fontSize(20)CustomTextPicker({select:1,ranges:this.foodWeights,changeCallback:this.onChangeFoodWeightCallback})}.height(140)Row({space:5}){Text('性别：').fontSize(20)CustomTextPicker({select:0,ranges:['保障','男','女'],changeCallback:this.onChangeGenderCallback})Text('年长：').fontSize(20)CustomTextPicker({select:0,ranges:['16','17','18','19','20','21','22','23','24','25','26'],changeCallback:this.onChangeAgeCallback})}.height(140)Button('完成',{type:ButtonType.Capsule,stateEffect:true}).height(43).width('100%').margin({上：33，左：72、右：72}).backgroundColor('#73CD57').onClick(()=>{this.mileTime=AppStorage.Get("mileTime")this.foodWeight=AppStorage.Get("foodWeight")this.gender=AppStorage.Get("gender")this.age=AppStorage.Get("age")this.controller.close()})}.cardStyle().height(420).width('90%')}}@StylesfunctioncardStyle(){.height('100%').padding({top:20,right:20,left:20}).backgroundColor(Color.White).borderRadius(12)}示例页面完整代码如下：从'../components/CustomTextPicker'@Entry@ComponentstructSampleCustomTextPicker{@StatemileTime:string='?'导入{CustomTextPicker}@StatefoodWeight:string='?'@State性别：string='?'@Stateage:number=16dialogController:CustomDialogController=newCustomDialogController({builder:Record({mileTime:$mileTime,foodWeight:$foodWeight,gender:$gender,age:$age}),autoCancel:true,alignment:DialogAlignment.Bottom,offset:{dx:0,dy:-20},customStyle:true})build(){Column({space:10}){Button('打开对话框',{type:ButtonType.Capsule,stateEffect:true}).height(42).width('80%').margin({top:32,bottom:32}).backgroundColor('#73CD57').onClick(()=>{这个.dialogController.open()})Text('用餐时间：'+this.mileTime).fontSize(18)Text('重量：'+this.foodWeight).fontSize(18)Row({space:10}){Text('性别：'+this.gender).fontSize(18)Text('年长：'+this.age).fontSize(18)}}.width('100%')}}@CustomDialogstructRecord{privatecontroller:CustomDialogControllerprivatemileTimeLabels:Resource=$r('app.strarray.mealTime_labels')privatefoodWeights:string[]=['150','200','250','300','350']@LinkmileTime:字符串@Link食物重量：字符串@Link性别：字符串@Link年龄：numberonChangeMileTimeCallback(value:string,index:number){console.log('xx'+value+"index:"+index)AppStorage.SetOrCreate("mileTime",value)}onChangeFoodWeightCallback(value:string,索引:number){console.log('xx'+value+"index:"+index)AppStorage.SetOrCreate("foodWeight",value)}onChangeGenderCallback(value:string,index:number){console.log('xx'+value+"index:"+index)AppStorage.SetOrCreate("gender",value)}onChangeAgeCallback(value:string,index:number){console.log('xx'+value+"index:"+index)AppStorage.SetOrCreate("age",value)}build(){Column({space:10}){Row({space:5}){Text('用餐：').fontSize(20)CustomTextPicker({select:0,ranges:this.mileTimeLabels,changeCallback:this.onChangeMileTimeCallback})Text('重量：').fontSize(20)CustomTextPicker({select:1,ranges:this.foodWeights,changeCallback:this.onChangeFoodWeightCallback})}.height(140)Row({space:5}){Text('性别：').fontSize(20)CustomTextPicker({select:0,ranges:['留','男','女'],changeCallback:this.onChangeGenderCallback})Text('年龄：').fontSize(20)CustomTextPicker({select:0,ranges:['16','17','18','19','20','21','22','23','24','25','26'],changeCallback:this.onChangeAgeCallback})}.height(140)按钮('完成',{type:ButtonType.Capsule,stateEffect:true}).height(43).width('100%').margin({top:33,left:72,right:72}).backgroundColor('#73CD57').onClick(()=>{this.mileTime=AppStorage.Get("mileTime")this.foodWeight=AppStorage.Get("foodWeight")this.gender=AppStorage.Get("gender")这个.age=AppStorage.Get("age")this.controller.close()})}.cardStyle().height(420).width('90%')}}@StylesfunctioncardStyle(){.height('100%').padding({top:20,right:20,left:20}).backgroundColor(Color.White).borderRadius(12)}总结通过这篇文章，您可以轻松学习如何自定义组件以及如何使用它们。在健康饮食app中，已经完成了一小部分内容，接下来继续一个一个完成组件，再组装一个健康饮食app。了解更多开源内容，请访问：开源基础软件社区https://ost.51cto.com。
