HarmonyOS鸿蒙最全鸿蒙开发常用自定义组件：TextPicker_鸿蒙textpicker(2)，掌握这套精编HarmonyOS鸿蒙高级面试题解析及答案-CSDN博客

本文链接：https://blog.csdn.net/2401_84871540/article/details/138646969

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

})
.onChange((value: string, index: number) => {
this.changeCallback(value, index)
})
}
}

通过 import 引用自定义 TextPicker 组件到要使用的页面，创建 Sample 页面，里面显示一个按钮和一个文本，按钮点击打开一个对话框。

对话框里面有四个自定义 TextPicker 组件，用餐数据源是通过资源文件引用，其它数据源是通过定义变量或直接给出。

TextPicker 组件 rang 参数支持字符串数组和 Resource 资源文件，Sample 代码如下：

首先引用自定义组件：

import { CustomTextPicker } from ‘…/components/CustomTextPicker’

在自定义对话框使用：

@CustomDialog
struct Record {
private controller: CustomDialogController

private mileTimeLabels:Resource = $r(‘app.strarray.mealTime_labels’)
private foodWeights: string[] = [‘150’, ‘200’, ‘250’, ‘300’, ‘350’]

@Link mileTime: string
@Link foodWeight: string
@Link gender: string
@Link age: number

onChangeMileTimeCallback(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({ top: 33, left: 72, right: 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%’)

}
}

@Styles function cardStyle() {
.height(‘100%’)
.padding({ top: 20, right: 20, left: 20 })
.backgroundColor(Color.White)
.borderRadius(12)
}

Sample 页面完整代码如下：

import { CustomTextPicker } from ‘…/components/CustomTextPicker’

@Entry
@Component
struct SampleCustomTextPicker {

@State mileTime: string = ‘?’
@State foodWeight: string = ‘?’
@State gender: string = ‘?’
@State age: number = 16

dialogController: CustomDialogController = new CustomDialogController({
builder: Record({mileTime: $mi l e T im e, f oo d W e i g h t :$ foodWeight, gender: $g e n d er, a g e :$ 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(() => {
this.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%’)
}
}

@CustomDialog
struct Record {
private controller: CustomDialogController

private mileTimeLabels:Resource = $r(‘app.strarray.mealTime_labels’)
private foodWeights: string[] = [‘150’, ‘200’, ‘250’, ‘300’, ‘350’]

@Link mileTime: string
@Link foodWeight: string
@Link gender: string
@Link age: number

onChangeMileTimeCallback(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)
}