ArkTs组件（2）

一.下拉列表组件：Select

1.接口

Select(options: Array<SelectOption>)

参数名	类型	必填	说明
options	Array<SelectOption>	是	设置下拉选项。

 SelectOption对象说明

名称	类型	必填	说明
value	ResourceStr	是	下拉选项内容。
icon	ResourceStr	否	下拉选项图片。
symbolIcon	SymbolGlyphModifier	否	下拉选项Symbol图片。 symbolIcon优先级高于icon。

2. 属性

（1）属性表

参数名	类型	必填	说明
selected	number|Resource	是	下拉菜单初始选项的索引
value	ResourceaStr	是	下拉按钮本身的文本内容。
controlSize	ControlSize	是	Select组件的尺寸。 默认值:ControlSize.NORMAL
menuItemContentModiffier	ContentModifier<MenuItemConfiguration>	是	在Select组件上，定制下拉菜单项内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。
divider	Optional<DividerOptions> | null	是	1.设置DividerOptions，则按设置的样式显示分割线。 2.设置为null时，不显示分割线。 3.strokeWidth设置过宽时，会覆盖文字。分割线会从每一个Item底部开始，同时向上向下画分割线。 4.startMargin和endMargin的默认值与不设置divider属性时的分割线样式保持一致。startMargin和endMargin的和与optionWidth的值相等时，不显示分割线。 startMargin和endMargin的和超过optionWidth的值时，按照默认样式显示分割线。
font	Font	是	下拉按钮本身的文本样式。
FontColor	ResourceColor	是	下拉按钮本身的文本颜色。
selectedOptionBgColor	ResourceColor	是	下拉菜单选中项的背景色。
selectedOptionFont	Font	是	下拉菜单选中项的文本样式。
selectedOptionFontColor	ResourceColor	是	下拉菜单选中项的文本颜色
optionBgColor	ResourceColor	是	下拉菜单项的背景色。
optionFont	Font	是	下拉菜单项的文本样式。
optionFontColor	ResourceColor	是	下拉菜单项的文本颜色。
space	Length	是	下拉菜单项的文本与箭头之间的间距。 默认值：8
arrowPosition	ArrowPosition	是	下拉菜单项的文本与箭头之间的对齐方式。 默认值：ArrowPosition.END
optionWidth	Dimension | OptionWidthMode	是	下拉菜单项的宽度。
optionHeight	Dimension	是	下拉菜单显示的最大高度。
menuBackgroundColor	ResourceColor	是	下拉菜单的背景色。
menuBackgroundBlurStyle	BlurStyle	是	下拉菜单的背景模糊材质。 默认值：BlurStyle.COMPONENT_ULTRA_THICK

1.ArrowPosition枚举说明

名称	说明
END10+	文字在前，箭头在后。
START10+	箭头在前，文字在后。

（2）menuAlign

menuAlign(alignType: MenuAlignType, offset?: Offset)

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

参数名	类型	必填	说明
alignType	MenuAlignType	是	对齐方式类型。 默认值：MenuAlignType.START
offset	Offset	否	按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。 默认值：{dx: 0, dy: 0}

MenuAlignType枚举说明

名称	说明
START	按照语言方向起始端对齐。
CENTER	居中对齐。
END	按照语言方向末端对齐。

MenuItemConfiguration对象说明

名称	类型	必填	说明
value	ResourceStr	是	下拉菜单项的文本内容。
icon	ResourceStr	否	下拉菜单项的图片内容。
symbolIcon	SymbolGlyphModifier	否	下拉选项Symbol图片内容。
selected	boolean	是	下拉菜单项是否被选中。 默认值：false
index	number	是	下拉菜单项的索引。
triggerSelect	(index: number, value: string) :void	是	下拉菜单选中某一项的回调函数。 index: 选中菜单项的索引。 value: 选中菜单项的文本。 说明: index会赋值给事件onSelect回调中的索引参数； value会返回给Select组件显示，同时会赋值给事件onSelect回调中的文本参数。

3.事件

（1）onSelect

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

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

参数名	类型	必填	说明
index	number	是	选中项的索引。
value	string	是	选中项的值。

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)

参数名	类型	必填	说明
options	SliderOptions	否	配置滑动条的参数。

SliderOptions对象说明

名称	类型	必填	说明
value	number	否	当前进度值。 默认值：与参数min的取值一致。 从API version 10开始，该参数支持$$双向绑定变量。
min	number	否	设置最小值。 默认值：0
max	number	否	设置最大值。 默认值：100 说明： min >= max异常情况，min取默认值0，max取默认值100。 value不在[min, max]范围之内，取min或者max，靠近min取min，靠近max取max。
step	number	否	设置Slider滑动步长。 默认值：1 取值范围：[0.01, max - min] 说明： 若设置的step值小于0或大于max值时，则按默认值显示。
style	SliderStyle	否	设置Slider的滑块与滑轨显示样式。 默认值：SliderStyle.OutSet
direction	Axis	否	设置滑动条滑动方向为水平或竖直方向。 默认值：Axis.Horizontal
reverse	boolean	否	设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。 默认值：false

SliderStyle枚举说明

名称	说明
OutSet	滑块在滑轨上。
InSet	滑块在滑轨内。
NONE	无滑块

2. 属性

1.属性表

参数名	类型	必填	说明
blockColor	ResourceColor	是	滑块的颜色
trackColor	ResourceColor | LinearGradient	是	滑轨的背景颜色。 说明： 设置渐变色时，若颜色断点颜色值为非法值或者渐变色断点为空时，渐变色不起效果。
selectedColor	ResourceColor	是	滑轨的已滑动部分颜色。
showSteps	boolean	是	当前是否显示步长刻度值。 默认值：false
trackThickness	Length	是	滑轨的粗细。
blockBorderColor	ResourceColor	是	滑块描边颜色。
blockBorderWidth	Length	是	滑块描边粗细。
stepColor	ResourceColor	是	刻度颜色。
trackBorderRadius	Length	是	底板圆角半径。
selectedBorderRadius	Dimension	是	已选择部分圆角半径。
blockSize	SizeOption	是	滑块大小。
blockStyle	SliderBlockStyle	是	滑块形状参数。 默认值：SliderBlockType.DEFAULT，使用圆形滑块。
stepSize	Length	是	刻度大小（直径）
minLabel	string	是	最小值
maxLabel	string	是	最小值
sliderInteracetionMode	SliderInteraction	是	用户与滑动条组件交互方式。 默认值：SliderInteraction.SLIDE_AND_CLICK。
minResponsiveDistance	number	是	设置滑动响应的最小距离，滑动超过此距离后才响应使滑块滑动。 说明： 单位与参数min和max一致。 当value小于0、大于MAX-MIN或非法值时，取默认值。 默认值：0。
contentModiffer	ContentModifier<SliderConfiguration>	是	在Slider组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。
slideRange	SlideRange	是	设置有效滑动区间

（1）SliderBlockStyle对象说明

Slider组件滑块形状参数

名称	类型	必填	说明
type	SliderBlockType	是	设置滑块形状。 默认值：SliderBlockType.DEFAULT，使用圆形滑块。
image	ResourceStr	否	设置滑块图片资源。 图片显示区域大小由blockSize属性控制，请勿输入尺寸过大的图片。
shape	Circle | Ellipse | Path | Rect	否	设置滑块使用的自定义形状。

SliderBlockType枚举说明

Slider组件滑块形状枚举。

名称	说明
DEFAULT	使用默认滑块（圆形）。
IMAGE	使用图片资源作为滑块。
SHAPE	使用自定义形状作为滑块。

（2）SliderInteraction枚举说明

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

名称	说明
SLIDE_AND_CLICK	用户可拖拽滑块或者点击滑轨使滑块移动，鼠标或手指按下即发生移动。
SLIDE_ONLY	不允许用户通过点击滑轨使滑块移动。
SLIDE_AND_CLICK_UP	用户可拖拽滑块或者点击滑轨使滑块移动，鼠标或手指抬起时，若与屏幕按压位置一致，则触发移动。

（3）SlideRange对象说明

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

名称	类型	必填	说明
from	number	否	设置有效滑动区间的开始。
to	number	否	设置有效滑动区间的结束。

• 当前仅当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)

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

参数名	类型	必填	说明
value	boolean	是	滑动时是否显示气泡提示。 默认值：false
content	ResourceStr	否	气泡提示的文本内容，默认显示当前百分比。

 3. 事件

（1）onChange

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

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

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

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

参数名	类型	必填	说明
value	number	是	当前滑动进度值，变化范围为对应步长steps数组。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。
mode	SliderChangeMode	是	事件触发的相关状态值。

SliderChangeMode枚举说明

名称	值	说明
Begin	0	手势/鼠标接触或者按下滑块。
Moving	1	正在拖动滑块过程中。
End	2	手势/鼠标离开滑块。 说明： 异常值恢复成默认值时触发，即value设置小于min或大于max。
Click8+	3	点击滑动条使滑块位置移动。

4.自定义类型

SliderConfiguration对象说明

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

名称	类型	只读	可选	说明
value	number	否	否	当前进度值。
min	number	否	否	最小值。
max	number	否	否	最大值。
step	number	否	否	Slider滑动步长。
triggerChange	SliderTriggerChangeCallback	否	否	触发Slider变化。

SliderTriggerChangeCallback对象说明

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

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

参数名	类型	只读	可选	说明
value	number	否	否	设置当前的进度值。
mode	SliderChangeMode	否	否	设置事件触发的相关状态值。

// 滑块的自定义样式
class MySilder implements ContentModifier<SliderConfiguration>{applyContent(): WrappedBuilder<[SliderConfiguration]> {return wrapBuilder(sl)}showSlider:boolean=truesliderChangeMode:number=0constructor(showSlider: boolean,sliderChangeMode:number) {this.showSlider = showSliderthis.sliderChangeMode = sliderChangeMode}}
@Builder function sl(config:SliderConfiguration){Column(){Progress({value:config.value,type:ProgressType.Ring})Button('增加').onClick(()=>{config.value+=10config.triggerChange(config.value,0)})Button('减少').onClick(()=>{config.value-=10config.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)

参数名	类型	必填	说明
value	string | Resource	是	文本内容。

2.属性

参数名	类型	必填	说明
decoration	DecorationStyleInterface	是	文本装饰线样式对象
letterSpacing	number|string	是	文本字符间距。
textCase	TextCase	是	文本大小写。 默认值：TextCase.Normal
fontColor	ResourceColor	是	字体颜色
fontSize	number|string|Resource	是	字体大小
fontStyle	FontStyle	是	字体样式。 默认值：FontStyle.Normal
fontWeight	number|FontWeight|string	是	文本的字体粗细
fontFamily	string|Resource	是	字体列表
lineHeight	Length	是	文本行高
font	Font	是	文本样式
textShadow	ShadowOptions | Array<ShadowOptions>	是	文字阴影效果。
textBackgroundStyle	TextBackgroundStyle	是	背景样式。
basslineOffset	LengthMetrics	是	设置Span基线的偏移量，设置该值为百分比时，按默认值显示。 正数内容向上偏移，负数向下偏移。 默认值：0 在ImageSpan中，设置为非0时会导致设置verticalAlign失效。

TextBackgroundStyle对象说明

名称	类型	必填	说明
color	ResourceColor	否	文本背景色。
radius	Dimension | BorderRadiuses	否	文本背景圆角。

 @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 })

参数名	类型	必填	说明
value	{ index?: number }	否	设置步骤导航器当前显示StepperItem的索引值。 默认值：0 从API version 10开始，该参数支持$$双向绑定变量。

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时，触发该回调。

参数名	类型	必填	说明
prevIndex	number	是	切换前的步骤页索引值。
index	number	是	切换后的步骤页（前一页或者下一页）索引值。

（4）onNext

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

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

参数名	类型	必填	说明
index	number	是	当前步骤页索引值。
pendingIndex	number	是	下一步骤页索引值。

（5）onPrevious

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

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

参数名	类型	必填	说明
index	number	是	当前步骤页索引值。
pendingIndex	number	是	上一步骤页索引值。

@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)

参数名	类型	必填	说明
value	Resource	否	SymbolGlyph组件的资源名,如 $r('sys.symbol.ohos_wifi')。

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

（2）属性

1.属性表

参数名	类型	必填	说明
fontColor	Array<ResourceColor>	是	SymbolGlyph组件颜色。 默认值：不同渲染策略下默认值不同。
fontSize	number|string|Resource	是	SymbolGlyph组件大小。
fontWeight	number|FontWeight|string	是	SymbolGlyph组件粗细。 默认值：FontWeight.Normal
renderingStrategy	SymbolRenderingStrategy	是	SymbolGlyph组件渲染策略。 默认值：SymbolRenderingStrategy.SINGLE
effectStrategy	SymbolEffectStrategy	是	SymbolGlyph组件动效策略。 默认值：SymbolEffectStrategy.NONE

2.symbolEffect

symbolEffect(symbolEffect: SymbolEffect, isActive?: boolean)

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

参数名	类型	必填	说明
symbolEffect	SymbolEffect	是	SymbolGlyph组件动效策略。 默认值：SymbolEffect
isActive	boolean	否	SymbolGlyph组件动效播放状态。 默认值：false

3.symbolEffect

symbolEffect(symbolEffect: SymbolEffect, triggerValue?: number)

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

参数名	类型	必填	说明
symbolEffect	SymbolEffect	是	SymbolGlyph组件动效策略。 默认值：SymbolEffect
triggerValue	number	否	SymbolGlyph组件动效播放触发器，在数值变更时触发动效。 如果首次不希望触发动效，设置-1。

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

（3）SymbolEffect对象

定义SymbolEffect类。

constructor

constructor()

SymbolEffect的构造函数，无动效。

1.ScaleSymbolEffect对象说明

ScaleSymbolEffect继承自父类SymbolEffect。

名称	类型	必填	说明
scope	EffectScope	否	动效范围。 默认值：EffectScope.LAYER
direction	EffectDirection	否	动效方向。 默认值：EffectDirection.DOWN

constructor

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

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

参数名	类型	必填	说明
scope	EffectScope	否	动效范围。 默认值：EffectScope.LAYER
direction	EffectDirection	否	动效方向。 默认值：EffectDirection.DOWN

2.HierarchicalSymbolEffect对象说明

HierarchicalSymbolEffect继承自父类SymbolEffect。

名称	类型	必填	说明
fillStyle	EffectFillStyle	否	动效模式。 默认值：EffectFillStyle.CUMULATIVE

constructor

constructor(fillStyle?: EffectFillStyle)

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

参数名	类型	必填	说明
fillStyle	EffectFillStyle	否	动效模式。 默认值：EffectFillStyle.CUMULATIVE

3.AppearSymbolEffect对象说明

AppearSymbolEffect继承自父类SymbolEffect。

名称	类型	必填	说明
scope	EffectScope	否	动效范围。 默认值：EffectScope.LAYER

constructor

constructor(scope?: EffectScope)

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

参数名	类型	必填	说明
scope	EffectScope	否	动效范围。 默认值：EffectScope.LAYER

4.DisappearSymbolEffect对象说明

DisappearSymbolEffect继承自父类SymbolEffect。

名称	类型	必填	说明
scope	EffectScope	否	动效范围。 默认值：EffectScope.LAYER

constructor

constructor(scope?: EffectScope)

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

参数名	类型	必填	说明
scope	EffectScope	否	动效范围。 默认值：EffectScope.LAYER

5.BounceSymbolEffect对象说明

BounceSymbolEffect继承自父类SymbolEffect。

名称	类型	必填	说明
scope	EffectScope	否	动效范围。 默认值：EffectScope.LAYER
direction	EffectDirection	否	动效方向。 默认值：EffectDirection.DOWN

constructor

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

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

参数名	类型	必填	说明
scope	EffectScope	否	动效范围。 默认值：EffectScope.LAYER
direction	EffectDirection	否	动效方向。 默认值：EffectDirection.DOWN

 6.ReplaceSymbolEffect对象说明

ReplaceSymbolEffect继承自父类SymbolEffect。

名称	类型	必填	说明
scope	EffectScope	否	动效范围。 默认值：EffectScope.LAYER

constructor

constructor(scope?: EffectScope)

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

参数名	类型	必填	说明
scope	EffectScope	否	动效范围。 默认值：EffectScope.LAYER

7. PulseSymbolEffect对象说明

constructor

constructor()

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

1.EffectDirection枚举说明

名称	值	说明
DOWN	0	图标缩小再复原。
UP	1	图标放大再复原。

2.EffectScope枚举说明

名称	值	说明
LAYER	0	分层模式。
WHOLE	1	整体模式。

3.EffectFillStyle枚举说明

名称	值	说明
CUMULATIVE	0	累加模式。
ITERATIVE	1	迭代模式。

4.SymbolEffectStrategy枚举说明

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

名称	说明
NONE	无动效（默认值）。
SCALE	整体缩放动效。
HIERARCHICAL	层级动效。

5. SymbolRenderingStrategy枚举说明

渲染模式的枚举值

名称	说明
SINGLE	单色模式（默认值）。 默认为黑色，可以设置一个颜色。 当用户设置多个颜色时，仅生效第一个颜色。
MULTIPLE_COLOR	多色模式。 最多可以设置三个颜色。当用户只设置一个颜色时，修改第一层颜色，其他颜色保持默认颜色。 颜色设置顺序与图标分层顺序匹配，当颜色数量大于图标分层时，多余的颜色不生效。 仅支持设置颜色，不透明度设置不生效。
MULTIPLE_OPACITY	分层模式。 默认为黑色，可以设置一个颜色。当用户设置多个颜色时，仅生效第一个颜色。 不透明度与图层相关，第一层100%、第二层50%、第三层20%。

@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=truesetTimeout(()=>{this.eff=false},500)})}

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

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

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