HarmonyOS开发(十一):ArkTS组件通用属性

这篇具有很好参考价值的文章主要介绍了HarmonyOS开发(十一):ArkTS组件通用属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、组件通用属性

1.1、尺寸设置

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

相关属性

名称 参数说明 描术
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布局中生效

@Entry
@Component
struct Index {

  build() {
    // 列部局容器(从上到下,每个组件之间有10vp的间隙)
    Column({space: 10}) {
      Text('margin and padding').fontSize(12).fontColor('#36D').width('90%')

      Row() {
        Row() {
          // size设置组件的宽高
          Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Blue)
        }
        // 设置组件的宽(80vp),高(90vp),内边距(10),外边距(20),背景色为白色
        .width(80).height(90).padding(10).margin(20).backgroundColor(Color.White)
      }
      // 组件背景色为粉色
      .backgroundColor(Color.Pink)

      Text('constraintSize').fontSize(12).fontColor('#36D').width('90%')
      Text('这是一个长的字符串,这个字符串会非常的长,这是一个长的字符串,这个字符串会非常的长,这是一个长的字符串,这个字符串会非常的长,这是一个长的字符串,这个字符串会非常的长')
        .width('90%')
        // 约束组件最大宽度是200vp
        .constraintSize({maxWidth: 200})

      Text('layoutWeight').fontSize(12).fontColor('#36D').width('90%')
      // 父容器尺寸确定,设置了layoutWeight的子元素在主轴布局尺寸按权重进行分配,忽略本身尺寸设置
      Row() {
        
        Text('layoutWeight(1)')
          .size({ width: '30%', height: 100 }).backgroundColor(Color.Orange).textAlign(TextAlign.Center)
        // 权重为1,占主轴的1/3
          .layoutWeight(1)
        Text('layoutWeight(2)')
          .size({ width: '30%', height: 100 }).backgroundColor(Color.Red).textAlign(TextAlign.Center)
        // 权重为2,占主轴的2/3
          .layoutWeight(2)
        Text('no layoutWeight')
          .size({ width: '30%', height: 100 }).backgroundColor(Color.Gray).textAlign(TextAlign.Center)
      }
      .size({ width: '90%', height: 120 }).backgroundColor(Color.Yellow)
    }.width('100%').margin({ top: 5})
  }
}

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文章来源地址https://www.toymoban.com/news/detail-809218.html

到了这里,关于HarmonyOS开发(十一):ArkTS组件通用属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:边框设置)

    设置组件边框样式。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 border(value: BorderOptions) 设置边框样式。 卡片能力:  从API version 9开始,该接口支持在ArkTS卡片中使用。 系统能力:  SystemCapability.ArkUI.ArkUI.Full 参数: 参数

    2024年04月23日
    浏览(55)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:安全区域)

    安全区域是指页面的显示区域,默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠,默认情况下开发者开发的界面都被布局在安全区域内。提供属性方法允许开发者设置组件绘制内容突破安全区域的限制,通过expandSafeArea属性支持组件不改变布局情况下扩展其绘制

    2024年04月29日
    浏览(43)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:尺寸设置)

    用于设置组件的宽高、边距。 说明: 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 width(value: Length) 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽,则会画出父组件的范围。 从API ver

    2024年03月15日
    浏览(87)
  • HarmonyOS(二)—— 初识ArkTS开发语言(下)之ArkTS声明式语法和组件化基础

    通过前面ArkTS开发语言(上)之TypeScript入门以及ArkTS开发语言(中)之ArkTS的由来和演进俩文我们知道了ArkTS的由来以及演进,知道了ArkTS具备了声明式语法和组件化特性,今天,搭建一个可刷新的排行榜页面。在排行榜页面中,使用循环渲染控制语法来实现列表数据渲染,使

    2024年02月04日
    浏览(58)
  • 【HarmonyOS北向开发】-05 ArkTS开发语言-ArkTS开发实践

    飞书原文档:Docs 

    2024年02月11日
    浏览(54)
  • 【HarmonyOS】ArkTS语言介绍与组件方式运用

            从今天开始,博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”,对于刚接触这项技术的小伙伴在学习鸿蒙开发之前,有必要先了解一下鸿蒙,从你的角度来讲,你认为什么是鸿蒙呢?它出现的意义又是什么?鸿蒙仅仅是一个手机操作系统吗

    2024年02月03日
    浏览(42)
  • 【HarmonyOS北向开发】-04 ArkTS开发语言-ArkTS基础知识

     飞书原文档:Docs

    2024年02月11日
    浏览(55)
  • HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack

    堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。该组件从API Version 7开始支持。可以包含子组件。 一、接口 Stack(value?: { alignContent?: Alignment }) 从API version 9开始,该接口支持在ArkTS卡片中使用。 二、属性 除支持通用属性外,还支持以下属性: 三、示例

    2024年02月07日
    浏览(39)
  • harmonyOS基础(三)- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)

    大家好!我是黑臂麒麟,一位6年的前端; 随着 鸿蒙4.0 的发布。鸿蒙社区不断壮大,且市场对 harmonyOS 应用认可度越来越高。很多公司开始对 鸿蒙应用开发 越来越重视。 之前想入坑鸿蒙,一直犹豫未下定决心学习。这次不再等待,开始系统学习起来。 此系列文章只做 harm

    2024年02月20日
    浏览(47)
  • 【HarmonyOS】ArkTS 组件内转场动画,动画播放时颜色异常问题

    【】 HarmonyOS、ArkTS、组件内转场动画、颜色异常 【问题描述】 根据组件内转场动画文档中示例编写代码,使用动画转场组件button,并给button设置背景色让button透明度为0,实现动画转场时,会先出现默认蓝色button,然后动画再消失,问题代码如下所示: 问题现象请见下

    2024年02月15日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包