部分组件2

部分组件2

AlphabetIndexer

可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。

arrayValue：字母索引字符串数组，不可设置为空。

selected：初始选中项索引值，若超出索引值范围，则取默认值0

  @State strs:string[]=['A','B','C']@Builder tou(str:string){Text(str).width('100%').backgroundColor('gray')}@State selectIndex:number=0Stack(){List(){//...}.sticky(StickyStyle.Header).onScrollIndex((first)=>{this.selectIndex=first})AlphabetIndexer({arrayValue:this.strs,selected:0}).font({size:25}).selectedFont({size:30}).itemSize(60).selected(this.selectIndex)}.height('100%').width('100%')

属性

selectedColor:设置选中项文字颜色。

popupColor:设置提示弹窗文字颜色。

 AlphabetIndexer({arrayValue:this.strs,selected:0}).font({size:25}).selectedFont({size:30}).itemSize(60).selectedColor(Color.White).popupColor(Color.Black)

selectedBackgroundColor:设置选中项背景颜色。

popupBackground:设置提示弹窗背景色。

 AlphabetIndexer({arrayValue:this.strs,selected:0}).font({size:25}).selectedFont({size:30}).itemSize(60).selectedColor(Color.White).popupColor(Color.Black).selectedBackgroundColor(Color.Green).popupBackground(Color.Orange)

usingPopup:设置是否使用提示弹窗。

 .usingPopup(true)//提示框

selectedFont:设置选中项文字样式。

.selectedFont({size:30})

popupFont:设置提示弹窗字体样式。

itemSize:设置字母索引条字母区域大小

 .itemSize(60)

alignStyle:设置字母索引条弹框的对齐样式。

.alignStyle(IndexerAlign.Left)

selected:设置选中项索引值。

popupPosition:设置弹出窗口相对于索引器条上边框中点的位置。

popupSelectedColor:设置提示弹窗非字母部分选中文字色。

  .popupSelectedColor(0x00FF00)

popupUnselectedColor:设置提示弹窗非字母部分未选中文字色。

  .popupUnselectedColor(0x0000FF)

popupItemFont:设置提示弹窗非字母部分字体样式。

 .popupItemFont({ size: 30, style: FontStyle.Normal })

popupItemBackgroundColor:设置提示弹窗非字母部分背景色。

 .popupItemBackgroundColor(0xCCCCCC)

autoCollapse:设置是否使用自适应折叠模式。

   .autoCollapse(false)

popupItemBorderRadius:设置提示弹窗索引项背板圆角半径。

 .popupItemBorderRadius(24)

itemBorderRadius:设置索引项背板圆角半径。

 .itemBorderRadius(14) // 设置索引项背板圆角半径

popupBackgroundBlurStyle:设置提示弹窗的背景模糊材质。

  .popupBackgroundBlurStyle(this.customBlurStyle) // 设置提示弹窗的背景模糊材质

popupTitleBackground:设置提示弹窗首个索引项背板颜色。

  .popupTitleBackground(0xCCCCCC)

事件

onSelected:索引条选中回调，返回值为当前选中索引。

onSelect:索引条选中回调，返回值为当前选中索引。

.onSelect((index: number) => {console.info(this.value[index] + ' Selected!')})

onRequestPopupData:选中字母索引后，请求索引提示弹窗显示内容回调。

 .onRequestPopupData((index: number) => {if (this.value[index] == 'A') {return this.arrayA // 当选中A时，弹出框里面的提示文本列表显示A对应的列表arrayA，选中B、C、L时也同样} else if (this.value[index] == 'B') {return this.arrayB} else if (this.value[index] == 'C') {return this.arrayC} else if (this.value[index] == 'L') {return this.arrayL} else {return [] // 选中其余子母项时，提示文本列表为空}})

onPopupSelect:字母索引提示弹窗字符串列表选中回调。

 .onPopupSelect((index: number) => {console.info('onPopupSelected:' + index)})

Blank

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。

min:空白填充组件在容器主轴上的最小大小。

属性

color:设置空白填充的填充颜色。

@Builder test2(){Row(){Text('左边')Blank().color('red')//空白填充组件Text('右边')}.backgroundColor('#abcdef').width('100%')Column(){Text('上边')Blank().color('red')//空白填充组件Text('下边')}.height(100).width('100%').backgroundColor('#abc')
}

CalendarPicker

日历选择器组件，提供下拉日历弹窗，可以让用户选择日期。

hintRadius:底板的圆角0~16

selected:/默认选中的日期

属性

edgeAlign:设置选择器与入口组件的对齐方式。

 .edgeAlign(CalendarAlign.END)

textStyle:入口区的文本颜色、字号、字体粗细。

.textStyle({//入口区的文本颜色、字号、字体粗细。color:'red',font:{size:30,weight:700}
})

事件

onChange:选择日期时触发该事件。

now:Date=new Date('2023-08-09')
@State selectDate:Date=new Date('2023-08-09')
@Builder CalendarTest(){Text('日期文本')CalendarPicker({hintRadius:10,//底板的圆角0~16selected:this.now,//默认选中的日期})// .edgeAlign(CalendarAlign.START,{dx:100,dy:200}) //设置选择器与入口组件的对齐方式  dx:100,dy:200偏移量.textStyle({//入口区的文本颜色、字号、字体粗细。color:'red',font:{size:30,weight:700}}).onChange((val)=>{this.selectDate=val})Text('选中的日期:'+this.selectDate)
}

Checkbox

提供多选框组件，通常用于某选项的打开或关闭。

name:用于指定多选框名称。

group: 用于指定多选框所属群组的名称（即所属CheckboxGroup的名称）。

indicatorBuilder:配置多选框的选中样式为自定义组件。

Checkbox({name:'ah',group:'hobby'
})//提供多选框组件，通常用于某选项的打开或关闭。

属性

select:设置多选框是否选中。

.select(true)//默认选中

selectedColor:设置多选框选中状态颜色。

.selectedColor('red')//选中框的颜色

unselectedColor:设置多选框非选中状态边框颜色。

.unselectedColor('blue')//未选中的颜色

mark:设置多选框内部图标样式。

.mark({strokeColor:'#eee',size:20,strokeWidth:10})//设置多选框内部图标样式。对号样式

shape:设置CheckBox组件形状, 包括圆形和圆角方形。

 .shape(CheckBoxShape.ROUNDED_SQUARE)//设置CheckBox组件形状, 包括圆形和圆角方形。

样式：

  @Builder conStyle(){SymbolGlyph($r('sys.symbol.star_fill')).fontColor(['red'])}@Builder conStyle1(num:number){Text(num<=99?num.toString():'99+').fontSize(num<=99?16:10)}
Row(){Text('爱好:')Checkbox({name:'ah',group:'hobby'})//提供多选框组件，通常用于某选项的打开或关闭。.select(true)//默认选中.selectedColor('red')//选中框的颜色.unselectedColor('blue')//未选中的颜色.mark({strokeColor:'#eee',size:20,strokeWidth:10})//设置多选框内部图标样式。对号样式.shape(CheckBoxShape.ROUNDED_SQUARE)//设置CheckBox组件形状, 包括圆形和圆角方形。Checkbox({name:'ah',group:'hobby',indicatorBuilder:()=>{this.conStyle()}})Checkbox({name:'ah',group:'hobby',indicatorBuilder:()=>{this.conStyle1(100)}})
}

全选：

CheckboxGroup

group:群组名称。

Column(){Row(){Text('全选')CheckboxGroup({group:'ah'})}Row(){Checkbox({group:'ah',name:'c'})Text('唱')Checkbox({group:'ah',name:'c'})Text('跳')Checkbox({group:'ah',name:'c'})Text('rap')}
}

ContainerSpan

Text组件的子组件，用于统一管理多个Span、ImageSpan的背景色及圆角弧度。

@Builder container(){Text(){ContainerSpan(){}}.width('100%')}

属性

textBackgroundStyle:设置文本背景样式。子组件在不设置该属性时，将继承此属性值。

.textBackgroundStyle({color:'#abc',radius:5})//设置文本背景样式。子组件在不设置该属性时，将继承此属性值。

attributeModifier:设置组件的动态属性。

@Builder container(){Text(){SymbolSpan($r('sys.symbol.calendar_fill'))ContainerSpan(){//Text组件的子组件，用于统一管理多个Span、ImageSpan的背景色及圆角弧度Span('文字')ImageSpan($r('app.media.a1')).height(30)}.textBackgroundStyle({color:'#abc',radius:5})//设置文本背景样式。子组件在不设置该属性时，将继承此属性值。}.width('100%')}

DatePicker

日期选择器组件，用于根据指定日期范围创建日期滑动选择器。

start:指定选择器的起始日期。

end:指定选择器的结束日期。

selected:设置选中项的日期。

@Builder datePickerTest(){//日期选择器组件，用于根据指定日期范围创建日期滑动选择器DatePicker({start:new Date('2020-01-01'),end:new Date(),selected:new Date()})
}

属性

lunar:设置弹窗的日期是否显示农历。

.lunar(true)//设置弹窗的日期是否显示农历。

disappearTextStyle:设置所有选项中最上和最下两个选项的文本样式。

.disappearTextStyle({//设置所有选项中最上和最下两个选项的文本样式。color:'red',font:{size:10,weight:FontWeight.Bold},
})

textStyle:设置所有选项中除了最上、最下及选中项以外的文本样式。

.textStyle({//置所有选项中除了最上、最下及选中项以外的文本样式。color:'green',font:{size:20,weight:FontWeight.Bold}
})

selectedTextStyle:设置选中项的文本样式。

.selectedTextStyle({color:'blue',font:{size:30,weight:FontWeight.Bold}})//设置选中项的文本样式。

@Builder datePickerTest(){//日期选择器组件，用于根据指定日期范围创建日期滑动选择器DatePicker({start:new Date('2020-01-01'),end:new Date(),selected:new Date()}).lunar(true)//设置弹窗的日期是否显示农历。.disappearTextStyle({//设置所有选项中最上和最下两个选项的文本样式。color:'red',font:{size:10,weight:FontWeight.Bold},}).textStyle({//置所有选项中除了最上、最下及选中项以外的文本样式。color:'green',font:{size:20,weight:FontWeight.Bold}}).selectedTextStyle({color:'blue',font:{size:30,weight:FontWeight.Bold}})//设置选中项的文本样式。}

Divider

提供分隔器组件，分隔不同内容块/内容元素。

属性

vertical：设置分割线的方向。

.vertical(true)//设置分割线的方向。

color：设置分割线的颜色。

.color('red')

strokeWidth：设置分割线的宽度。

.strokeWidth(10)//设置分割线的宽度。

lineCap：设置分割线的端点样式。

.lineCap(LineCapStyle.Square)//设置分割线的端点样式。

DataPanel

数据面板组件，用于将多个数据占比情况使用占比图进行展示。

values:数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。

max:max大于0，表示数据的最大值。max小于等于0，max等于value数组各项的和，按比例显示。

type:数据面板的类型。

 @State ages:number[]=[18,19,18,19,20,33,18,24,27]@Builder DataPanelTest(){// DataPanel:数据面板组件，用于将多个数据占比情况使用占比图进行展示。DataPanel({values:this.ages,max:200,type:DataPanelType.Circle})// .width(200).closeEffect(false)//设置关闭数据占比图表旋转动效和投影效果。.valueColors([Color.Black,Color.Blue,Color.Brown,Color.Gray,Color.Green,Color.Orange,Color.Pink])//设置各数据段颜色。.trackBackgroundColor('#ccc') //设置底板颜色.strokeWidth(70)//设置圆环粗细。DataPanel({values:this.ages,max:300,type:DataPanelType.Line})}

属性

closeEffect:设置关闭数据占比图表旋转动效和投影效果

 .closeEffect(false)

valueColors:设置各数据段颜色。

.valueColors([Color.Black,Color.Blue,Color.Brown,Color.Gray,Color.Green,Color.Orange,Color.Pink])

trackBackgroundColor:设置底板颜色。

.trackBackgroundColor('#ccc')

strokeWidth:设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。

.strokeWidth(70)

trackShadow:设置投影样式。

.trackShadow({radius: this.radius,colors: this.shadowColorArray,offsetX: this.offsetX,offsetY: this.offsetY})

constructor:线性渐变颜色描述。

Gauge

数据量规图表组件，用于将数据展示为环形图表。

value: 量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值的预置。

min:当前数据段最小值。

max:当前数据段最大值。

@State num:number=50
@Builder gaugeTest() {Gauge({ value: this.num, min: 0, max: 100 }) {//...}}

属性

value:设置量规图的数据值。

 .value(this.num) //设置量规图的数据值。

startAngle:设置起始角度位置。

.startAngle(270) //设置起始角度位置。

endAngle设置终止角度位置。

.endAngle(90) //设置终止角度位置。

colors:设置量规图的颜色。

.colors(this.lColor) //设置量规图的颜色。

strokeWidth:设置环形量规图的环形厚度。

.strokeWidth(50) //设置环形量规图的环形厚度。

description:设置说明内容。

.description(this.cus(this.num)) //设置说明内容。

trackShadow:设置阴影样式。

.trackShadow({ radius: 100, offsetX: 10, offsetY: 10 })

indicator:设置指针样式。

.indicator({ icon: $r('sys.symbol.paperplane'), space: 10 })

contentModifier:定制Slider内容区的方法。

.contentModifier(new myTest(this.num,100,0))

 Gauge({ value: this.num, min: 0, max: 100 }).contentModifier(new myTest(this.num,100,0))
Row(){Button('增加').onClick(()=>{this.num+=10})Button('减少').onClick(()=>{this.num-=10})
}

LoadingProgress

用于显示加载动效的组件。

属性

color:设置加载进度条前景色。

enableLoading:设置LoadingProgress动画显示或者不显示。

@Builder loadTest(){LoadingProgress().color('red').enableLoading(true)//设置LoadingProgress动画显示或者不显示.width(100)Text('动画')
}

Marquee

跑马灯组件，用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动，不超过时不滚动。

start：控制跑马灯是否进入播放状态。

step：滚动动画文本滚动步长，当step大于Marquee的文本宽度时，取默认值。

loop：设置重复滚动的次数，小于等于零时无限循环。

fromStart：设置文本从头开始滚动或反向滚动。

src：需要滚动的文本。

属性

fontColor:设置字体颜色。

fontSize:设置字体大小。

fontWeight:设置文本的字体粗细，设置过大可能会在不同字体下有截断。

fontFamily：设置字体列表。

allowScale：设置是否允许文本缩放。

marqueeUpdateStrategy：跑马灯组件属性更新后，跑马灯的滚动策略。

@Builder marqueeTest(){// Marquee跑马灯组件，用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动，不超过时不滚动。Marquee({start:true,step:3,loop:-1,fromStart:true,src:'这是滚动的文字这是滚动的文字这是滚动的文字这是滚动的文字这是滚动的文字'+$r('app.media.a6')}).width(100).backgroundColor('#abcdef').marqueeUpdateStrategy(MarqueeUpdateStrategy.DEFAULT)//跑马灯组件属性更新后，跑马灯的滚动策略}

ImageAnimator

提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。

ImageAnimator()

属性

images:设置图片帧信息集合。不支持动态更新。

.images([{src:$r('app.media.a2'),width:200,height:200,duration:1000,left:60,top:20},{src:$r('app.media.a3'),width:200,height:200,duration:1000,left:60,top:20},{src:$r('app.media.a4'),width:200,height:200,duration:1000,left:60,top:20},{src:$r('app.media.a5'),width:200,height:200,duration:1000,left:60,top:20},{src:$r('app.media.a6'),width:200,height:200,duration:1000,left:60,top:20},{src:$r('app.media.a5'),width:200,height:200,duration:1000,left:60,top:20},{src:$r('app.media.a4'),width:200,height:200,duration:1000,left:60,top:20},{src:$r('app.media.a3'),width:200,height:200,duration:1000,left:60,top:20},{src:$r('app.media.a2'),width:200,height:200,duration:1000,left:60,top:20},{src:$r('app.media.a1'),width:200,height:200,duration:1000,left:60,top:20},
]).width('100%')

state:控制播放状态。

.state(this.state)//控制播放状态

duration:设置播放时长。当Images中任意一帧图片设置了单独的duration后，该属性设置无效。

reverse:设置播放方向。

.reverse(true)//播放的方向

fixedSize:设置图片大小是否固定为组件大小。

.fixedSize(false)//设置图片大小是否固定为组件大小。

preDecode:设置预解码的图片数量。

fillMode:设置当前播放方向下，动画开始前和结束后的状态。动画结束后的状态由fillMode和reverse属性共同决定。

.fillMode(FillMode.Backwards)

iterations:设置播放次数。

.iterations(-1)//设置播放次数。

事件

onStart：状态回调，动画开始播放时触发。

.onStart(()=>{console.log('开始了')})

onPause：状态回调，动画暂停播放时触发。

.onPause(()=>{console.log('暂停了')})

onRepeat：状态回调，动画重复播放时触发。

.onRepeat(()=>{console.log('重复播放')})

onCancel：状态回调，动画返回最初状态时触发。

.onCancel(()=>{console.log('最初状态')})

onFinish：状态回调，动画播放完成时或者停止播放时触发。

.onFinish(()=>{console.log('播放完成')})