花生_TL007

这个屌丝很懒，什么也没留下！

热门标签

HarmonyOS开发(十一)：ArkTS组件通用属性_arkts 设置空间宽度填满左右留边距

作者：花生_TL007 | 2024-03-06 15:10:07

踩

arkts 设置空间宽度填满左右留边距

1、组件通用属性

1.1、尺寸设置

用来设置组件的宽度、边距

1.2、位置设置

用来设置组件的对齐方式、布局方向和显示位置

名称	参数类型	描述
align	Alignment	设置元素内容的对齐方式，只有当设置的width,height的大小超过元素本身内容时才生效默认值：Alignment.Center
direction	Direction	高置元素水平方向上的布局默认值：Direction.Auto
position	{ x:Length, y:Length }	使用绝对定位，设置元素锚点相对于父容器顶部起点的偏移位置在布局容器中，设置这个属性不影响父容器布局，仅在绘制时做位置调整
markAnchor	{ x:Length, y:Length }	设置元素在位置定位时的锚点，以元素顶部作为基点进行偏移。默认值是： { x: 0, y: 1 }
offset	{ x:Length, y:Length }	相对布局完成位置坐标偏移量，设置这个属性，不影响父容器布局，仅在绘制时进行位置调整。默认值： { x: 0, y: 1 }


@Entry
@Component
struct PositionTest {
 
  build() {
    Column() {
      Column({ space: 10 }) {
        Text('align').fontSize(12).fontColor('#36D').width('90%')
        Text('top start')
          // 设置元素内容的对齐方式
          .align(Alignment.TopStart)
          .height(50)
          .width('90%')
          .fontSize(16)
          .backgroundColor(Color.Pink)
 
        Text('direction').fontSize(12).fontColor('#36D').width('90%')
        Row() {
          Text('1').height(50).width('25%').maxFontSize(16).backgroundColor(Color.Pink).textAlign(TextAlign.Center)
          Text('2').height(50).width('25%').maxFontSize(16).backgroundColor(Color.Yellow).align(Alignment.TopStart)
          Text('3').height(50).width('25%').maxFontSize(16).backgroundColor(Color.Pink).align(Alignment.Top)
          Text('4').height(50).width('25%').maxFontSize(16).backgroundColor(Color.Yellow).align(Alignment.Bottom)
        }
        .width('90%')
        // 元素水平方向上的布局
        .direction(Direction.Rtl)
      }
    }
    .width('100%').margin({top: 5}).direction(Direction.Rtl)
    
  }
}


@Entry
@Component
struct PositionTest2 {
 
  build() {
    Column({space: 15}) {
      // 绝对定位，容器左上角相对于父组件左上角的偏移量
      Text('position').fontSize(12).fontColor('#36D').width('90%')
      Row() {
        Text('1').size({width:'30%',height:'50'}).backgroundColor('#78a355').border({width:1}).fontSize(16)
        Text('2 position(30,10)')
          .size({width: '60%',height:'30'})
          .backgroundColor('#b22c46')
          .border({width:1})
          .fontSize(16)
          .align(Alignment.Start)
          .position({x:30,y:10})
        Text('3').size({width:'45%',height:'50'}).backgroundColor('#007d65').border({width:1}).fontSize(16)
        Text('4 position(50%,70%)')
          .size({width:'50%',height:'50'})
          .backgroundColor('#c37e00')
          .border({width:1})
          .fontSize(16)
          .position({x:'50%',y:'70%'})
      }
      .width('90%').height(100).border({width:1,style:BorderStyle.Dashed})
 
      // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0则向左，反之则向右
      // y为最终定位点距离起点垂直方向间距，y>0则向上，反之则向下
      Text('markAnchor').fontSize(12).fontColor('#36D').width('90%')
      Stack({alignContent: Alignment.TopStart}) {
        Row()
          .size({width: '100', height: '100'})
          .backgroundColor('#f2eada')
        Text('text')
          .size({width: 25, height: 25})
          .backgroundColor('#f15a22')
          .markAnchor({x: 25,y: 25})
        Text('text')
          .size({width: 25, height: 25})
          .backgroundColor('#f15a22')
          .markAnchor({x: -100,y: -25})
        Text('text')
          .size({width: 25, height: 25})
          .backgroundColor('#f15a22')
          .markAnchor({x: 25,y: -25})
      }
      .margin({top: 25}).border({width:1,style: BorderStyle.Dashed})
 
      // 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上
      Text('offset').fontColor('#36D').fontSize(12).width('90%')
      Row() {
        Text('1').size({width:'15%',height:'50'}).backgroundColor('#fedcbd').border({width:1}).fontSize(16)
        Text('2 offset(15,30)')
          .size({width:120,height:'50'})
          .backgroundColor('#4e72b8')
          .border({width: 1})
          .fontSize(16)
          .align(Alignment.Start)
          .offset({x:15,y:30})
        Text('3').size({width:'15%',height:'50'}).backgroundColor('#fedcbd').border({width:1}).fontSize(16)
        Text('4 offset(-5%,20%)')
          .size({width:100,height:'50'})
          .backgroundColor('#4e72b8')
          .border({width:1})
          .fontSize(16)
          .offset({x: '-5%',y:'20%'})
      }.width('90%').height(100).border({width:1,style:BorderStyle.Dashed})
    }
    .width('100%').margin({top: 25})
  }
}

1.3、布局约束

通过组件的宽高比和显示优先级约束组件显示效果。

名称

参数说明

描述

aspectRatio

number

指定当前组件的宽高比

displayPriority

number

设置当前组件在布局容器中显示的优先级

当父容器的空间不足时，低优先级的组件会隐藏

注意：仅在Row/Column/Flex(单行)容器组件中生效


@Entry
@Component
struct AspectRatioTest {
  private children: string[] = ['1','2','3','4','5','6']
 
  build() {
    Column({space: 20}) {
      Text('using container: row').fontSize(12).fontColor('#36D').width('100%')
      Row({space: 10}) {
        ForEach(this.children,(item) => {
          Text(item)
            .backgroundColor('#deab8a')
            .fontSize(16)
              // 指定组件的宽高比是1.5
            .aspectRatio(1.5)
            .height(60)
          Text(item)
            .backgroundColor('#deab8a')
            .fontSize(16)
              // 指定组件宽高比是1.5
            .aspectRatio(1.5)
            .width(60)
        },item => item)
      }
      .size({width: '100%',height: 100})
      .backgroundColor('#feeeed')
      .clip(true)
 
      Text('using container: grid').fontSize(12).fontColor('#36D').width('100%')
      Grid() {
        ForEach(this.children,(item) => {
          GridItem(){
            Text(item)
              .backgroundColor('#deab8a')
              .fontSize(16)
              .width(60)
              .aspectRatio(1.5)
          }
        },item => item)
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .size({width:'100%',height:165})
      .backgroundColor('#feeeed')
    }.padding(10)
  }
}


// ../model/ContainerInfo.ts
 
export class ContainerInfo {
  label: string = ''
  size: string = ''
}
 
export class ChildInfo {
  text: string = ''
  priority: number = 0
}


import {ContainerInfo,ChildInfo} from '../model/ContainerInfo'
 
@Entry
@Component
struct DisplayPriorityTest {
 
  private container: ContainerInfo[] = [
    {label: 'Big container',size: '90%'},
    {label: 'Middle container',size: '50%'},
    {label: 'Small container',size: '30%'}
  ];
  private children: ChildInfo[] = [
    {text: '1\n(priority:2)', priority: 2},
    {text: '2\n(priority:1)', priority: 1},
    {text: '3\n(priority:3)', priority: 3},
    {text: '4\n(priority:1)', priority: 1},
    {text: '5\n(priority:2)', priority: 2}
  ]
  @State currentIndex: number = 0
 
  build() {
    Column({ space: 10 }) {
      Button(this.container[this.currentIndex].label).backgroundColor('#5c7a29')
        .onClick(() => {
          this.currentIndex = (this.currentIndex + 1) % this.container.length;
        })
 
      Flex({justifyContent: FlexAlign.SpaceBetween}) {
        ForEach(this.children, (item:ChildInfo) => {
          Text(item.text)
            .width(120)
            .height(60)
            .fontSize(24)
            .textAlign(TextAlign.Center)
            .backgroundColor('#b22c46')
            // 设置组件显示的优先级
            .displayPriority(item.priority)
        },item => item)
      }
      .width(this.container[this.currentIndex].size)
      .backgroundColor('#d3d7d4')
    }
    .width('100%')
    .margin({top:50})
  }
}

1.4、Flex布局

名称	参数说明	描述
flexBasis	string \| number	设置组件在父亲容器主轴方向上的基准尺寸默认值：‘auto’，表示组件在主轴方向上的基准尺寸为组件原大小
flexGrow	number	设置父容器的剩余空间分配给此属性所在组件的比例默认值：0
flexShrink	number	设置父容器压缩尺寸分配给此属性所在组件的比例默认值：1
alignSelf	ItemAlign	子组件在父容器交叉轴的对齐格式，覆盖Flex布局容器中alignItems默认配置默认值：ItemAlign.Auto


@Entry
@Component
struct FlexTest1 {
 
  build() {
    Column({space:5}) {
      Text('flexBasis').fontSize(12).fontColor('#36D').width('90%')
      // 基于主轴的基准尺寸
      Flex() {
        Text('flexBasis(100)')
          .flexBasis(100) // 宽度为100vp
          .height(100)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
        Text('flexBasis(auto)')
          .flexBasis('auto') // 保存原本宽度的60%
          .width('60%')
          .height(100)
          .backgroundColor('#8f4b2e')
          .textAlign(TextAlign.Center)
      }
      .width('90%').height(120).padding(10).backgroundColor('#deab8a')
 
      Text('flexShrink').fontSize(12).fontColor('#36D').width('90%')
      // flexShrink()表示该元素的压缩比例，它对超出的总尺寸进行计算
      // 压缩比例为0则不压缩
      Flex({direction:FlexDirection.Row}) {
        Text('flexShrink(0)')
          .flexShrink(0)
          .width('50%')
          .height(100)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
        Text('default flexShrink')  // 默认情况下 flexShrink的值值是1
          .width('40%')
          .height(100)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
        Text('flexShrink(1)')
          .flexShrink(1)
          .width('40%')
          .height(100)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
      }
      .width('90%').height(120).padding(10).backgroundColor('#deab8a')
 
      Text('alignSelf').fontSize(12).fontColor('#36D').width('90%')
      // alignSelf会覆盖掉Flex布局容器中的alignItems设置
      Flex({direction: FlexDirection.Row,alignItems: ItemAlign.Center}) {
        Text('no alignSelf,height:70')
          .width('33%')
          .height(70)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
        Text('alignSelf End')
          .alignSelf(ItemAlign.End)
          .width('33%')
          .height(70)
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
        Text('no alignSelf,height:100%')
          .width('34%')
          .height('100%')
          .backgroundColor('#f391a9')
          .textAlign(TextAlign.Center)
      }
      .width('90%').height(120).padding(10).backgroundColor('#deab8a')
 
    }
    .width('100%')
    .margin({top: 5})
  }
}

1.5、边框设置

属性

名称	参数类型	描述
border	{ width?:Length \| EdgeWidths, color?:ResourceColor \| EdgeColors, radius?:Length \| BorderRadiuses, style?:BorderStyle \| EdgeStyles }	统一边框样式设置 width:边框的宽度 color:边框的颜色 radius:边框圆角半径 style:设置边框样式边框宽度默认值为0，也就是不显边框
borderStyle	BorderStyle \| EdgeStyles	设置边框样式默认值：BorderStyle.Solid 注意：api 9后支持ArkTS卡片中使用，但只支持设置相同的边框样式
borderWidth	Length \| EdgeWidths	设置边框的宽度，不支持百分比注意：api 9后支持ArkTS卡片中使用，但只支持设置相同的边框宽度
borderColor	ResourceColor \| EdgeColors	设置边框颜色默认值：Color.Black 注意：api 9后支持ArkTS卡片中使用，但只支持设置相同的边框颜色
borderRadius	Length \| BorderRadiuses	设置边框的圆角半径，不支持百分比注意：api 9后支持ArkTS卡片中使用，但只支持设置相同的边框圆角半径

EdgeWidths

api 9中支持的，引入这个对象时，至少要传入一个参数参

其相关的参数如下：

left:Length 左边框的宽度

right:Length 右边框的宽度

top:Length 上边框的宽度

bottom:Length 下边框宽度

EdgeColors

api 9中支持的，引入这个对象时，至少要传入一个参数参

其相关的参数如下：

left:ResourceColor 左边框的颜色

right:ResourceColor 右边框的颜色

top:ResourceColor 上边框的颜色

bottom:ResourceColor 下边框颜色

EdgeRadiuses

api 9中支持的，引入这个对象时，至少要传入一个参数参

其相关的参数如下：

topLeft:Length 左上角圆角半径

topRight:Length 右上角圆角半径

bottomLeft:Length 左下角圆角半径

bottomRight:Length 右下角圆角半径

EdgeStyles

api 9中支持的，引入这个对象时，至少要传入一个参数参

其相关的参数如下：

left:BorderStyle 左边框的样式

right:BorderStyle 右边框的样式

top:BorderStyle 上边框的样式

bottom:BorderStyle 下边框样式


@Entry
@Component
struct BorderTest {
 
  build() {
    Column({space: 10}) {
      Flex({justifyContent: FlexAlign.SpaceAround,alignItems:ItemAlign.Center}) {
        Text('dashed')
          .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor('#003a6c').borderRadius(10)
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
        Text('dotted')
          .border({width: 5, color: '#769149', radius: 10, style: BorderStyle.Dotted})
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
      }.width('100%').height(150)
 
      Text('.border')
        .fontSize(30)
        .width(300)
        .height(300)
        .border({
          width: {left: '50px',right: '100px',top: '200px',bottom: '300px'},
          color: {left: '#1a2933', right: '#401c44', top: Color.Pink, bottom: Color.Orange},
          radius: {
            topLeft: 10,
            topRight: 20,
            bottomLeft:40,
            bottomRight: 60
          },
          style: {
            left: BorderStyle.Dotted,
            right: BorderStyle.Dotted,
            top: BorderStyle.Solid,
            bottom: BorderStyle.Dashed
          }
        }).textAlign(TextAlign.Center)
    }
  }
}

1.6、图片边框设置

名称

参数类型

描述

borderImage

BorderImageOption

图片边框或渐变色边框

支持在卡片中使用

BorderImageOption

souurce:string|Resource|linearGradient 边框图片源或渐变色设置

slice:Length|EdgeWidths 设置图片边框的切割宽度，默认值为0，当设置为负数时直接取默认值，当设置为Length时，则统一设置四个角的宽度。如果使用EdgeWidths则可以分别设置Top,Bottom,Left,Right

width:Length|EdgeWidths 设置图片边框的宽度，默认值为0，当设置为负数时直接取默认值，当设置为Length时，则统一设置四边的宽度。如果使用EdgeWidths则可以分别设置Top,Bottom,Left,Right

outset:Length|EdgeWidths 设置边框图片向外延生距离，默认值是0，当设置为负数时直接取默认值，当设置为Length时，则统一设置四边的向外延生距离。如果使用EdgeWidths则可以分别设置Top,Bottom,Left,Right
repeat:RepeatMode 设置边框图片的重复方式，默认值：RepeatMode.Stretch

fill:boolean 设置边框图片中心填充，默认值：false

RepeatMode枚举说明：

Repeat 被切割图片重复平铺在图片的边框上，超出部分会被裁剪

Stretch 被切割图片以拉伸填充的方式铺满图片边框

Round 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时压缩被切割图片

Space 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时以空白填充


@Entry
@Component
struct BorderImageTest2 {
  @State WidthValue: number = 0;
  @State SliceValue: number = 0;
  @State OutSetValue: number = 0;
  @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch,RepeatMode.Round,RepeatMode.Space];
  @State SelectIndex: number = 0;
  @State SelectText: string = 'Repeat';
  @State FillValue: boolean = false;
 
  build() {
    Row() {
      Column({ space: 20 }) {
        Row() {
          Text('borderImage').textAlign(TextAlign.Center).fontSize(50)
        }
        .borderImage({
          source: $r('app.media.my_border'),  // 边框图片源或渐变色设置
          slice: this.SliceValue, // 设置图片边框的切割宽度
          width: this.WidthValue, // 设置图片边框的宽度
          outset: this.RepeatValue[this.SelectIndex], // 设置边框图片向外延生距离
          repeat: this.RepeatValue[this.SelectIndex], //  设置边框图片的重复方式
          fill: this.FillValue  // 设置边框图片中心填充
        })
 
        Column() {
          Text(`borderImageSlice = ${this.SliceValue}px`)
          Slider({
            value: this.SliceValue,
            min: 0,
            max: 100,
            style: SliderStyle.OutSet
          })
            .onChange((value:number,mode:SliderChangeMode) => {
              this.SliceValue = value;
            })
        }
 
        Column() {
          Text(`borderImageWidth = ${this.WidthValue}}px`)
          Slider({
            value: this.WidthValue,
            min:0,
            max:100,
            style:SliderStyle.OutSet
          })
            .onChange((value:number,mode:SliderChangeMode) => {
              this.WidthValue = value;
            })
        }
 
        Column() {
          Text(`borderImageOutSet = ${this.OutSetValue}px`)
            Slider({
              value: this.OutSetValue,
              min:0,
              max:100,
              style:SliderStyle.OutSet
            })
              .onChange((value:number,mode:SliderChangeMode) => {
                this.OutSetValue = value;
              })
        }
 
        Row() {
          Text('borderImageRepeat:')
          Select([{value:'Repeat'},{value:'Stretch'},{value:'Round'},{value:'Space'}])
            .value(this.SelectText)
            .onSelect((index:number,text:string) => {
              this.SelectIndex = index;
              this.SelectText = text;
            })
        }
 
        Row() {
          Text(`borderImageFill: ${this.FillValue}`)
          Toggle({type:ToggleType.Switch,isOn: this.FillValue})
            .onChange((isOn:boolean) => {
              this.FillValue = isOn;
            })
        }
      }
      .width('100%')
    }
    .height('100%')
  }
 
}

1.7、背景设置

用来设置组件的背景样式

名称	参数类型	描述
backgroundColor	ResourceColor	设置组件的背景色支持在卡片中使用
backgroundImage	src:ResourceStr, repeat?:ImageRepeat	src:图片地址，支持网络图片资源和本地图片（不支持svg类型的图片） repeat:设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。支持在卡片中使用
backgroundImageSize	{ width?:Length, height?:Length } \| ImageSize	设置背景图像的高度和宽度。当输入为{width:Length,height:Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽度比进行调整 width与height取值范围：[0,+∞] 默认值：ImageSize.Auto 支持在卡片中使用设置为小于0时，按值为0显示
backgroundImagePosition	Position \| Alignment	设置背景图在组件中显示位置，相对于组件左上角的坐标默认值： { x: 0, y: 0 } x和y值设置百分比时，偏移量是相对组件自身宽高计算的支持在卡片中使用


@Entry
@Component
struct BackgroundTest {
 
  build() {
    Column({space:5}) {
      Text('background color').tipStyle()
      // backgroundColor,设置背景颜色
      Row().width('90%').height(50).backgroundColor('#c77eb5').border({width: 1})
 
      Text('background image repeat along X').tipStyle()
      Row()
        // 设置背景图片
        .backgroundImage($r('app.media.my_border'), ImageRepeat.X)
        // 设置背景图像的高度和宽度
        .backgroundImageSize({width: '250px',height:'140px'})
        .width('90%')
        .height(70)
        .border({width: 1})
 
      Text('background image repeat along Y').tipStyle()
      Row()
        .backgroundImage($r('app.media.my_border'), ImageRepeat.Y)
        .backgroundImageSize({width: '500px',height:'120px'})
        .width('90%')
        .height(100)
        .border({width:1})
 
      Text('background image size').tipStyle()
      Row()
        .width('90%').height(150)
        .backgroundImage($r('app.media.my_border'), ImageRepeat.NoRepeat)
        .backgroundImageSize({width: 1000,height:500})
        .border({width: 1})
 
      Text('background fill the box(Cover)').tipStyle()
      // 不保证图片完整的情况下占满盒子
      Row()
        .width(200)
        .height(50)
        .backgroundImage($r('app.media.my_border'), ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Cover)
        .border({width: 1})
 
      Text('background fill the box(Contain)').tipStyle()
      // 保证图片完整的情况下放到最大
      Row()
        .width(200)
        .height(50)
        .backgroundImage($r('app.media.my_border'), ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Contain)
        .border({width: 1})
 
      Text('background image position').tipStyle()
      Row()
        .width(100)
        .height(50)
        .backgroundImage($r('app.media.my_border'), ImageRepeat.NoRepeat)
        .backgroundImageSize({width:1000,height:560})
        // 设置背景图在组件中显示位置，相对于组件左上角的坐标
        .backgroundImagePosition({x: -500, y: -300})
        .border({width: 1})
    }
    .width('100%').height('100%').padding({top: 5})
  }
}
 
@Extend(Text) function tipStyle() {
  .fontSize(12).width('90%').fontColor('#36D')
}

1.8、透明度设置

用来设置组件的透明度

名称

参数类型

描述

optacity

number | Resource

元素的透明度配置

取值范围：[0,1]

1表示不透明，0表示完全透明（看不到组件，但是在布局中占位）

默认值：1

支持卡片中使用

注意：子组件可以继承父组件此属性


@Extend(Text) function tipStyle1() {
  .fontSize(12).width('90%').fontColor('#36D')
}
 
@Extend(Text) function opacityStyle(opacity:number) {
  .width('90%').height(50).opacity(opacity).backgroundColor('#005344')
}
 
@Entry
@Component
struct OpacityTest {
 
  build() {
    Column({space: 5}) {
      // @ts-ignore
      Text('opacity(1)').tipStyle1()
      Text().opacityStyle(1)
      Text('opacity(0.7)').tipStyle1()
      Text().opacityStyle(0.7)
      Text('opacity(0.4)').tipStyle1()
      Text().opacityStyle(0.4)
      Text('opacity(0.1)').tipStyle1()
      Text().opacityStyle(0.1)
      Text('opacity(0)').tipStyle1()
      Text().opacityStyle(0)
    }
    .width('100%')
    .padding({top:5})
  }
}

1.9、显隐控制

控制组件是否可见

名称

参数类型

描述

visibility

Visibility

控制当前组件显示或隐藏

默认值：Visibility.Visible

支持卡片中使用

注意：根据场景不同可以使用条件渲染来代替


@Entry
@Component
struct VisibilityTest {
 
  build() {
    Column() {
      Column() {
        // 隐藏组件不参与占位
        Text('None').fontSize(12).width('90%').fontColor('#36D')
        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor('#008792')
 
        // 隐藏组件参与占位
        Text('Hidden').fontSize(12).width('90%').fontColor('#36D')
        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor('#008792')
 
        // 显示组件，默认情况下就是显示模式
        Text('Visible').fontSize(12).width('90%').fontColor('#36D')
        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor('#008792')
      }
      .width('90%').border({width: 1})
    }
    .width('100%').margin({top: 5})
  }
}

1.10、禁用控制

控制组件是否可交互，可交互状态下可以响应点击事件、触摸事件、拖拽事件、按键事件、鼠标事件

名称

参数类型

描述

enable

boolean

为true则可交互为false不可交互

默认值：true

支持在卡片中使用


import Prompt from '@system.prompt'
@Entry
@Component
struct EnableTest {
  @State isEnable: boolean = false
 
  build() {
    Flex({justifyContent: FlexAlign.SpaceAround}){
      Button('点击我').enabled(this.isEnable).backgroundColor('#78a355').opacity(0.8)
        .onClick(() => {
          Prompt.showToast({
            message:'你点击了按钮',
            duration:2000
          })
        })
      Row(){
        Text('切换状态:').fontSize(12).fontColor('#36D').lineHeight(20)
        Toggle({type: ToggleType.Switch,isOn: this.isEnable})
          .onChange((isOn:boolean) => {
            this.isEnable = isOn;
          })
      }
    }
    .width('100%')
    .padding({top: 5})
  }
}

1.11、浮层

用来设置组件的遮罩文本

名称

参数类型

描述

overlay

value:string,

options?:{

align?:Alignment,

offset?:{x?:number,y?:number}

}

在当前组件上设置遮罩文本

value：文本内容

options：文本定位

默认值：

{

align:Alignment.TopStart,

offset:{x:0,y:0}

}

支持在卡片中使用


@Entry
@Component
struct OverlayTest {
 
  build() {
    Column() {
      Column(){
        Text('floating layer')
          .fontSize(12).fontColor('#36D').maxLines(1)
        Column() {
          Image($r('app.media.my_border'))
            .width(240).height(240)
            .overlay('这里的文本是图片组件上的遮罩文本',{
              align: Alignment.Bottom,
              offset: {x: 0, y: -15}
            })
        }
        .border({width:2,color:Color.Black})
      }.width('100%')
    }.padding({top: 15})
 
  }
}

1.12、Z序控制

用来控制组件的堆叠循序

名称

参数类型

描述

zIndex

number

同一容器中兄弟组件显示层级关系

zIndex值越大，显示的层级越高

支持在卡片中使用


@Entry
@Component
struct ZIndexTest {
 
  build() {
    Column(){
      Stack() {
        // stack会重叠组件，默认后定义的在最上面
        // 具有较高zIndex值的元素会在zIndex较小的元素前面
        Text('1, zIndex(2)')
          .size({width: '40%', height: '30%'}).backgroundColor('#b3424a')
          .textAlign(TextAlign.Center)
          .zIndex(2)
        Text('2, default zIndex(1)')
          .size({width: '70%', height: '50%'}).backgroundColor('#6d8346')
          .align(Alignment.TopStart)
          .zIndex(1)
        Text('3, zIndex(0)')
          .size({width: '90%', height: '80%'}).backgroundColor('#867892')
          .align(Alignment.TopStart)
      }.width('100%').height(200)
    }.width('100%').height(200)
  }
}

1.13、图形变换

用于对组件进行旋转、平移、缩放、矩阵变换等操作。

名称	参数说明	描述
rotate	{ x?:number, y?:number, z?:number, angle:number \| string, centerX?:number \| string, centerY?:number \| string }	可使组件在以组件左上角为坐标原点坐标系进行旋转其中x,y,z指定一个矢量，作为旋转轴 angle：指定旋转的角度，当为负值时表示相对于旋转轴逆时针旋转 centerX,centerY用于指定旋转的中心点默认值： { x:0, y:0, z:0, centerX:'50%', centerY:'50%' } 支持在卡片中使用
translate	{ x?:number \| string, y?:number \| string, z?:number \| string }	可使组件在以组件左上角为坐标原点的坐标系中进行移动,x,y,z的值分别表示在对应轴上移动的距离值为正时表示向对应轴的正向移动，值为负时表示向对应轴的反向移动支持在卡片中使用
scale	{ x?:number, y?:number, z?:number, centerX?:number \| string, centerY?:number \| string }	可以分别设置X轴、Y轴、Z轴的缩放比例,默认值是1 同时可以通过centerX和centerY设置缩放中心点默认值： { x:0, y:0, z:0, centerX:'50%', centerY:'50%' } 支持卡片中使用
transform	Matrix4Transit	设置当前组件的变换矩阵


import matrix4 from '@ohos.matrix4'
@Extend(Text) function textStyleExtend() {
  .fontColor('#36D').padding(15).fontSize(12)
}
 
@Extend(Row) function rowStyleExtend(color:ResourceStr) {
  .width(100).height(100).backgroundColor(color)
}
 
@Entry
@Component
struct TransformTest {
 
  build() {
    Column(){
      Text('rotate').width('90%').textStyleExtend()
      Row()
        // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
        .rotate({
          x: 0,
          y: 0,
          z: 1,
          centerX: '50%',
          centerY: '50%',
          angle: 300
        })
        .rowStyleExtend('#ef5b9c')
 
      Text('translate').textStyleExtend()
      Row()
        // x轴方向平移100，y轴方向平移10
        .translate({x: 100,y:10})
        .rowStyleExtend('#f47920')
 
      Text('scale').textStyleExtend()
      Row()
        // 高度缩小一倍，宽度放大一倍，z轴在2D下看不到效果的
        .scale({x:2,y:0.5})
        .rowStyleExtend('#87843b')
 
      Text('Matrix4').textStyleExtend()
      Row()
        .rowStyleExtend('#003a6c')
        .transform(matrix4.identity().translate({x: 50, y: 50}).scale({x: 1.5,y:1}).rotate({
          x:0,
          y:0,
          z:1,
          angle:60
        }))
    }
    .width('100%').margin({top: 5})
  }
}

1.14、图像效果

设置组件的模糊、阴影效果以及设置图片的图像效果

名称	参数类型	描述
blur	number	为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊取值范围：[0,+∞) 支持卡片中使用
backdropBlur	number	为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。取值范围：[0,+∞) 支持卡片中使用
shadow	{ radius:number\|Resource, color?:Color\|string\|Resource, offesetX?:number \| Resource, offsetY?:number \| Resource }	为当前组件添加阴影效果。 radius为模糊半径，必填 color为阴影的颜色，默认是灰色 offsetX为x轴的偏移量，默认是0 offsetY为y轴的偏移量，默认是0 偏移量的单位是px 支持在卡片中使用
grayscale	number	为当前组件添加灰度效果,值定义为灰度转换的比例默认值：0.0 取值范围：[0,1] 入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化设置小于0的值时，按值为0处理，设置大于1的值时，按值为1处理。支持在卡片中使用
brightness	number	为当前组件添加高光效果，入参为高光比例值为1时无效果，小于1则变暗，0为全黑，大于1则亮度增加取值范围:[0,+∞] 默认值：1.0 支持在卡片中使用
saturate	number	为当前组件添加饱和度效果（饱和度为颜色中的含色成分和消色成分(灰)的比例）入参为1显示原图大于1含色成分越高，饱和度越高小于1消色成分越高，饱和度越低默认值：1.0 支持在卡片中使用
contrast	number	为当前组件添加对比度效果入参数为对比度的值当值为1时显示原图，值越大对比度越高当值为0时显示全灰色取值范围：[0,+∞) 默认值：1.0 当设置小于0的值时，按值为0处理支持卡片中使用
invert	number	反转输入图像入参为图像反转比例值为1时完全反转，为0时图像无变化默认值：0 设置值小于0时按0处理支持在卡片中使用
sepia	number	把图像转为深褐色入参为图像反转的比例值为1则完全是深褐色的，值为0图像无变化默认值：0 支持在卡片中使用
hueRotate	number \| string	色相旋转效果入参为旋转角度取值范围：(-∞, +∞) 默认值：0 支持在卡片中使用
colorBlend	Color \| stirng \| Resorce	为当前组件添加颜色叠加效果入参为叠加的颜色支持在卡片中使用

字体背景模糊：


@Entry
@Component
struct ImageEffectsTest1 {
 
  build() {
    Column({space: 10}) {
      // 模糊字体
      Text('字体模糊').fontSize(12).fontColor('#36D').width('90%')
      Flex({alignItems: ItemAlign.Center}) {
        Text('正常字休').margin(10)
        Text('模糊级别1')
          .blur(1).margin(10)
        Text('模糊级别2')
          .blur(2).margin(10)
        Text('模糊级别3')
          .blur(3).margin(10)
      }
      .width('90%').height(40)
      .backgroundColor('#feeeed')
 
      // 背景模糊
      Text('背景模糊').fontSize(12).fontColor('#36D').width('90%')
      Text()
        .width('90%')
        .height(40)
        .backdropBlur(5)
        .backgroundImage($r('app.media.my_border'))
        .backgroundImageSize({width: 1200,height: 160})
    }
    .width('100%').margin({top: 5})
  }
}

图像效果：


@Entry
@Component
struct ImageEffectsTest2 {
 
  build() {
    List({space: 10}) {
      ListItem(){
        Column(){
          Text('阴影效果').fontSize(12).fontColor('#36D').width('90%')
          Image($r('app.media.my_border'))
            .width('90%')
            .height(60)
            .shadow({ radius: 10,
              color: '#afb4db',
              offsetX: 20,
              offsetY: 30 })
        }.width('100%')
      }
 
      ListItem(){
        Column({space:5}){
          // 灰度设置为0~1，当为1时则完全灰度了
          Text('灰度效果').fontSize(12).fontColor('#36D').width('90%')
          Image($r('app.media.my_border')).width('90%').height(40).grayscale(0.8)
          Image($r('app.media.my_border')).width('90%').height(40).grayscale(0.4)
        }.width('100%')
      }
 
      ListItem(){
        Column({space:5}){
          // 高光效果，1为正常图片，小于1则变暗，大于1则变亮
          Text('高光效果').fontSize(12).fontColor('#36D').width('90%')
          Image($r('app.media.my_border')).width('90%').height(40).brightness(1.3)
        }
        .width('100%')
      }
 
      ListItem(){
        Column({space:5}){
          // 饱和度，原图是1，大于1含色成分越高，饱和度越高；小于1消色成分越高，饱和度越低
          Text('饱和度').fontSize(12).fontColor('#36D').width('90%')
          Image($r('app.media.my_border')).width('90%').height(40).saturate(2.0)
          Image($r('app.media.my_border')).width('90%').height(40).saturate(0.5)
        }
        .width('100%')
      }
 
      ListItem(){
        Column({space:5}){
          // 对比度，原图为1，大于1则越清晰，小于1则越模糊
          Text('对比度').fontSize(12).fontColor('#36D').width('90%')
          Image($r('app.media.my_border')).width('90%').height(40).contrast(2.0)
          Image($r('app.media.my_border')).width('90%').height(40).contrast(0.5)
        }
        .width('100%')
      }
 
      ListItem(){
        Column({space:5}){
          // 图像反转比例
          Text('图像反转').fontSize(12).fontColor('#36D').width('90%')
          Image($r('app.media.my_border')).width('90%').height(40).invert(0.2)
          Image($r('app.media.my_border')).width('90%').height(40).invert(0.8)
        }
        .width('100%')
      }
 
      ListItem(){
        Column({space:5}){
          // 叠加添色
          Text('叠加添色').fontSize(12).fontColor('#36D').width('90%')
          Image($r('app.media.my_border')).width('90%').height(40).colorBlend(Color.Green)
          Image($r('app.media.my_border')).width('90%').height(40).colorBlend(Color.Blue)
        }
        .width('100%')
      }
 
      ListItem(){
        Column({space:5}){
          // 深褐色
          Text('深褐色').fontSize(12).fontColor('#36D').width('90%')
          Image($r('app.media.my_border')).width('90%').height(40).sepia(0.8)
        }
        .width('100%')
      }
 
      ListItem(){
        Column({space:5}){
          // 色相旋转
          Text('色相旋转').fontSize(12).fontColor('#36D').width('90%')
          Image($r('app.media.my_border')).width('90%').height(40).hueRotate(90)
        }
        .width('100%')
      }
 
    }
    .width('100%')
    .margin({top: 5})
  }
}

1.15、形状裁剪

用于对组件进行裁剪、遮罩处理

名称

参数类型

描述

clip

Circle | Ellipse | Path | Rect | boolean

为相应类型的组件，按指定的形状对当前组件进行裁剪

参数为boolean类型时，设置是否按照父容器边缘轮廓进行裁

默认值：false

支持在卡片中使用

mask

Circle | Ellipse | Path | Rect

在当前组件上加上指定形状的遮罩


@Entry
@Component
struct ClipTest {
 
  build() {
    Column({space: 15}) {
      Text('clip').fontSize(12).width('90%').fontColor('#36D')
      Row() {
        Image($r('app.media.my_border'))
          .width('500px')
          .height('300px')
      }
      .clip(true) // 这里要设置为true,否则下方的圆角不会生效
      .borderRadius(35)
 
      Image($r('app.media.my_border'))
        .width('500px')
        .height('300px')
        // 使用一个300px直径的圆对图片进行裁剪
        .clip(new Circle({width: '300px', height: '300px'}))
 
      Text('mask').fontSize(12).width('90%').fontColor('#36D')
      Image($r('app.media.my_border'))
        .width('500px')
        .height('300px')
        //使用一个500*300的方形进行遮罩
        .mask(new Rect({width:'500px', height: '300px'}).fill(Color.Gray))
    }
    .width('100%')
    .margin({top: 15})
  }
}

1.16、文本样式

用来设置文的样式

名称	参数类型	描述
fontColor	ResourceColor	设置字体的颜色支持在卡片中使用
fontSize	Length	设置字体的大小单位为fp 默认值：16 支持在卡片中使用
fontStyle	FontStyle	设置字体的样式默认值是：FontStyle.Normal 支持在卡片中使用
fontWeight	number \| FontWeight \| string	设置字休的粗细 number值取值范围[100,900],取值间隔是100，默认值是400 FontWeight中是字体粗细的枚举值："bold"、"bolder"、"lighter"、"regular"、"medium" 默认是：FontWeight.Normal 支持在卡片中使用
fontFamily	string \| Resouce	设置字体列表默认字体：'HarmonyOS Sans' 支持卡片中使用
lineHeight	string \| number \| Resource	设置文本的行高设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp 支持卡片中使用
decoration	{ type:TextDecorationType color?:ResourceColor }	设置文本装饰线样式及其颜色。默认值： { type: TextDecorationType.None, color：Color.Black } 支持卡片中使用


@Entry
@Component
struct TextStyleTest {
 
  build() {
    Column({space: 5}){
      Text('默认文本')
      Text('红色字体文本').fontColor(Color.Red)
      Text('默认字体大小')
      Text('字体大小为10pf').fontSize(10)
      Text('斜体样式文本').fontStyle(FontStyle.Italic)
      Text('字体粗细为700').fontWeight(700)
      Text('字体粗细为Bolder').fontWeight(FontWeight.Bolder)
      Text('字本装饰器').decoration({
        type:TextDecorationType.LineThrough,
        color:Color.Red
      })
    }
    .width('100%')
    .padding({top:5})
  }
}

1.17、渐变颜色

设置组件的颜色渐变效果

名称	参数说明	描述
linearGradient	{ angle?:number\|string, direction?:GradientDirection, colors:Array<[ResourceColor,number]>, repeating?:boolean }	线性渐变 angle:线性渐变的起始角度。0点方向顺时针旋转为正向角度黑认值：180 direction:线性渐变的方向，设置过angle则不生效默认值：GradientDirection.Bottom colors:渐变色描述 repeating:为渐变的颜色重复着色默认值：false 支持卡片使用
sweepGradient	{ center:Point, start?:number \| string, end?:number \| string, rotation?:number \| string, colors:Array<[ResourceColor,number]>, repeating?:boolean }	角度渐变 center:角度渐变的中心点，相对于当前组件左上角的坐标 start:角度渐变的起点，默认值：0 end:角度渐变的终点，默认值：0 rotation:角度渐变的旋转角度，默认值：0 colors:渐变色的颜色描述 repeating:为渐变的颜色重复着色,默认值：false 支持在卡片中使用注意：设置为小于0的值时，按值为0处理。设置为大于360的值时，按值为360处理。当start、end、rotation的数据类型为string，值为"90"或"90%"，与90效果一致
radialGradient	{ center:Point, radius:number \| string, colors:Array<[ResourceColor,number]>, repeating?:boolean }	径向渐变 center:径向渐变的中心点，相对于当前组件左上角的坐标 radius:径向渐变的半径，取值范围[0,+∞} 设为小于0的值时，按0处理 color:渐变的颜色描述 repeating:渐变颜色重复着色默认值：false 支持卡片中使用


@Entry
@Component
struct ColorGradientTest {
  build() {
    Column({ space: 10 }) {
      Text('linearGradient').fontSize(12).fontColor('#36D').width('90%')
      Row()
        .width('90%')
        .height(30)
        .linearGradient({
          angle:90,
          colors:[['#ef5b9c',0.0],['#f47920',0.6],['#426ab3',1.0]]
        })
      Text('linearGradient Repeat').fontSize(12).width('90%').fontColor('#36D')
      Row()
        .width('90%')
        .height(30)
        .linearGradient({
          direction: GradientDirection.Left,  // 渐变的方向
          // 当颜色数组元素占比小于1时可以使用重复着色,如果不重复则最后一段会使用最后一个颜色值
          colors:[['#ef5b9c',0.0],['#f47920',0.3],['#426ab3',0.5]],
          repeating:true
        })
      Text('sweepGradient').fontSize(12).fontColor('#36D').width('90%')
      Row()
        .width(100)
        .height(100)
        .sweepGradient({
          center:[50,50],
          start:0,
          end:359,
          colors:[['#ef5b9c',0.0],['#f47920',0.6],['#426ab3',1.0]]
        })
      Text('radialGradient Repeat').fontSize(12).fontColor('#36D').width('90%')
      Row()
        .width(100)
        .height(100)
        .radialGradient({
          center:[50,50],
          radius:60,
          colors:[['#ef5b9c',0.0],['#f47920',0.3],['#426ab3',0.5]],
          repeating:true
        })
    }.width('100%').padding({ top: 5 })
  }
}

1.18、Popup控制

为组件绑定popup弹窗，并设置弹窗的内容，交互逻辑和显示状态

名称

参数类型

描述

bindPopup

show:boolean

popup:PopupOptions | CustomPopupOptions

给组件绑定Popup弹窗

show为true弹出弹窗，默认值是false

popup:配置当前弹窗的提示参数

注意：popup弹窗必须等待页面全部构建完成才能展示，因此show不能在页面构建中设置为true，否则会导致popup弹窗显示位置及形状错误

PopupOptions类型说明

名称	类型	描述
message	string	必填弹窗的信息内空
placementOnTop	boolean	非必填是否在组件上方显示，默认是false
primaryButton	{ value:string, action:() => void }	非必填第一个按钮 value:按钮文本 action：点击时的回调函数
secondaryButton	{ value:string, action:() => void }	非必填第二个按钮 value:按钮文本 action：点击时的回调函数
onStateChange	(event:{isVisible:boolean}) => void	非必填弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态
arrowOffset	length	非必填 popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。如果显示在屏幕边缘，气泡会自动左右偏移，数值为0时箭头始终指向绑定组件
showInSubWindow	boolean	非必填是否在子窗口显示气泡默认值为false。

CustomPopupOptions类型说明

名称	类型说明	描述
builder	CustomBuilder	必填提示气泡内容的构造器
placement	Placement	非必填气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置默认值：Placement.Bottom
popupColor	ResourceColor	非必填提示气泡的颜色
enableArrow	boolean	非必填是否显示箭头默认值：true
autoCancel	boolean	非必填页面有操作时，是否自动关闭气泡默认值:true
onStateChange	(event:{isVisible:boolean})=>void	非必填弹窗状态变化事件回调，参数为弹窗当前的显示状态
arrowOffset	Length	非必填 popup箭头在弹窗处的偏移
showInSubWindow	boolean	非必填是否在子窗口显示气泡，默认值为false


import Prompt from '@system.prompt';
@Entry
@Component
struct PoupTest {
  @State handlePopup: boolean = false;
  @State customPopup: boolean = false;
 
  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row({space: 2}) {
      Image($r('app.media.my_border')).width(24).height(24).margin({left: -5})
      Text('Custom Popup').fontSize(12)
    }.width(120).height(50).padding(5)
  }
 
  build() {
    Flex({direction: FlexDirection.Column}) {
      // PopupOptions类型设置弹框的内容
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup;
        })
        .bindPopup(this.handlePopup,{
          message: '使用PopupOptions来设置弹框内容',
          placementOnTop: true, // 是否在组件上方显示
          showInSubWindow: false, // 是否在子窗口显示气泡
          primaryButton: {
            // 第一个按钮
            value: '确定',
            action: () => {
              this.handlePopup = !this.handlePopup
              Prompt.showToast({
                message: '点击了弹窗中的【确定】按钮',
                duration: 2000
              })
            }
          },
          secondaryButton: {
            // 第二个按钮
            value: '取消',
            action: () => {
              this.handlePopup = !this.handlePopup
              Prompt.showToast({
                message: '点击了弹窗中的【取消】按钮',
                duration: 2000
              })
            }
          },
          onStateChange: (e) => {
            if(!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
        .position({x:100, y:50})
 
      // CustomPopupOptions类型设置弹框内容
      Button('CustomPopupOptions')
        .onClick(() => {
          this.customPopup = !this.customPopup;
        })
        .bindPopup(this.customPopup,{
          builder: this.popupBuilder(), // 提示气泡内容的构造器
          placement: Placement.Top, // 气泡组件优先显示的位置
          maskColor: '#6a6da9',
          popupColor: Color.Yellow, // 提示气泡的颜色
          enableArrow: true,  // 是否显示箭头
          showInSubWindow: false,
          onStateChange: (e) => {
            if(!e.isVisible) {
              this.customPopup = false
            }
          }
        })
        .position({x: 80, y: 200})
    }
    .width('100%').padding({top:5})
  }
}

1.19、菜单

为组件绑定弹出式菜单，弹出式菜单以垂直列表形式显示菜单项，可通过长按、点击或鼠标右键触发

名称

参数类型

描述

bindMenu

Array<MenuIte> | CustomBuilder

给组件绑定菜单，点击后弹出菜单

弹出的菜单支持文本和自定义菜单两种

bindContextMenu

content:CustomBilder

responseType:ResponseType

给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。

MenuItem说明

名称	类型	描述
value	string	菜单项文本
action	() => void	点击菜单项的事件回调


import Prompt from '@system.prompt'
@Entry
@Component
struct MenuTest {
  @State listData: number[] = [0,0,0]
 
  @Builder MenuBuilder() {
    Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}) {
      ForEach(this.listData,(item,index) => {
        Column() {
          Row() {
            Image($r('app.media.icon')).width(20).height(20).margin({right:5})
            Text(`Menu${index + 1}`).fontSize(20)
          }
          .height(30)
          .justifyContent(FlexAlign.Center)
          .align(Alignment.Center)
          .onClick(() => {
            Prompt.showToast({
              message: `你点击了【Menu${index + 1}】`
            })
          })
          if(index != this.listData.length - 1) {
            Divider().height(10).width('80%').color('#ccc')
          }
        }.padding(5).height(40)
      })
    }
  }
 
  build() {
    Column(){
      Row(){
        Text('click for Menu').fontSize(12).fontColor('#36D')
          .bindMenu([
            {
              value: '菜单一',
              action:() => {
                Prompt.showToast({
                  message: '点击了菜单一',
                  duration: 2000
                })
              }
            },
            {
              value: '菜单二',
              action:() => {
                Prompt.showToast({
                  message: '点击了菜单二',
                  duration: 2000
                })
              }
            }
          ])
 
        Text('click for Menu').fontSize(12).fontColor('#36D')
          .bindMenu(this.MenuBuilder())
 
      }
      .width('80%')
      .justifyContent(FlexAlign.SpaceAround)
 
 
    }.height('100%').padding(5)
  }
}

1.20、焦点控制

自定义组件的走焦效果，可设置组件是否走焦和具体的走焦顺序，tab键或者方向键切换焦点

名称	参数类型	描述
focusable	boolean	设置当前组件是否可以获焦
tabIndex	number	自定义组件tab键走焦能力 tabIndex >= 0：表示元素是可聚焦的，并且可以通过tab键走焦来访问到该元素 tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通过tab键走焦来访问到该元素默认值：0
defaultFocus	boolean	设置当前组件是否为当前页面上的默认焦点默认值：false
groupDefaultFocus	boolean	设置当前组件是否为当前组件所在容器获焦时的默认焦点默认值：false
focusOnTouch	boolean	设置当前组件是否支持点击获焦能力默认值：false

focusControl

requestFocus(value:string):boolean

方法语句中可使用的全局接口，调用此接口可以主动让焦点转移至参数指定的组件上

返回值boolean表示是否成功给目标组件申请到焦点

焦点事件当前仅支持在真机上显示运行效果。

1.21、悬浮态

设置组件的鼠标悬浮态显示效果

属性：hoverEffect

参数类型：HoverEffect

设置当前组件悬停态下的悬浮效果。

默认值：HoverEffect.Auto


@Entry
@Component
struct HoverTest {
  @State isHoverVal: boolean = false
 
  build() {
    Column({ space: 5 }) {
      Column({ space: 5 }) {
        Text('Scale').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 80 })
        Column()
          .width('80%').height(200).backgroundColor(Color.Gray)
          .position({ x: 40, y: 120 })
          .hoverEffect(HoverEffect.Scale)
          .onHover((isHover: boolean) => {
            console.info('Scale isHover: ' + isHover)
            this.isHoverVal = isHover
          })
        Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 })
        Column()
          .width('80%').height(200).backgroundColor(Color.Gray)
          .hoverEffect(HoverEffect.Highlight)
          .position({ x: 40, y: 420 })
          .onHover((isHover: boolean) => {
            console.info('Highlight isHover: ' +isHover )
            this.isHoverVal = isHover
          })
      }
      .hoverEffect(HoverEffect.None)
      .width('100%').height('100%').border({ width: 1 })
      .onHover((isHover: boolean) => {
        console.info('HoverEffect.None')
        this.isHoverVal = isHover
      })
    }
  }
}

1.22、组件标识

id为组件的唯一标识，在整个应用内唯一。本模块提供组件标识相关接口，可以获取指定id组件的属性，也提供向指定id组件发送事件的功能。

getInspectorByKey

getInspectorByKey(id: string): string

获取指定id的组件的所有属性，不包含子组件信息。

返回的是一个组件属性列表的JSON字符串

getInspectorTree

getInspectorTree(): Object

获取组件树及组件属性

返回的是组件树及组件属性列表的JSON对象

sendEventByKey

sendEventByKey(id: string, action: number, params: string): boolean

给指定id的组件发送事件

action支持取值：10表示点击事件；11表示长按事件

params:为事件参数，无参时传空字符串

返回值，找不到指定id的组件时返回false，其余情况返回true

sendTouchEvent

sendTouchEvent(event: TouchObject): boolean

发送触摸事件

返回值，事件发送失败时返回false，其余情况返回true

sendKeyEvent

sendKeyEvent(event: KeyEvent): boolean

发送按键事件

返回值，事件发送失败时返回false，其余情况返回true

sendMouseEvent

sendMouseEvent(event: MouseEvent): boolean

发送鼠标事件

返回值，事件发送失败时返回false，其余情况返回true

1.23、触摸热区

适用于支持通用点击事件、通用触摸事件、通用手势处理的组件

名称

参数类型

描述

responseRegion

Array<Rectangle> | Retangle

设置一个或多个触摸热区，包括位置和大小

默认触摸热区为整个组件，默认值

{

x：0, // 触摸点相对于组件左上角的x轴坐标

y：0, // 触摸点相对于组件左上角的y轴坐标

width：'100%', // 触摸热区的宽度

height：'100%' // 触摸热区的高度

}

支持在卡片中使用

1.24、多态样式

设置组件不同状态下的样式

在组件结构体中，使用@Styles 的样式方法,如下所示：


@Styles pressedStyles() {
    .backgroundColor("#ED6F21")
    .borderRadius(10)
    .borderStyle(BorderStyle.Dashed)
    .borderWidth(2)
    .borderColor("#33000000")
    .width(120)
    .height(30)
    .opacity(1)
  }

在组件中，使用stateStyles来引入定义的样式，如下所示：


Text("pressed")
        .backgroundColor("#0A59F7")
        .borderRadius(20)
        .borderStyle(BorderStyle.Dotted)
        .borderWidth(2)
        .borderColor(Color.Red)
        .width(100)
        .height(25)
        .opacity(1)
        .fontSize(14)
        .fontColor(Color.White)
        .stateStyles({
          pressed: this.pressedStyles,
        })

1.25、触摸测试控制

设置组件的触摸测试类型。ArkUI开发框架在处理触屏事件时，会在触屏事件触发前，进行按压点和组件区域的触摸测试来收集需要响应触屏事件的组件，然后基于触摸测试结果分发相应的触屏事件。hitTestBehavior属性可以设置不同的触摸测试响应模式，影响组件的触摸测试收集结果，最终影响后续的触屏事件分发。

HitTestMode枚举值有如下：

Default：默认触摸测试效果，自身和子节点都响应触摸测试，但会阻塞兄弟节点的触摸测试

Block:自身响应触摸测试，阻塞子节点和兄弟节点的触摸测试

Transparent:自身和子节点都响应触摸测试，不会阻塞兄弟节点的触摸测试

None:自身不响应触摸测试，不会阻塞子节点和兄弟节点的触摸测试

1.26、分布式迁移标识

组件的分布式迁移标识，指明了该组件在分布式迁移场景下可以将特定状态恢复到对端设备

restoreId: number类型，标记支持分布式迁移的组件Id，用于两端设备组件的配对。同一个应用中各个支持分布式迁移组件的Id必须不同

支持组件：List,Grid,Scorll

1.27、点击控制

设置组件是否可以响应点击事件、触摸事件等手指交互事件

touchable：boolean类型，设置当前组件是否可以响应点击事件、触摸事件等手指交互事件，默认是true

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/199733

名称	参数说明	描术
width	Length	设置组件的自身宽度，缺省的情况组件宽度为其内容的宽度
height	Length	设置组件的自身高度，缺省的情况组件高度为其内容的度度
size	{ width?:Length, height?:Length }	设置组件的宽度尺寸
padding	Padding \| Length	设置组件内边距，当参数为Length时，四个方向的内边距同时生效默认值为0
margin	Margin \| Length	设置组件外边距，当参数为Length时，四个方向的内边距同时生效默认值为0
constraintSize	{ minWidth?:Length, maxWidth?:Length, minHeight?:Length, maxHeight?:Length }	设置约束尺寸，组件布局时，进行尺寸范围限制默认值： { minWidth:0, maxWidth:Infinity, minHeight?:0, maxHeight?:Infinity }
layoutWeight	number \| string	容器尺寸确定时，元素与兄弟元素主轴布局尺寸按权重进行分配，忽略本身尺寸设置，表示自己适应占满剩余空间。默认值：0 注意：仅在Row/Column/Flex布局中生效

名称	参数类型	描述
border	{ width?:Length \| EdgeWidths, color?:ResourceColor \| EdgeColors, radius?:Length \| BorderRadiuses, style?:BorderStyle \| EdgeStyles }	统一边框样式设置 width:边框的宽度 color:边框的颜色 radius:边框圆角半径 style:设置边框样式边框宽度默认值为0，也就是不显边框
borderStyle	BorderStyle \| EdgeStyles	设置边框样式默认值：BorderStyle.Solid 注意：api 9后支持ArkTS卡片中使用，但只支持设置相同的边框样式
borderWidth	Length \| EdgeWidths	设置边框的宽度，不支持百分比注意：api 9后支持ArkTS卡片中使用，但只支持设置相同的边框宽度
borderColor	ResourceColor \| EdgeColors	设置边框颜色默认值：Color.Black 注意：api 9后支持ArkTS卡片中使用，但只支持设置相同的边框颜色
borderRadius	Length \| BorderRadiuses	设置边框的圆角半径，不支持百分比注意：api 9后支持ArkTS卡片中使用，但只支持设置相同的边框圆角半径

HarmonyOS开发(十一)：ArkTS组件通用属性_arkts 设置空间宽度填满 左右留边距

1、组件通用属性

1.1、尺寸设置

1.2、位置设置

1.3、布局约束

1.4、Flex布局

1.5、边框设置

1.6、图片边框设置

1.7、背景设置

1.8、透明度设置

1.9、显隐控制

1.10、禁用控制

1.11、浮层

1.12、Z序控制

1.13、图形变换

1.14、图像效果

1.15、形状裁剪

1.16、文本样式

1.17、渐变颜色

1.18、Popup控制

1.19、菜单

1.20、焦点控制

1.21、悬浮态

1.22、组件标识

1.23、触摸热区

1.24、多态样式

1.25、触摸测试控制

1.26、分布式迁移标识

1.27、点击控制

HarmonyOS开发(十一)：ArkTS组件通用属性_arkts 设置空间宽度填满左右留边距