ArKTS基础组件

一.AlphabetIndexer

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

子组件

color:设置文字颜色。

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

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

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

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

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

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

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

font:设置字母索引条默认字体样式

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

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

 selected8+:设置选中项索引值。

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

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

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

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

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

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

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

 itemBorderRadius12+:设置索引项背板圆角半径

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

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

 enableHapticFeedback12+:

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

onSelect8+:索引条选中回调，返回值为当前选中索引

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

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

示例代码:

实现样式:电话薄首字母选项

    Stack(){List(){ForEach(this.txls,(txl:Txl,index)=>{ListItemGroup({header:this.tou(txl.key)}){ForEach(txl.lxr,(lxr:Lxr,i)=>{ListItem(){Row(){Image(lxr.tImg).height(30).borderRadius(100)Text(lxr.names).fontSize(18)}.width('100%').backgroundColor(i%2==0?'#abc':'#fcf')}})}})}.sticky(StickyStyle.Header).onScrollIndex((first)=>{this.selectIndex=first})AlphabetIndexer({arrayValue:this.strs,selected:0}).selectedFont({size:30}).itemSize(60).font({size:28}).selected(this.selectIndex).usingPopup(true).onRequestPopupData((index:number)=>{//1.清空数组this.strs2=[]for (let i=0;i<this.txls[index].lxr.length;i++){//添加数据this.strs2.push(this.txls[index].lxr[i].names)}return this.strs2})}.height('100%').width('100%')

二. Blank

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

子组件

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

示例代码: 

  @Builder test2(){Row(){Text('左边')Blank().color('red')Text('右边')}.width('100%').backgroundColor('#abcded')Column(){Text('上边')Blank().color('red')Text('下边')}.height(100).width('100%').backgroundColor('#abc')}

 三.Button

按钮组件，可快速创建不同样式的按钮。

子组件

Button:创建可以包含单个子组件的按钮

Button:使用文本内容创建相应的按钮组件，此时Button无法包含子组件。

type:设置Button样式。

fontSize:设置文本显示字号。

fontColor:设置文本显示颜色。

fontWeight:设置文本的字体粗细。

fontStyle:设置文本的字体样式。

stateEffect:设置是否开启按压态显示效果。

fontFamily:设置字体列表。

 labelStyle10+:设置Button组件label文本和字体的样式。

buttonStyle11+:设置Button组件的样式和重要程度

controlSize11+:设置Button组件的尺寸。

 role12+:设置Button组件的角色。

contentModifier12+:定制Button内容区的方法

 四.Checkbox

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

属性:

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

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

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

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

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

contentModifier12+:定制CheckBox内容区的方法。

onChange :当选中状态发生变化时，触发该回调。

实例代码:

@Builder conStyle1(num:number){Text(num<=99?num.toString():'99+').fontSize(num<=99?16:10)}@Builder CheckBox(){Row(){Text('爱好:')Checkbox({name:'ah',group:'hobby'}).select(true).selectedColor('red').unselectedColor('blue').mark({strokeColor:'#fcf',size:30,strokeWidth:3}).shape(CheckBoxShape.ROUNDED_SQUARE)Checkbox({name:'ah',group:'hobby',indicatorBuilder:()=>{this.conStyle()}})Checkbox({name:'ah',group:'hobby',indicatorBuilder:()=>{this.conStyle1(100)}})}Column(){Text('全选')CheckboxGroup({group:'ah'})}Row(){Checkbox({name:'c',group:'ah',})Text('唱')Checkbox({name:'c',group:'ah',})Text('跳')Checkbox({name:'c',group:'ah',})Text('rap')}
}

 五.CheckBoxGroup

多选框群组，用于控制多选框全选或者不全选状态。

属性:

selectAll:设置是否全选。若同组的Checkbox显式设置了select属性，则Checkbox的优先级高。

 selectedColor:设置被选中或部分选中状态的颜色。

unselectedColor10+:设置非选中状态边框颜色。

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

checkboxShape12:设置CheckboxGroup组件形状， 包括圆形和圆角方形。

六. ContainerSpan

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

属性:

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

示例代码:

  @Builder container(){Text(){SymbolSpan($r('sys.symbol.cinema'))ContainerSpan(){Span('文字')ImageSpan($r('app.media.app_icon')).height(30)}.textBackgroundStyle({color:'#abc',radius:5})}.width('100%')}

 七.DataPanel

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

属性:

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

valueColors10+:设置各数据段颜色。

 trackBackgroundColor10+:设置底板颜色。

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

 trackShadow10+:设置投影样式。

contentModifier12+:定制DataPanel内容区的方法。

 示例代码:

  @State ages:number[]=[18,19,18,18,19,20,16,22,25]@Builder DatePanelTest(){DataPanel({values:this.ages,max:300,type:DataPanelType.Circle})// .width(200).closeEffect(false)//动效开关.valueColors([Color.Blue,'#fcf','#ccc','#fbc','#fba',Color.Orange,Color.Yellow,]).trackBackgroundColor('green')//底板颜色.strokeWidth(50)//圆环粗细DataPanel({values:this.ages,max:300,type:DataPanelType.Line})}

八. CalendarPicker

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

属性:

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

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

示例代码:

  now:Date=new Date('2023-08-09')@State selectDate:Date=new Date('2023-08-09')@Builder CalenderText(){Text('日期文本')CalendarPicker({hintRadius:10,//底板圆角0-16selected:this.now//默认选中的日期})// .edgeAlign(CalendarAlign.END,{dx:10,dy:20}).textStyle({color:'red',font:{size:19,weight:700}}).onChange((val)=>{this.selectDate=val})Text('选中的日期:'+this.selectDate)}

 九.DatePicker

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

属性:

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

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

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

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

PickerTextStyle10+类型说明

实例代码:

  @Builder DatePickerTest(){DatePicker({start:new Date('2000-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:Color.Yellow,font:{size:30,weight:FontWeight.Bold}})
}

十. Divider

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

属性:

vertical:设置分割线的方向。

color:设置分割线的颜色。

strokeWidth:设置分割线的宽度。

 Divider().width(60).height(100).vertical(true).color('red').strokeWidth(10).lineCap(LineCapStyle.Square)

  @Builder gaugeTest(){Gauge({value:50,min:0,max:100}){Text(`${this.num}%`).textAlign(TextAlign.Center).fontSize(30)}.value(this.num).startAngle(270)//起始角度.endAngle(90)//结束角度.colors(this.lColor).strokeWidth(20).description(this.cus(this.num)).trackShadow({radius:90,offsetX:10,offsetY:10}).indicator({icon:$r('sys.symbol.paperplane'),space:5})Gauge({value:50,min:0,max:100}).contentModifier(new myTest(this.num,100,0))Button('增加').onClick(()=>{this.num+=10})Button('减少').onClick(()=>{this.num-=10})}

 @Builder imageTest(){ImageAnimator().images([{ src: $r('app.media.app_icon'),width:200,height:200,duration:1000,left:60,top:20},{ src: $r('app.media.app_icon'),width:200,height:200,duration:1000,left:60,top:20},{ src: $r('app.media.app_icon'),width:200,height:200,duration:1000,left:60,top:20},{ src: $r('app.media.app_icon'),width:200,height:200,duration:1000,left:60,top:20},{ src: $r('app.media.app_icon'),width:200,height:200,duration:1000,left:60,top:20},{ src: $r('app.media.app_icon'),width:200,height:200,duration:1000,left:60,top:20},{ src: $r('app.media.app_icon'),width:200,height:200,duration:1000,left:60,top:20}]).width('100%').state(this.state).reverse(true)//播放方向.fixedSize(false).fillMode(FillMode.Forwards).iterations(-1).onStart(()=>{console.log('开始了')}).onPause(()=>{console.log('暂停了')}).onRepeat(()=>{console.log('重复播放')}).onCancel(()=>{console.log('最初状态')}).onFinish(()=>{console.log('动画完成')})Button('初识').onClick(()=>{this.state=AnimationStatus.Initial})Button('开始').onClick(()=>{this.state=AnimationStatus.Running})Button('暂停').onClick(()=>{this.state=AnimationStatus.Paused})Button('停止').onClick(()=>{this.state=AnimationStatus.Stopped})}

@Builder loadTest(){LoadingProgress().color('#fcf').width(30)// .enableLoading(false)Text('动画')}

 @Builder marqueeTest(){Marquee({start:true,step:3,loop:-1,fromStart:true,src:'这是滚动的文字恶化发u回复挥发分哈回复诶啊额护肤i啊好覅'+$r('app.media.app_icon')}).width(100).backgroundColor('#abcdef').marqueeUpdateStrategy(MarqueeUpdateStrategy.DEFAULT)}