ArkTs组件的学习

2024-12-19 20:36:08

一. AlphabetIndexer

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

参数名	类型	必填	说明
arrayValue	Array<string>	是	字母索引字符串数组，不可设置为空
selected	number	是	初始选中项索引值若超出索引值范围则取默认值0

class Lxr{
  tImg:ResourceStr
  names:string
  constructor(tImg: ResourceStr, names: string) {
    this.tImg = tImg;
    this.names = names;
  }
}
class Txl{
  key:string
  lxr:Lxr[]

  constructor(key: string, lxr: Lxr[]) {
    this.key = key;
    this.lxr = lxr;
  }

}

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

  build() {
    Column(){
      this.test1()
    }


    .height('100%')
    .width('100%')
    .backgroundColor('#ccc')
  }

 @State strs:string[]=['A','B','C']
  @State txls:Txl[]=[
    new Txl('A',[
      new Lxr($r('app.media.1'),'哎'),
      new Lxr($r('app.media.2'),'哎呀'),
      new Lxr($r('app.media.3'),'奥运'),
      new Lxr($r('app.media.1'),'阿里'),
      new Lxr($r('app.media.1'),'阿里巴巴'),
      new Lxr($r('app.media.2'),'爱吃'),
      new Lxr($r('app.media.3'),'爱人')
    ]),
    new Txl('B',[
      new Lxr($r('app.media.1'),'白色的'),
      new Lxr($r('app.media.2'),'部分'),
      new Lxr($r('app.media.3'),'博大精深'),
      new Lxr($r('app.media.3'),'把你的'),
      new Lxr($r('app.media.3'),'把你的'),
      new Lxr($r('app.media.3'),'不会'),
      new Lxr($r('app.media.3'),'部门')
    ]),
    new Txl('C',[
      new Lxr($r('app.media.3'),'测试'),
      new Lxr($r('app.media.3'),'测定'),
      new Lxr($r('app.media.3'),'测得'),
      new Lxr($r('app.media.3'),'侧入'),
      new Lxr($r('app.media.3'),'测啊'),
      new Lxr($r('app.media.3'),'测温'),
      new Lxr($r('app.media.3'),'测试'),
      new Lxr($r('app.media.3'),'测定'),
      new Lxr($r('app.media.3'),'测得'),
      new Lxr($r('app.media.3'),'侧入'),
      new Lxr($r('app.media.3'),'测啊'),
      new Lxr($r('app.media.3'),'测温'),
      new Lxr($r('app.media.3'),'测试'),
      new Lxr($r('app.media.3'),'测定'),
      new Lxr($r('app.media.3'),'测得'),
      new Lxr($r('app.media.3'),'侧入'),
      new Lxr($r('app.media.3'),'测啊'),
      new Lxr($r('app.media.3'),'测温'),
      new Lxr($r('app.media.3'),'测试'),
      new Lxr($r('app.media.3'),'测定'),
      new Lxr($r('app.media.3'),'测得'),
      new Lxr($r('app.media.3'),'侧入'),
      new Lxr($r('app.media.3'),'测完')
    ]),
  ]
  @State selectIndex:number=0
  @State strs2:string[]=[] // 显示具体内容
  @Builder tou(str:string){
    Text(str).width('100%').backgroundColor('gray')
  }
  @Builder test1(){
    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).width(30).height(30).borderRadius(100)
                  Text(lxr.names)
                }.width('100%')
                .backgroundColor(i%2==0?'#abc':'#faf')
              }
            })
          }
        })
      }.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)
        .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%')
  }

（1）属性值

属性值
参数名	类型	必填	说明
color	ResourceColor	是	文字颜色
selectedColor	ResourceColor	是	选中项文字颜色
popupColor	ResourceColor	是	提示弹窗文字颜色
selectedBackgroundColor	ResourceColor	是	选中项背景颜色
popupBackground	ResourceColor	是	提示弹窗背景色。弹窗的背景模糊材质效果会对背景色产生影响，可通过设置popupBackgroundBlurStyle属性值为NONE关闭背景模糊材质效果
usingPopup	boolean	是	是否使用提示弹窗默认值：false
selectedFont	Font	是	选中项文字样式
popupFont	Font	是	提示弹窗字体样式
font	Font	是	字母索引条默认字体样式
itemSize	string\|number	是	字母索引条字母区域大小，字母区域为正方形，即正方形边长。不支持设置为百分比
alignStyle	IndexerAlign	是	字母索引条弹框的对齐样式，支持弹窗显示在索引条右侧和左侧。默认值：IndexerAlign.End
alignStyle	offset	否	提示弹窗与索引条之间间距，大于等于0为有效值，在不设置或设置为小于0的情况下间距与popupPosition.x相同。与popupPosition同时设置时，水平方向上offset生效，竖直方向上popupPosition.y生效。
selected	number	是	选中项索引值默认值：0
popupPosition	position	是	弹出窗口相对于索引器条上边框中点的位置
popupSelectedColor	ResourceColor	是	提示弹窗非字母部分选中文字色
popupUnselectedColor	ResourceColor	是	提示弹窗非字母部分未选中文字色
popupItemFont	Font	是	提示弹窗非字母部分字体样式
popupItemBackgroundColor	ResourceColor	是	提示弹窗非字母部分背景色
autoCollapse	boolean	是	是否使用自适应折叠模式
popupItemBorderRadius	number	是	设置提示弹窗索引项背板圆角半径。
itemBorderRadius	number	是	设置索引项背板圆角半径
popupBackgroundBlurStyle	BlurStyle	是	设置提示弹窗的背景模糊材质弹窗的背景模糊材质效果会对背景色popupBackground产生影响，可通过设置属性值为NONE关闭背景模糊材质效果。
popupTitleBackground	ResourceColor	是	设置提示弹窗首个索引项背板颜色
enbleHapticFeedback	boolean	否	支持触控反馈默认值：true

IndexAlign枚举说明
名称	说明
Left	弹窗显示在索引条右侧
Right	弹窗显示在索引条左侧
START	在LTR场景下，弹框显示在索引条右侧的位置。在RTL场景下，弹框显示在索引条左侧的位置。
END	在LTR场景下，弹框显示在索引条左侧的位置。在RTL场景下，弹框显示在索引条右侧的位置。

（2）事件

参数名	类型	必填	说明
onSelect	number	是	索引条选中回调，返回值为当前选中索引。
onRequestPopupData	number	是	选中字母索引后，请求索引提示弹窗显示内容回调。
onPopupSelect	number	是	字母索引提示弹窗字符串列表选中回调。

二. Blank

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

Blank在父容器Row、Column、Flex主轴方向上未设置大小时会自动拉伸、压缩，设置了大小或容器自适应子节点大小时不会自动拉伸、压缩。

Blank设置主轴方向大小（size）与min时约束关系为max(min, size)。

Blank在父容器交叉轴上设置大小时不会撑满父容器交叉轴，交叉轴不设置大小时alignSelf默认值为ItemAlign.Stretch，会撑满容器交叉轴。

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

三. CalendarPicker

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

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

  }

（1）属性

edgeAlign：设置选择器与入口组件的对齐方式
参数名	类型	必填	说明
alignType	CalendarAlign	是	对齐方式类型默认值：CalendarAlign .END
offset	Offset	否	按照对齐类型对齐后，选择器相对入口组件的偏移量。默认值：{dx: 0, dy: 0}

CalendarAlign枚举
名称	描述
Start	设置选择器与入口组件左对齐的对齐方式
Center	设置选择器与入口组件居中对齐的对齐方式。
END	设置选择器与入口组件右对齐的对齐方式。

textStyle：入口区的文本颜色、字号、字体粗细。
参数名	类型	必填	说明
value	PickerTextStyle	是	设置入口区的文本颜色、字号、字体粗细

CalendarOptions对象说明

名称

类型

必填

说明

hintRadius

number|Resource

否

描述日期选中态底板样式。

默认值：底板样式为圆形。

selected

Date

否

设置选中项的日期。选中的日期未设置或日期格式不符合规范则为默认值。

默认值：当前系统日期。

（2）事件

onChange：选择日期时触发该事件。
参数名	类型	必填	说明
value	Date	是	选中的日期值

四. Checkbox

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

（1）属性

CheckboxOptions对象说明

名称

类型

必填

说明

name

string

否

用于指定多选框名称。

group

string

否

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

说明：

未配合使用CheckboxGroup组件时，此值无用。

indicatorBuilder

CustomBuilder

否

配置多选框的选中样式为自定义组件。自定义组件与Checkbox组件为中心点对齐显示。indicatorBuilder设置为undefined/null时，默认为indicatorBuilder未设置状态。

参数名	类型	必填	说明
select	boolean	是	多选框是否选中
selectedColor	ResourceColor	是	多选框选中状态颜色
unselectedColor	ResourceColor	是	多选框非选中状态边框颜色
mark	MarkStyle	是	设置多选框内部图标样式
shape	CheckBoxShape	是	CheckBox组件形状, 包括圆形和圆角方形。
contentModifier	ContentModifier	是	在CheckBox组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

CheckBoxShape11+枚举类型说明
名称	值	说明
CIRCLE	0	圆形
ROUNDED_SQUARE	1	圆角方形

CheckBoxConfiguration对象说明

开发者需要自定义class实现ContentModifier接口。
名称	类型	只读	可选	说明
name	string	否	否	当前多选框名称。
selected	boolean	否	否	指示多选框是否被选中。如果select属性没有设置默认值是false。如果设置select属性，此值与设置select属性的值相同。
triggerChange	Callback<boolean>	否	否	触发多选框选中状态变化。

（2）事件

onChange：当选中状态发生变化时，触发该回调。
参数名	类型	必填	说明
value	boolean	是	返回true时，表示已选中。返回false时，表示未选中

@Builder conStyleTest(){
    SymbolGlyph($r('sys.symbol.star_fill'))
      .fontColor(['red'])
  }
  @Builder conStyleTest1(num:number){
    Text(num>99?'99+':num.toString())
      .fontSize(num>99?10:16)
  }
  @Builder cheakBoxTest(){
    Row(){
      Text('爱好:')
      Checkbox({
        name:'ah',
        group:'hobby'
      })
        .select(true)
        .selectedColor('red')
        .unselectedColor('blue')
        .mark({
          strokeColor:'green',
          size:20,strokeWidth:100
        })
        .shape(CheckBoxShape.ROUNDED_SQUARE)
      Checkbox({
        name:'ah',
        group:'hobby',
        indicatorBuilder:()=>{
          this.conStyleTest()
        }
      })
      Checkbox({
        name:'ah',
        group:'hobby',
        indicatorBuilder:()=>{
          this.conStyleTest1(10)
        }
      })



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

    }
  }

五. ContainerSpan

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

参数名

类型

必填

说明

textBackgroundStyle

TextBackgroundStyle

是

文本背景样式。

默认值：

{

color: Color.Transparent,

radius: 0

}

attributeModiffer

AttributeModifier<ContainerSpanAttribute>

是

设置组件的动态属性。

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

六. DataPanel

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

DataPanelOptions对象说明
名称	类型	必填	说明
values	number【】	是	数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。
max	number	否	- max大于0，表示数据的最大值。 - max小于等于0，max等于value数组各项的和，按比例显示。默认值：100
type	DataPanelType	否	数据面板的类型（不支持动态修改）。默认值：DataPanelType.Circle

DataPanelType8+枚举说明
名称	说明
Line	线性数据面板
Circle	环形数据面板

参数名

类型

必填

说明

closeEffect

boolean

是

关闭数据占比图表旋转动效和投影效果。

默认值：false

valueColoes

Array<ResourceColor | LinearGradient>

是

设置各数据段颜色

trackBackgroundColor

ResourceColor

是

底板颜色。

默认值：'#08182431'，格式为十六进制ARGB值，前俩位代表透明度。

strokeWidth

length

是

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

trackShadow

DataPanelShadowOptions

是

投影样式。

说明：

设置null为不开启投影。

contentModiffer

ContentModifier

是

在DataPanel组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

DatePanelShadowOptions

Array<ResourceColor | LinearGradient>

否

各数据段投影的颜色。

默认值：与valueColors值相同

说明：

若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。

若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。

LinearGradient

ColorStop[]

是

存储渐变颜色和渐变点。

ColorStop对象说明：颜色断点类型，用于描述渐进色颜色断点。
名称	类型	必填	说明
color	ResourceColor	是	颜色值
offset	length	是	渐变色断点（0~1之间的比例值，若数据值小于0则置为0，若数据值大于1则置为1）。说明：若传入字符串类型且内容为数字，则转换为对应的数值。例如'10vp'转换为10，'10%'转换为0.1。

DataPanelConfiguration1对象说明

开发者需要自定义class实现ContentModifier接口。
名称	类型	必填	说明
values	number[]	是	当前DataPanel的数据值，最大长度为9。
maxValue	number	是	DataPanel显示的最大值。默认值：100。

@State ages:number[]=[18,19,18,19,27,40,30,10,20]
  @Builder DatePanelTest(){
    DataPanel({values:this.ages,max:300,type:DataPanelType.Circle})
      // .width(200)
      .closeEffect(false)
      .valueColors([Color.Black,Color.Blue,Color.Brown,Color.Gray,Color.Green,Color.Orange,Color.Pink])
      .trackBackgroundColor('#03ff1f')
      .strokeWidth(50)
     DataPanel({values:this.ages,max:300,type:DataPanelType.Line})

  }

七. DatePicker

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

（1）DatePickerOptions对象说明
名称	类型	必填	说明
start	Date	否	指定选择器的起始日期。默认值：Date('1970-1-1')
end	Date	否	指定选择器的结束日期。默认值：Date('2100-12-31')
selected	Date	否	设置选中项的日期。默认值：当前系统日期从API version 10开始，该参数支持$$双向绑定变量。

（2）异常情形说明:

异常情形	对应结果
起始日期晚于结束日期，选中日期未设置	起始日期、结束日期和选中日期都为默认值
起始日期晚于结束日期，选中日期早于起始日期默认值	起始日期、结束日期都为默认值，选中日期为起始日期默认值
起始日期晚于结束日期，选中日期晚于结束日期默认值	起始日期、结束日期都为默认值，选中日期为结束日期默认值
起始日期晚于结束日期，选中日期在起始日期与结束日期默认值范围内	起始日期、结束日期都为默认值，选中日期为设置的值
选中日期早于起始日期	选中日期为起始日期
选中日期晚于结束日期	选中日期为结束日期
起始日期晚于当前系统日期，选中日期未设置	选中日期为起始日期
结束日期早于当前系统日期，选中日期未设置	选中日期为结束日期
日期格式不符合规范，如‘1999-13-32’	取默认值
起始日期或结束日期早于系统有效范围	起始日期或结束日期取起始日期默认值
起始日期或结束日期晚于系统有效范围	起始日期或结束日期取结束日期默认值
起始日期与结束日期同时早于系统有效范围	起始日期与结束日期取系统有效范围最早日期
起始日期与结束日期同时晚于系统有效范围	起始日期与结束日期取系统有效范围最晚日期

系统日期范围：1900-1-31 ~ 2100-12-31

选中日期会在起始日期与结束日期异常处理完成后再进行异常情形判断处理

（3）属性

参数名	类型	必填	说明
lunar	boolean	是	日期是否显示农历。 - true：展示农历。 - false：不展示农历。默认值：false
disappearTextStyle	PickerTextStyle	是	所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。
textStyle	PickerTextStyle	是	所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。
selectedTextStyle	PickerTextStyle	是	选中项的文本颜色、字号、字体粗细。

PickerTextStyle类型说明
参数名	参数类型	必填	参数描述
color	ResourceColor	否	文本颜色
font	Font	否	文本样式，picker只支持字号、字体粗细的设置。

（4）事件

参数名	类型	必填	说明
onChange	DatePickerResult	是	返回选中的时间。
onDateChange	Date	是	返回选中的时间，年月日为选中的日期，时分取决于当前系统时间的时分，秒恒为00。

DatePickerResult对象说明
名称	类型	只读	可选	说明
year	number	否	否	选中日期的年
month	number	否	否	选中日期的月(0~11)，0表示1月，11表示12月。
day	number	否	否	选中日期的日。

@Builder datePickerTest(){
    DatePicker({start:new Date('2020-01-01'),end:new Date(),selected:new Date()})
      .lunar(true)
      .disappearTextStyle({
        color:'red',
        font:{size:16,weight:700}
      })
      .textStyle({
        color:'green',
        font:{size:20,weight:700}
      })
      .selectedTextStyle({
        color:Color.Pink,
        font:{size:30,weight:700}
      })

  }

八. Divider

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

（1）属性

参数名	类型	必填	说明
vertical	boolean	是	使用水平分割线还是垂直分割线。 false：水平分割线；true：垂直分割线。默认值：false
color	ResourceColor	是	分割线颜色。
storkWidth	number\|string	是	分割线宽度。默认值：1px 单位：vp 说明：分割线的宽度不支持百分比设置。优先级低于通用属性height，超过通用属性设置大小时，按照通用属性进行裁切。部分设备硬件中存在1像素取整后分割线不显示问题，建议使用2像素。
lineCap	LineCapStyle	是	分割线的端点样式。默认值：LineCapStyle.Butt

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

九.Gauge

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

（1）接口

Gauge(options:{value: number, min?: number, max?: number})

参数名	类型	必填	说明
value	number	是	量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值的预置。说明： value不在min和max范围内时使用min作为默认值。
min	number	否	当前数据段最小值。默认值：0
max	number	否	当前数据段最大值。默认值：100 说明： max小于min时使用默认值0和100。 max和min支持负数。

（2）属性

参数名	类型	必填	说明
value	number	是	量规图的数据值，可用于动态修改量规图的数据值。默认值：0
angle	number	是	起始角度位置，时钟0点为0度，顺时针方向为正角度。默认值：0
engAngle	number	是	终止角度位置，时钟0点为0度，顺时针方向为正角度。默认值：360
colors	ResourceColor\| LinearGradient\| Array<[ResourceColor \| LinearGradient, number]>	是	量规图的颜色，支持分段颜色设置
strokeWidth	Length	是	环形量规图的环形厚度。默认值：4 单位：vp 说明：设置小于0的值时，按默认值显示。不支持百分比。
description	CustomBuilder	是	说明内容。说明： @Builder中的内容由开发者自定义，建议使用文本或者图片。若自定义部分的宽高为百分比形式，则基准范围为圆环直径的44.4%25.4%的矩形（图片为28.6%28.6%），距离圆环底部0vp，左右居中。
trackShadow	GaugeShadowOptions	是	阴影样式。说明：阴影颜色与圆环颜色一致。设置null为不开启投影。
indicator	GaugeShadowOptions	是	指针样式。说明：设置null则不显示指针。
privacySensitive	[Optional<boolean>]	是	设置隐私敏感，隐私模式下Gauge指针指向0位置，最大值最小值文本将被遮罩，量程显示灰色或者底色。说明：设置null则不敏感。需要卡片框架支持。
contentModiffer	ContentModifier	是	在Gauge组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

GaugeIndicatorOptions对象说明
名称	类型	必填	说明
icon	ResourceStr	否	图标资源路径。说明：不配置则使用默认的三角形样式指针。支持使用svg格式的图标，若使用其他格式，则使用默认的三角形样式指针。
space	Dimension	否	指针距离圆环外边的间距。(不支持百分比)

GaugeConfiguration对象说明
名称	类型	必填	说明
value	number	是	当前数据值
min	number	是	当前数据段最小值
max	number	是	当前数据段最大值

@Builder
function cuss(arrs_0:GaugeConfiguration){
  Column(){
    Text(arrs_0.value+'%').textAlign(TextAlign.Center).fontSize(20)
    Gauge({
      value:arrs_0.value,
      min:arrs_0.min,
      max:arrs_0.max
    })
  }
  .width('100%')

}


class myTest implements ContentModifier<GaugeConfiguration>{
  value:number
  max:number
  min:number

  constructor(value: number, max: number, min: number) {
    this.value = value
    this.max = max
    this.min = min
  }

  applyContent(): WrappedBuilder<[GaugeConfiguration]> {
    return wrapBuilder(cuss)
  }

}

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

  build() {
   Column(){
     // this.container()
     // this.DatePanelTest()
     // this.datePickerTest()
     this.gaugeTest()
     // this.imageTest()
     // this.loadTest()
     // this.marqueeTest()
   }


    .height('100%')
    .width('100%')
  }

@Builder datePickerTest(){
    DatePicker({start:new Date('2020-01-01'),end:new Date(),selected:new Date()})
      .lunar(true)
      .disappearTextStyle({
        color:'red',
        font:{size:16,weight:700}
      })
      .textStyle({
        color:'green',
        font:{size:20,weight:700}
      })
      .selectedTextStyle({
        color:Color.Pink,
        font:{size:30,weight:700}
      })


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

  @State num:number=50
  lColor:LinearGradient=new LinearGradient([{color:'red',offset:0},{color:'blue',offset:1}])
  @Builder cus(num:number){
    Row(){
      Text('0'+'%')
        .textAlign(TextAlign.Center)
        .fontSize(20)
      Text('50'+'%')
        .textAlign(TextAlign.Center)
        .fontSize(20)
      Text('100'+'%')
        .textAlign(TextAlign.Center)
        .fontSize(20)
    }
    .width('100%')

  }


@Builder gaugeTest(){
    Gauge({value:this.num,max:100,min:0}){
      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:50,offsetX:10,offsetY:20})
    .indicator({icon:$r('sys.symbol.paperplane'),space:5})


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


}

十. ImageAnimator

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

(1) 属性

参数名	类型	必填	说明
images	Array<ImageFrameInfo>	是	设置图片帧信息集合。每一帧的帧信息(ImageFrameInfo)包含图片路径、图片大小、图片位置和图片播放时长信息，详见ImageFrameInfo属性说明。默认值：[]
state	AnimationStatus	是	控制播放状态。
duration	number	是	播放时长。 value为0时，不播放图片。 value的改变只会在下一次循环开始时生效。
reverse	boolean	是	播放方向。 false表示从第1张图片播放到最后1张图片，true表示从最后1张图片播放到第1张图片。默认值：false
fixedSize	boolean	是	设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。默认值：true
fillMode	FillMode	是	当前播放方向下，动画开始前和结束后的状态。默认值：FillMode.Forwards
iterations	number	是	默认播放一次，设置为-1时表示无限次播放。默认值：1

ImageFrameInfo对象说明
名称	类型	必填	说明
src	string \| Resource\| PixelMap	是	图片路径，图片格式为jpg、jpeg、svg、png、bmp、webp、ico和heif，从API Version9开始支持Resource类型的路径，从API version 12开始支持PixelMap类型。
width	number\|string	否	图片宽度。默认值：0
height	number\|string	否	图片高度。默认值：0
Top	number\|string	否	图片相对于组件左上角的纵向坐标。默认值：0
left	number\|string	否	图片相对于组件左上角的横向坐标。默认值：0
duration	number	否	每一帧图片的播放时长，单位毫秒。

（2）事件

事件名	说明
onStart	状态回调，动画开始播放时触发。
onPause	状态回调，动画暂停播放时触发。
onRepeat	状态回调，动画重复播放时触发。
onCancel	状态回调，动画返回最初状态时触发。
onFinish	状态回调，动画播放完成时或者停止播放时触发。

@State state:AnimationStatus=AnimationStatus.Initial
  @Builder imageTest(){
    ImageAnimator()
      .images([
        {src:$r('app.media.1'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.2'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.3'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.1'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.2'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.3'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.1'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.2'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.3'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.1'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.2'),width:200,height:200,duration:1000,left:60,top:20},
        {src:$r('app.media.3'),width:200,height:200,duration:1000,left:60,top:20}
      ]).width('100%')
      .state(this.state) //是否开启播放
      .reverse(true) //播放的方向
      .fixedSize(false)
      .fillMode(FillMode.Both)
      .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
    })
  }

十一. LoadingProgress

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

（1）属性

参数名	类型	必填	说明
color	ResourceColor	是	加载进度条的前景色
enableLoading	boolean	是	LoadingProgress动画是否显示。默认值：true
contentModdifier	ContentModifier	是	在LoadingProgress组件上，定制内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

@Builder loadTest(){
    LoadingProgress()
      .color('red')
      .width(100)
      .enableLoading(true) // 是否开启动画显示
    Text('donghua ')
  }

十二. Marquee

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

（1）接口

Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })

参数名	类型	必填	说明
value	start：boolean	是	start：控制跑马灯是否进入播放状态。
value	step?:number	是	step：滚动动画文本滚动步长，当step大于Marquee的文本宽度时，取默认值。
value	loop?:number	是	loop：设置重复滚动的次数，小于等于零时无限循环。默认值：-1
value	fromStart?:boolean	是	fromStart：设置文本从头开始滚动或反向滚动。默认值：true
value	src:string	是	src：需要滚动的文本。

（2）属性

参数名	类型	必填	说明
fontColor	ResourceColor	是	字体颜色
fontSize	Length	是	字体大小。fontSize为number类型时，使用fp单位。字体默认大小16fp。不支持设置百分比字符串。
fontWeight	number \| FontWeight \| string	是	文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式
fontFamily	string\|Resource	是	字体列表。默认字体'HarmonyOS Sans'。
allowScale	boolean	是	是否允许文本缩放。默认值：false 说明：仅当fontSize为fp单位时生效。
marqueeUpdateStrategy	MarqueeUpdateStrategy	是	跑马灯组件属性更新后，跑马灯的滚动策略。默认值: MarqueeUpdateStrategy.DEFAULT

（3）事件

参数	说明
onStart	当滚动的文本内容变化或者开始滚动时触发回调
onBounce	完成一次滚动时触发，若循环次数不为1，则该事件会多次触发。
onFinish	滚动全部循环次数完成时触发回调。

@Builder marqueeTest(){
    Marquee({start:true,step:6,loop:-1,fromStart:true,
      src:'这是滚动的文字不得不哈睡觉哦到时间到死u都i饿啊的就的就哦啊司机哦啊'})
      .width(100)
      .backgroundColor('#abcdef')
      .marqueeUpdateStrategy(MarqueeUpdateStrategy.PRESERVE_POSITION)
  }

十三.Menu

以垂直列表形式显示的菜单。

Menu组件需和bindMenu或bindContextMenu方法配合使用，不支持作为普通组件单独使用。

Menu的子组件包含MenuItem、MenuItemGroup

菜单和菜单项宽度计算规则：

布局过程中，期望每个菜单项的宽度一致。若子组件设置了宽度，则以尺寸计算规则为准。

不设置宽度的情况：菜单组件会对子组件MenuItem、MenuItemGroup设置默认2栅格的宽度，若菜单项内容区比2栅格宽，则会自适应撑开。

设置宽度的情况：菜单组件会对子组件MenuItem、MenuItemGroup设置减去padding后的固定宽度。

1.Menu属性

参数名	类型	必填	说明
font	Font	是	Menu中所有文本的尺寸。默认值： { size: 16, family: 'HarmonyOS Sans', weight: FontWeight.Medium, style: FontStyle.Normal }
fontColor	ResourceColor	是	统一设置Menu中所有文本的颜色。
radius	Dimension\|BorderRadiuses	是	Menu边框圆角半径。
width	Length	是	Menu边框宽度
menultemDivider	DividerStyleOptions\|undefined	是	设置menuItem分割线样式。 -strokeWidth:分割线的线宽。 -color：分割线的颜色。 -startMargin：分割线与menuItem侧边起端的距离。 -endMargin：分割线与menuItem侧边结束端的距离。
menuItemGroupDivider	DividerStyleOptions\|undefined	是	设置menuItemGroup顶部和底部分割线样式。 -strokeWidth:分割线的线宽, 默认值是1px。 -color：分割线的颜色, 默认值是 #33000000。 -startMargin：分割线与menuItemGroup侧边起端的距离, 默认值是16。 -endMargin：分割线与menuItemGroup侧边结束端的距离, 默认值是16。
subMenuExpandingMode	SubMenuExpandingMode	是	Menu子菜单展开样式。默认值：SubMenuExpandingMode.SIDE_EXPAND

SubMenuExpandingMode 枚举说明
名称	说明
SIDE_EXPAND	默认展开样式，子菜单位于同一平面侧边展开
EMBEDDED_EXPAND	直接展开样式，子菜单嵌于主菜单内展开
STACK_EXPAND	堆叠样式，子菜单浮于主菜单上方展开

2. MenuItem

用来展示菜单Menu中具体的item菜单项

（1）接口

MenuItem(value?: MenuItemOptions| CustomBuilder)

MenuItemOptions对象说明
名称	类型	必填	说明
starticon	ResourceStr	否	item中显示在左侧的图标信息路径。
content	ResourceStr	否	item的内容信息。
endicon	ResourceStr	否	item中显示在右侧的图标信息路径
labellnfo	ResourceStr	否	定义结束标签信息，如快捷方式Ctrl+C等。
buider	CustomBuilder	否	用于构建二级菜单。
symbolStartIcon	SymbolGlyphModiffier	否	item中显示在左侧的HMSymbol图标信息路径。配置该项时，原先startIcon图标不显示。
symbolEndIcon	SymbolGlyphModiffier	否	item中显示在右侧的HMSymbol图标信息路径。配置该项时，原先endIcon图标不显示。

（2）MenuItem属性

参数名	类型	必填	说明
selected	boolean	是	菜单项是否选中。默认值：false
selectIcon	boolean\|ResourceStr\| SymbolGlyphModiffer	是	菜单项被选中时，是否显示被选中的图标。默认值：false true: 菜单项被选中时，显示默认的对勾图标 false: 即使菜单项被选中也不显示图标 ResourceStr: 菜单项被选中时，显示指定的图标 SymbolGlyphModifier: 菜单项被选中时，显示指定的HMSymbol图标。
contentFont	Font	是	菜单项中内容信息的字体样式
contentFontColor	ResourceColor	是	菜单项中内容信息的字体颜色。
labelFont	Font	是	菜单项中标签信息的字体样式
labelFontColor	ResourceColor	是	菜单项中标签信息的字体颜色

（3）MenuItem事件

参数名

类型

必填

说明

onChange

boolean

是

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

返回值为true时，表示已选中，为false时，表示未选中。

3. MenuItemGrop

该组件用来展示菜单MenuItem的分组。

子组件包含MenuItem子组件

（1）MenuItemGrop接口

MenuItemGroup(value?: MenuItemGroupOptions)

MenuItemGroupOptions对象说明
名称	类型	必填	说明
header	ResourceStr \| CustomBuilder	否	设置对应group的标题显示信息。
footer	ResourceStr \| CustomBuilder	否	设置对应group的尾部显示信息。

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

  build() {
    Column(){
     
    }

    .height('100%')
    .width('100%')
    .bindMenu(this.menuTest())
 
  }
// 自定义图标
  sIcon:SymbolGlyphModifier= new SymbolGlyphModifier($r('sys.symbol.car'))
  eIcon:SymbolGlyphModifier= new SymbolGlyphModifier($r('sys.symbol.person_crop_circle_fill_1'))

  // Menu菜单组件
  @Builder menuTest(){
    Menu(){
      MenuItem({startIcon:$r('app.media.1'),
        content:'首页',endIcon:$r('app.media.2'),
        builder:():void=>this.subMenuTest()
      })
        .selected(true) //默认选中
        .selectIcon(this.sIcon)
        .contentFont({size:16,style:FontStyle.Normal,weight:900})
        .contentFontColor('blue')
        .contentFont({size:16,style:FontStyle.Normal})
        .labelFontColor('red')
      MenuItem({symbolStartIcon:this.sIcon,content:'图标选项',symbolEndIcon:this.eIcon})

    // 分组
      MenuItemGroup({header:'头',footer:'底部'}){
        MenuItem({symbolStartIcon:this.sIcon,content:'图标选项',symbolEndIcon:this.eIcon})
        MenuItem({symbolStartIcon:this.sIcon,content:'图标选项',symbolEndIcon:this.eIcon})
      }


    }
    .backgroundColor('#ccc')
    .height(300)
    .font({size:20,weight:700,style:FontStyle.Italic})
    .fontColor('red')
    .radius(10)
    .width(200)
    .menuItemDivider({strokeWidth:LengthMetrics.vp(2),color:'red',startMargin:LengthMetrics.vp(10),endMargin:LengthMetrics.vp(10)})
    // .subMenuExpandingMode(SubMenuExpandingMode.STACK_EXPAND)
  }
  //菜单子菜单
  @Builder subMenuTest(){
    Menu(){
      MenuItem({content:'子菜单'})
      MenuItem({content:'子菜单'})
      MenuItem({content:'子菜单'})
    }
  }


}

十四. Navigation

1.Navigation

Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。

（1）Navigation接口

Navigation(pathInfos: NavPathStack)：绑定路由栈到Navigation组件。

参数名	类型	必填	说明
pathInfos	NavPathStack	是	路由栈信息。

（2）Navigation所有属性

1. title属性：设置页面标题


参数名	类型	必填	说明
value	上一篇：jsp中的四个域对象(Spring MVC) 下一篇：外观模式与中介模式的区别相关文章 12-19ArkTs组件的学习 12-19【机器学习】机器学习的基本分类-无监督学习-t-SNE（t-分布随机邻域嵌入） 12-19GAN 是如何学习语义的？ 12-19STM8单片机学习笔记·GPIO的片上外设寄存器 12-19【Linux探索学习】第二十一弹——文件描述符和输出重定向：深入解析Linux操作系统中的文件描述符与输出重定向的底层机制 12-19每天五分钟深度学习：解析m个样本向量化前向传播的原理 12-19【机器学习】探索机器学习支持向量机算法的奥秘-定义与原理 12-19深入解析强化学习中的 Generalized Advantage Estimation (GAE)-英文版 12-19深度学习入门笔记——神经网络的构建和使用 12-19【AI知识】人工智能、机器学习、深度学习的概念与联系推荐文章 CSS系列（21）-- Houdini 详解使用Flinkcdc 采集mysql数据 AtomGit 开源生态应用开发赛报名开始啦深入探究 Redis 集群：主从复制实现原理【文档搜索引擎】使用多线程优化流程【第一篇】数据库管理工具概述企业数字化转型规划“秘籍”全解析【题解】—— LeetCode一周小结50 模拟篇——算法浮世绘，探寻模拟之境的计算艺术（2）-三. 实际应用场景 ip地址是指什么意思？是指手机的位置吗更多编程技术文章网站地图本站所有资源皆搜集自网络，相关版权归版权持有人所有，如有侵权，请电邮告之，本站会尽快删除。粤ICP备2022053706号 "

码农公寓

一. AlphabetIndexer

（1）属性值

（2）事件

二. Blank

三. CalendarPicker

（1）属性

（2）事件

四. Checkbox

（1）属性

（2）事件

五. ContainerSpan

六. DataPanel

七. DatePicker

（1）DatePickerOptions对象说明

（2）异常情形说明:

（3）属性

（4）事件

八. Divider

（1）属性

九.Gauge

（1）接口

（2）属性

十. ImageAnimator

(1) 属性

（2）事件

十一. LoadingProgress

（1）属性

十二. Marquee

（1）接口

（2）属性

（3）事件

十三.Menu

1.Menu属性

2. MenuItem

（1）接口

（2）MenuItem属性

（3）MenuItem事件

3. MenuItemGrop

（1）MenuItemGrop接口

十四. Navigation

1.Navigation

（1）Navigation接口

（2）Navigation所有属性

1. title属性：设置页面标题

相关文章