ArkTs组件（2）

一.下拉列表组件：Select

1.接口

Select(options: Array<SelectOption>)

 SelectOption对象说明

2. 属性

（1）属性表

1.ArrowPosition枚举说明

（2）menuAlign

menuAlign(alignType: MenuAlignType, offset?: Offset)

设置下拉按钮与下拉菜单间的对齐方式。

MenuAlignType枚举说明

MenuItemConfiguration对象说明

3.事件

（1）onSelect

onSelect(callback: (index: number, value: string) => void)

下拉菜单选中某一项的回调。

class MySelect implements ContentModifier<MenuItemConfiguration>{
  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
    return wrapBuilder(sel)
  }

}

@Builder function sel(config:MenuItemConfiguration){
  Row(){
   Text(config.index+''+config.value)
    if (config.symbolIcon){
      SymbolGlyph().attributeModifier(config.symbolIcon)
        .fontSize(24).fontColor(['red'])
    }else {
      Image(config.icon).height(30)
    }
    if (config.selected){
      SymbolGlyph($r('sys.symbol.hand_thumbsup_fill'))
        .fontColor(['red'])
    }
  }
  .width('80%').height(30)
  .backgroundColor(config.selected?Color.Orange:Color.Pink)
  .onClick(()=>{
    config.triggerSelect(config.index,config.value.toString())
  })
}

@Entry
@Component
struct Component6Page {
  @State message: string = 'Hello World';

  build() {
    Column(){
      this.searchTest()
    }
    .height('100%')
    .width('100%')
  }
sym1:SymbolGlyphModifier=new SymbolGlyphModifier($r('sys.symbol.camera_portrait_efferts'))
  @Builder selectTest(){
    Select([
      {value:'北京',icon:$r('app.media.1'),symbolIcon:this.sym1},
      {value:'上海',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.star_fill'))},
      {value:'天津',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.camera_fill'))},
      {value:'石家庄',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.buzzer_detection'))},
      {value:'海南',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.car_fill'))},
      {value:'台湾',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.a_3fingers_slash'))}
    ])
      .height(20)
      .width(280)
      .selected(1) //选中
      .value('--地址--') //显示文本
      .constraintSize({minWidth:120,maxWidth:200 })
      .divider({strokeWidth:1,color:'red',startMargin:10,endMargin:10})
      .fontColor('red')
      .font({size:18,style:FontStyle.Italic,weight:900}) // 字体样式
      .selectedOptionBgColor(Color.Brown) //选中之后的颜色
      .selectedOptionFont({size:30}) //选中的字体
      .selectedOptionFontColor(Color.White) // 选中的字体颜色
      .optionBgColor(Color.Pink) // 下拉的背景颜色
      .optionFont({size:20}) // 未选中的字体
      .optionFontColor(Color.Black) // 未选中的字体颜色
      .space(10) // 文本与箭头的距离
      .arrowPosition(ArrowPosition.START) // 箭头的位置
      .menuAlign(MenuAlignType.END,{dx:10,dy:10}) //下拉菜单的位置
      .optionWidth(200) //下拉菜单的宽度
      .optionHeight(300) //下拉菜单的高度
      .menuBackgroundColor('red')// 下拉菜单的背景颜色
      .menuBackgroundBlurStyle(BlurStyle.COMPONENT_REGULAR)
      .onSelect((index,val)=>{
        console.log(`索引:${index},值:${val}`);
      })
    Select([
      {value:'北京',icon:$r('app.media.1')},
      {value:'上海',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.star_fill'))},
      {value:'天津',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.camera_fill'))},
      {value:'石家庄',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.buzzer_detection'))},
      {value:'海南',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.car_fill'))},
      {value:'台湾',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.a_3fingers_slash'))}
    ])
      .value('--地址--') //显示文本
      .menuItemContentModifier(new MySelect())
  }
}

二. 滑动条组件：Slider

通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

1.接口

Slider(options?: SliderOptions)

SliderOptions对象说明

SliderStyle枚举说明

2. 属性

1.属性表

（1）SliderBlockStyle对象说明

Slider组件滑块形状参数

SliderBlockType枚举说明

Slider组件滑块形状枚举。

（2）SliderInteraction枚举说明

用户与滑动条组件交互方式

（3）SlideRange对象说明

定义SlideRange中使用的回调类型。

• 当前仅当MIN<=from<=to<=MAX时该接口生效(MIN和MAX不依赖于其设置的值, 而取决于其实际生效的值)。
• 可只设置from或者to, 也可以同时设置from和to。
• 当接口生效, 设置的from处于紧邻的step整数倍的值之间, 则from实际取左区间step整数倍的那个值或者MIN作为修正后的值。
• 当接口生效, 设置的to处于紧邻的step整数倍的值之间, 则to实际取右区间step整数倍的那个值或者MAX作为修正后的值。
• 在from和to取修正值后, 当value是undefined或null时, 其取值与from一致; 当value是数值型, 且value <= from, 则取from; value > to, 则取to。

2.showTips

showTips(value: boolean, content?: ResourceStr)

设置滑动时是否显示气泡提示。

 3. 事件

（1）onChange

onChange(callback: (value: number, mode: SliderChangeMode) => void)

Slider拖动或点击时触发事件回调。

Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变化时触发。

当连贯动作为拖动动作时，不触发Click状态。

SliderChangeMode枚举说明

4.自定义类型

SliderConfiguration对象说明

开发者需要自定义class实现ContentModifier接口。

SliderTriggerChangeCallback对象说明

type SliderTriggerChangeCallback = (value: number, mode: SliderChangeMode) => void

定义SliderConfiguration中使用的回调类型。

// 滑块的自定义样式
class MySilder implements ContentModifier<SliderConfiguration>{
  applyContent(): WrappedBuilder<[SliderConfiguration]> {
    return wrapBuilder(sl)
  }
  showSlider:boolean=true
  sliderChangeMode:number=0
  constructor(showSlider: boolean,sliderChangeMode:number) {
    this.showSlider = showSlider
    this.sliderChangeMode = sliderChangeMode
  }

}
@Builder function sl(config:SliderConfiguration){
  Column(){
    Progress({value:config.value,type:ProgressType.Ring})
    Button('增加')
      .onClick(()=>{
        config.value+=10
        config.triggerChange(config.value,0)
      })
    Button('减少')
      .onClick(()=>{
        config.value-=10
        config.triggerChange(config.value,0)
      })
  }
}

@Entry
@Component
struct Component7Page {
  @State message: string = 'Hello World';

  build() {
    Column(){
      this.sliderTest()
    }
    .height('100%')
    .width('100%')
  }

@Builder sliderTest(){
    Slider({
      value:30, // 当前值
      min:0, // 最小值
      max:100, // 最大值
      step:10, // 步长
      style:SliderStyle.InSet, //滑块的样式
      direction:Axis.Horizontal,// 滑块的方向
      reverse:false //取反
    })
      .blockColor('red') // 滑块的颜色
      .blockSize({height:20,width:20}) //滑块的大小
      .blockBorderColor(Color.Black) //描边的颜色
      .blockBorderWidth(1) //描边的宽度
      // .blockStyle({type:SliderBlockType.IMAGE,image:$r('sys.media.ohos_ic_public_sound')})
      // .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) })
      .trackColor(Color.Green) // 滑轨的颜色
      .selectedColor(Color.Brown) // 选中的颜色
      .showSteps(true) // 是否开启刻度
      .showTips(true) // 提示进度
      .trackThickness(50) // 滑轨粗细
      .stepColor(Color.Black) // 刻度的颜色
      .trackBorderRadius(10) // 滑块的圆角半径
      .selectedBorderRadius(20) //选中圆角半径
      .stepSize(8) // 刻度的大小
      .sliderInteractionMode(SliderInteraction.SLIDE_AND_CLICK) // 设置用户与滑动条组件交互方式。
      .minResponsiveDistance(0) //滑块的最小值
      .slideRange({from:10,to:50}) // 滑块的有效区间
      .onChange((v,m)=>{
        console.log(`当前值:${v}`)
        if (m==0) {
          console.log('按下')
        }else if(m==1){
          console.log('移动')
        }else if(m==2){
          console.log('弹起')
        }else if (m==3){
          console.log('点击')
        }
      })

    Slider({
      value:30, // 当前值
      min:0, // 最小值
      max:100, // 最大值
      step:10, // 步长
    })
      .contentModifier(new MySilder(true,0))
  }
}

三. 行内文本：span

作为Text、ContainerSpan组件的子组件，用于显示行内文本的组件。

该组件从API Version 10开始支持继承父组件Text的属性，即如果子组件未设置属性且父组件设置属性，则继承父组件设置的属性。支持继承的属性仅包括：fontColor、fontSize、fontStyle、fontWeight、decoration、letterSpacing、textCase、fontfamily、textShadow。

1.接口

Span(value: string | Resource)

2.属性

TextBackgroundStyle对象说明

 @Builder spanTest(){
    Text(){
      Span('文本子组件1')
        .decoration({style:TextDecorationStyle.DOUBLE,type:TextDecorationType.Underline,color:'red'})//下划线样式
      Span('文本子组件2')
        .letterSpacing(10) // 字间距
      Span('AbcDef')
        .textCase(TextCase.LowerCase) //文本大小写
        .textBackgroundStyle({ color:Color.Orange ,radius:0})
        .baselineOffset(LengthMetrics.vp(-20))
      Span('文本子组件4')
        .lineHeight(40) // 行高
        .font({size:20,style:FontStyle.Italic})
        .fontColor('red')
        .textShadow({radius:10,offsetX:20,offsetY:20,color:'green',
        })
    }
  }

四.步骤导航器组件：Stepper

适用于引导用户按照步骤完成任务的导航场景。

1.接口

Stepper(value?: { index?: number })

2. 事件

（1）onFinish

onFinish(callback: () => void)

步骤导航器最后一个StepperItem的nextLabel被点击时，并且ItemState属性为Normal时，触发该回调。

（2）onSkip

onSkip(callback: () => void)

当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。

（3）onChange

onChange(callback: (prevIndex: number, index: number) => void)

点击当前StepperItem的prevLabel进行步骤切换时触发该回调；或点击当前StepperItem的nextLabel，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。

（4）onNext

onNext(callback: (index: number, pendingIndex: number) => void)

点击StepperItem的nextLabel切换下一步骤时，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。

（5）onPrevious

onPrevious(callback: (index: number, pendingIndex: number) => void)

点击StepperItem的prevLabel切换上一步骤时触发该回调。

@State selectIndex:number=0
  @Builder stepperTest(){
    Stepper({index:this.selectIndex}){
      StepperItem(){
        Column(){

        }
        .height('90%')
        .width('100%')
        .backgroundColor(Color.Gray)
      }
      .nextLabel('下一页')
      // .status(ItemState.Normal)
      StepperItem(){
        Column(){

        }
        .height('100%')
        .width('100%')
        .backgroundColor(Color.Blue)
      }
      .prevLabel('上一页')
      // .nextLabel('下一页')
      .status(ItemState.Skip)
      StepperItem(){
        Column(){

        }
        .height('100%')
        .width('100%')
        .backgroundColor(Color.Green)
      }
      .prevLabel('上一页')
      .nextLabel('全部完成')
    }
    .onFinish(()=>{
      console.log('完成注册')
    })
    .onSkip(()=>{
      console.log('页面跳过')
      this.selectIndex=2
    })
    .onNext((index,pendingIndex)=>{
      console.log(`当前是第:${index+1}页,下一页:${pendingIndex+1}页`)
    })
    .onPrevious((index,pendingIndex)=>{
      console.log(`当前是第:${index+1}页,上一页:${pendingIndex+1}页`)
    })
  }

五. 图标小符号组件：SymbolGlyph

（1）接口

SymbolGlyph(value?: Resource)

$r('sys.symbol.ohos_wifi')中引用的资源为系统预置，SymbolGlyph仅支持系统预置的symbol资源名，引用非symbol资源将显示异常。

（2）属性

1.属性表

2.symbolEffect

symbolEffect(symbolEffect: SymbolEffect, isActive?: boolean)

设置SymbolGlyph组件动效策略及播放状态。

3.symbolEffect

symbolEffect(symbolEffect: SymbolEffect, triggerValue?: number)

设置SymbolGlyph组件动效策略及播放触发器。

动效属性，仅支持使用effectStrategy属性或单个symbolEffect属性，不支持多种动效属性混合使用。

（3）SymbolEffect对象

定义SymbolEffect类。

constructor

constructor()

SymbolEffect的构造函数，无动效。

1.ScaleSymbolEffect对象说明

ScaleSymbolEffect继承自父类SymbolEffect。

constructor

constructor(scope?: EffectScope, direction?: EffectDirection)

ScaleSymbolEffect的构造函数，缩放动效。

2.HierarchicalSymbolEffect对象说明

HierarchicalSymbolEffect继承自父类SymbolEffect。

constructor

constructor(fillStyle?: EffectFillStyle)

HierarchicalSymbolEffect的构造函数，层级动效。

3.AppearSymbolEffect对象说明

AppearSymbolEffect继承自父类SymbolEffect。

constructor

constructor(scope?: EffectScope)

AppearSymbolEffect的构造函数，出现动效。

4.DisappearSymbolEffect对象说明

DisappearSymbolEffect继承自父类SymbolEffect。

constructor

constructor(scope?: EffectScope)

DisappearSymbolEffect的构造函数，消失动效。

5.BounceSymbolEffect对象说明

BounceSymbolEffect继承自父类SymbolEffect。

constructor

constructor(scope?: EffectScope, direction?: EffectDirection)

BounceSymbolEffect的构造函数，弹跳动效。

 6.ReplaceSymbolEffect对象说明

ReplaceSymbolEffect继承自父类SymbolEffect。

constructor

constructor(scope?: EffectScope)

ReplaceSymbolEffect的构造函数，替换动效。

7. PulseSymbolEffect对象说明

constructor

constructor()

PulseSymbolEffect的构造函数，脉冲动效。

1.EffectDirection枚举说明

2.EffectScope枚举说明

3.EffectFillStyle枚举说明

4.SymbolEffectStrategy枚举说明

动效类型的枚举值。设置动效后启动即生效，无需触发。

5. SymbolRenderingStrategy枚举说明

渲染模式的枚举值

@State eff:boolean=false
  @Builder symbolGlyphTest(){
    SymbolGlyph($r('sys.symbol.air_conditioning_purification_open_fill'))
      .fontSize(30)
      .fontWeight(700)
      .fontColor(['red'])
    SymbolGlyph($r('sys.symbol.air_conditioning_purification_open_fill'))
      .fontSize(30)
      .fontWeight(700)
      .fontColor(['red','blue'])
      .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) //渲染策略
    SymbolGlyph($r('sys.symbol.air_conditioning_purification_open_fill'))
      .fontSize(30)
      .fontWeight(700)
      .fontColor(['red'])
      .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) //渲染策略

    SymbolGlyph($r('sys.symbol.wifi'))
      .fontSize(30)
      // .effectStrategy(SymbolEffectStrategy.HIERARCHICAL) //动效策略
      // .symbolEffect(SymbolEffectStrategy.SCALE,3) //动效策略
      //.symbolEffect(new ScaleSymbolEffect(EffectScope.LAYER,EffectDirection.DOWN),this.eff)
      .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE),this.eff)
    Button('播放动效')
      .onClick(()=>{
        this.eff=true
        setTimeout(()=>{
          this.eff=false
        },500)
      })

  }

六. 多行文本输入框组件：TextArea

当输入的文本内容超过组件宽度时会自动换行显示。

高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。