2024年HarmonyOS鸿蒙最新鸿蒙开发常用自定义组件:TextPicker_鸿蒙 textpic(3),腾讯、美团HarmonyOS鸿蒙面试经验分享

深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!


img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上鸿蒙开发知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

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

图片

自定义组件

组件的成员变量可以通过两种方式初始化。

本地初始化,例如:

@State counter: Counter = new Counter()

在构造组件时通过构造参数初始化,例如:

MyComponent({counter: $myCounter})

具体允许哪种方式取决于状态变量的装饰器:

图片

通过构造函数方法初始化成员变量,需要遵循如下规则:

图片

TextPicker 组件

参数:

图片

事件:

图片

Demo 介绍

创建一个新的 eTS 文件,用来编写自定义 TextPicker 组件,代码如下:

@Component
export struct CustomTextPicker {
@State select: number = 0
@State ranges: string[] | Resource = undefined

private changeCallback: (value: string, index: number) => void

build() {
TextPicker({ range: this.ranges, selected: this.select })
.layoutWeight(1)
.linearGradient({
angle: 0,
direction: GradientDirection.Top,
colors: [[0xfdfdfd, 0.0], [0xe0e0e0, 0.5], [0xfdfdfd, 1]],
})
.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:  m i l e T i m e ,   f o o d W e i g h t :   mileTime, foodWeight:  mileTime, foodWeight: foodWeight, gender:  g e n d e r ,   a g e :   gender, age:  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 })

img
img

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

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

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

的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值