文字选择器

文字选择器一般用于省市联动

效果

单列效果

多列效果

子组件

无

参数

range

滑动的范围

selected

选中的序号

属性

defaultPickerItemHeight

每个选项的高度

disappearTextStyle

第一个和最后一个的样式

textStyle

普通文本样式

selectedTextStyle

选中的样式

selectedIndex

选中的索引

canLoop

是否循环

divider

分割线样式

事件

onChange

.onChange((value:string|string[],index:number|number[])=>{
    console.info('Picker item changed, value: ' + value + ', index: ' + index);
})

示例代码

单列

@Entry
@Component
struct Index7 {
    private select:number = 1;
    private fruits:string[] = ["天津","北京","上海","杭州","无锡"]

    build() {
       Column(){
           TextPicker({range:this.fruits,selected: this.select})
               .width('100%')
               // 设置 每个选项的高度
               .defaultPickerItemHeight(45)
               // 第一个 和最后一个 样式
               .disappearTextStyle({
                   color: Color.Red,
                   font: {
                       size: '18fp',
                       weight: FontWeight.Bold
                   }
               })
                // 普通文本
               .textStyle({
                   color: Color.Green,
                   font: {
                       size: '18fp',
                       weight: FontWeight.Bold
                   }
               })
                // 选中样式
               .selectedTextStyle({
                   color: Color.Brown,
                   font: {
                       size: '18fp',
                       weight: FontWeight.Bold
                   }
               })
               // 能否自动循环
               .canLoop(false)
               // 分割线
               .divider({
                   strokeWidth: '4px',
                   startMargin: 0,
                   endMargin: 0,
                   color: 'red'
               })
               // 改变的时候调用的方法
               .onChange((value:string|string[],index:number|number[])=>{
                   console.info('Picker item changed, value: ' + value + ', index: ' + index);
               })
       }
    }
}

多列

• 注意数据格式

// xxx.ets
class bottom {
    bottom:number = 50;
}
let bott:bottom = new bottom();
@Entry
@Component
struct Index7 {
    private select: number = 1;
    private apfruits: string[] = ['apple1', 'apple2', 'apple3', 'apple4'];
    private orfruits: string[] = ['orange1', 'orange2', 'orange3', 'orange4'];
    private pefruits: string[] = ['peach1', 'peach2', 'peach3', 'peach4'];
    private multi: string[][] = [this.apfruits, this.orfruits, this.pefruits];
    private cascade: TextCascadePickerRangeContent[] = [
        {
            text: '辽宁省',
            children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] },
                { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }]
        },
        {
            text: '吉林省',
            children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] },
                { text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }]
        },
        {
            text: '黑龙江省',
            children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] },
                { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }]
        }
    ]

    build() {
        Column() {
            TextPicker({ range: this.apfruits, selected: this.select })
                .onChange((value: string | string[], index: number | number[]) => {
                    console.info('Picker item changed, value: ' + value + ', index: ' + index);
                })
          .margin(bott)


            TextPicker({ range: this.multi })
                .onChange((value: string | string[], index: number | number[]) => {
                    console.info('TextPicker 多列:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index));
                })
             .margin(bott)


            TextPicker({ range: this.cascade })
                .onChange((value: string | string[], index: number | number[]) => {
                    console.info('TextPicker 多列联动:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index));
                })

        }
    }
}