鸿蒙中 选择器TextPicker组件

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、TextPicker基础属性

1. 基本用法

@Component
struct TextPickerExample {
@State selectedIndex: number = 2;
private fruits: string[] = ['苹果', '香蕉', '橙子', '葡萄', '西瓜'];

build() {
Column() {
TextPicker({
range: this.fruits,
selected: this.selectedIndex
})
.onChange((value: string, index: number) => {
this.selectedIndex = index;
console.log('当前选择:', value, '索引:', index);
})

Text(`当前选择: ${this.fruits[this.selectedIndex]}`)
.margin({ top: 20 })
}
.width('100%')
.padding(20)
}
}

2. 主要属性API

二、TextPicker样式定制

1. 自定义文本样式

@Component
struct StyledTextPicker {
@State selectedIndex: number = 0;
private cities: string[] = ['北京', '上海', '广州', '深圳', '杭州'];

build() {
Column() {
TextPicker({
range: this.cities,
selected: this.selectedIndex
})
.textStyle({
fontSize: 16,
color: Color.Black
})
.selectedTextStyle({
fontSize: 20,
color: Color.Blue,
fontWeight: FontWeight.Bold
})
.disappearTextStyle({
fontSize: 14,
color: Color.Gray,
opacity: 0.6
})
.onChange((value: string, index: number) => {
this.selectedIndex = index;
})
}
.width('100%')
.padding(20)
}
}

2. 设置选项高度和数量

@Component
struct CustomSizeTextPicker {
@State selectedIndex: number = 0;
private colors: string[] = ['红色', '橙色', '黄色', '绿色', '蓝色', '靛蓝', '紫色'];

build() {
Column() {
TextPicker({
range: this.colors,
selected: this.selectedIndex
})
.defaultPickerItemHeight(60) // 设置选项高度
.itemSize(3) // 设置可见选项数量
.onChange((value: string, index: number) => {
this.selectedIndex = index;
})

Text(`当前颜色: ${this.colors[this.selectedIndex]}`)
.fontColor(this.getColor(this.colors[this.selectedIndex]))
.margin({ top: 20 })
}
.width('100%')
.padding(20)
}

private getColor(colorName: string): Color {
switch(colorName) {
case '红色': return Color.Red;
case '橙色': return Color.Orange;
case '黄色': return Color.Yellow;
case '绿色': return Color.Green;
case '蓝色': return Color.Blue;
case '靛蓝': return 0x4B0082;
case '紫色': return 0x800080;
default: return Color.Black;
}
}
}

三、多列TextPicker

1. 多列联动选择器

@Component
struct MultiTextPicker {
@State provinceIndex: number = 0;
@State cityIndex: number = 0;

private provinces: string[] = ['广东省', '浙江省', '江苏省'];
private cities: string[][] = [
['广州', '深圳', '珠海', '东莞'],
['杭州', '宁波', '温州', '绍兴'],
['南京', '苏州', '无锡', '常州']
];

build() {
Column({ space: 30 }) {
// 省份选择
Text('选择省份:')
.fontSize(16)
.width('100%')

TextPicker({
range: this.provinces,
selected: this.provinceIndex
})
.onChange((value: string, index: number) => {
this.provinceIndex = index;
this.cityIndex = 0; // 重置城市选择
})

// 城市选择
Text('选择城市:')
.fontSize(16)
.width('100%')

TextPicker({
range: this.cities[this.provinceIndex],
selected: this.cityIndex
})
.onChange((value: string, index: number) => {
this.cityIndex = index;
})

Text(`您选择: ${this.provinces[this.provinceIndex]} ${this.cities[this.provinceIndex][this.cityIndex]}`)
.margin({ top: 20 })
}
.width('100%')
.padding(20)
}
}

2. 日期选择器实现

@Component
struct DatePickerExample {
@State yearIndex: number = 5;
@State monthIndex: number = 6;
@State dayIndex: number = 15;

private years: string[] = Array.from({length: 20}, (_, i) => `${2000 + i}年`);
private months: string[] = Array.from({length: 12}, (_, i) => `${i + 1}月`);
private days: string[] = Array.from({length: 31}, (_, i) => `${i + 1}日`);

build() {
Column({ space: 10 }) {
Text('选择日期')
.fontSize(18)
.margin({ bottom: 20 })

Row({ space: 10 }) {
// 年选择
TextPicker({
range: this.years,
selected: this.yearIndex
})
.onChange((value: string, index: number) => {
this.yearIndex = index;
})

// 月选择
TextPicker({
range: this.months,
selected: this.monthIndex
})
.onChange((value: string, index: number) => {
this.monthIndex = index;
})

// 日选择
TextPicker({
range: this.days,
selected: this.dayIndex
})
.onChange((value: string, index: number) => {
this.dayIndex = index;
})
}

Text(`您选择的日期是: ${this.years[this.yearIndex]}${this.months[this.monthIndex]}${this.days[this.dayIndex]}`)
.margin({ top: 30 })
}
.width('100%')
.padding(20)
}
}