ArkTS通用属性

于 2024-08-03 20:00:21 发布
阅读量723 收藏 16
点赞数 30
分类专栏： 鸿蒙开发学习 文章标签： harmonyos ArkTs 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiyibushiwei/article/details/140890818
版权

目录

一、尺寸设置

宽高，外边距，内边距，尺寸size

layoutWeight

constraintSize

二、位置设置

align

direction

position

offset

使用Edge方式position,offset

三、布局约束

aspectRatio

displayPriority

四、Flex布局

flexBasis

flexGrow

flexShrink

alignSelf

五、边框

border

六、背景设置

backgroundColor

backgroundImage

backgroundImageSize

backgroundImagePosition

七、透明度设置

opacity

八、显隐控制

visibility

九、禁用控制

enabled

十、浮层

overlay

 十一、Z序控制

zIndex

十二、图形变换

十三、图像效果

blur

backdropBlur

shadow

grayscale

brightness

saturate

contrast

invert

sepia

hueRotate

十四、形状裁剪

clip12+

clipShape12+

mask12+

maskShape12+

十五、颜色渐变

linearGradient

sweepGradient

radialGradient

一、尺寸设置

官方文档

宽高，外边距，内边距，尺寸size

Row() {
        // 宽度80 ,高度80 ,外边距20(蓝色区域），上下左右的内边距分别为5、15、10、20（白色区域）
        Row() {
          Row().size({ width: '100%', height: '100%' }).backgroundColor(Color.Yellow)
        }
        .width(80)
        .height(80)
        .padding({ top: 5, left: 10, bottom: 15, right: 20 })
        .margin(20)
        .backgroundColor(Color.White)
      }.backgroundColor(Color.Blue)

layoutWeight

layoutWeight(value: number | string)

对子组件进行重新布局。

父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。

默认值：0

仅在Row/Column/Flex布局中生效。

 // 父容器尺寸确定时，设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。
      Row() {
        // 权重1，占主轴剩余空间1/3
        Text('layoutWeight(1)')
          .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center)
          .layoutWeight(1)
        // 权重2，占主轴剩余空间2/3
        Text('layoutWeight(2)')
          .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
          .layoutWeight(2)
        // 未设置layoutWeight属性，组件按照自身尺寸渲染
        Text('no layoutWeight')
          .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
      }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE)

constraintSize

设置约束尺寸。constraintSize的优先级高于Width和Height。取值结果参考constraintSize取值对width/height影响。

默认值：

{

minWidth: 0,

maxWidth: Infinity,

minHeight: 0,

maxHeight: Infinity

}

单位：vp

Text('this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text')
        .width('90%')
        .constraintSize({ maxWidth: 200 })

二、位置设置

align

设置容器元素绘制区域内的子元素的对齐方式。

只在Stack、Button、Marquee、StepperItem、text、TextArea、TextInput、FolderStack中生效，其中和文本相关的组件Marquee、text、TextArea、TextInput的align结果参考textAlign。

不支持textAlign属性的组件则无法设置水平方向的文字对齐。

默认值：Alignment.Center

说明：

在Stack中该属性与alignContent效果一致，只能设置子组件在容器内的对齐方式。

.align(Alignment.TopStart)

 // 元素内容<元素宽高，设置内容在与元素内的对齐方式
        Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Stack() {
          Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C)
          Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9)
        }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4)
        .align(Alignment.BottomEnd)

 

direction

.direction(Direction.Ltr)

设置容器元素内主轴方向上的布局。

属性配置为auto的时候，按照系统语言方向进行布局。

该属性在Column组件上不生效。

默认值：Direction.Auto

 

// 父容器设置direction为Direction.Ltr，子元素从左到右排列
        Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Row() {
          Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
          Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
          Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
          Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
        }
        .width('90%')
        .direction(Direction.Ltr)

position

绝对定位，确定子组件相对父组件的位置。当父容器为Row/Column/Flex时，设置position的子组件不占位。

Position类型基于父组件左上角确定位置;Edges类型基于父组件四边确定位置，top/left/right/bottom分别为组件各边距离父组件相应边的边距，通过边距来确定组件相对于父组件的位置;

LocalizedEdges类型基于父组件四边确定位置，支持镜像模式

适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。

不支持在宽高为零的布局容器上设置。

当父容器为RelativeContainer, 且子组件设置了alignRules属性, 则子组件的position属性不生效。

相对于父组件左上角偏移，x,y支持正负数

// 设置子组件左上角相对于父组件左上角的偏移位置
      Row() {
        Text('2 position(30, 10)')
          .size({ width: '60%', height: '30' })
          .backgroundColor(0xbbb2cb)
          .border({ width: 1 })
          .fontSize(16)
          .align(Alignment.Start)
          .position({ x: 30, y: 10 })//直接设置数字x,y
        Text('4 position(50%, 70%)')
          .size({ width: '50%', height: '50' })
          .backgroundColor(0xbbb2cb)
          .border({ width: 1 })
          .fontSize(16)
          .position({ x: '50%', y: '70%' })//也可以设置百分比
      }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })

 设置定位点，本来是左上角，改变这个定位点

  1. // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。
  2. // y为最终定位点距离起点垂直方向间距，y>0向上，反之向下

 .markAnchor({ x: 25, y: 25 })

        Text('text')
          .fontSize('30px')
          .textAlign(TextAlign.Center)
          .size({ width: 25, height: 25 })
          .backgroundColor(Color.Green)
          .markAnchor({ x: 25, y: 25 })//定位点向左25，向上25
        Text('text')
          .fontSize('30px')
          .textAlign(TextAlign.Center)
          .size({ width: 25, height: 25 })
          .backgroundColor(Color.Green)
          .markAnchor({ x: -100, y: -25 })//定位点向右100，向下25
        Text('text')
          .fontSize('30px')
          .textAlign(TextAlign.Center)
          .size({ width: 25, height: 25 })
          .backgroundColor(Color.Green)
          .markAnchor({ x: 25, y: -25 })//定位点向左25，向下25

offset

相对偏移，组件相对原本的布局位置进行偏移。offset属性不影响父容器布局，仅在绘制时调整位置。

         Text('2  offset(15, 30)')
          .size({ width: 120, height: '50' })
          .backgroundColor(0xbbb2cb)
          .border({ width: 1 })
          .fontSize(16)
          .align(Alignment.Start)
          .offset({ x: 15, y: 30 })
        Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center)
        Text('4 offset(-5%, 20%)')
          .size({ width: 100, height: '50' })
          .backgroundColor(0xbbb2cb)
          .border({ width: 1 })
          .fontSize(16)
          .offset({ x: '-5%', y: '20%' })

使用Edge方式position,offset

top,left,bottom,right

.position({bottom: 0, right: 0})

.position({ top: '10%', left: '50%' })

.offset({top: 30, left: 0})

.offset({bottom: 10, right: 30})


      Row() {
        Text('bottom:0, right:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center).position({bottom: 0, right: 0})
        Text('top:0, left:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center).position({top: 0, left: 0})
        Text('top:10%, left:50%').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center).position({ top: '10%', left: '50%' })
        Text('bottom:0, left:30').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center).position({ bottom: 0, left: 30 })
      }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })



      Row() {
        Text('1').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center)
        Text('2 top:30, left:0').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center).offset({top: 30, left: 0})
        Text('3').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center)
        Text('4 bottom:10, right:30').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(12)
          .textAlign(TextAlign.Center).offset({bottom: 10, right: 30})
      }.width('90%').height(150).border({ width: 1, style: BorderStyle.Dashed })

三、布局约束

aspectRatio

指定当前组件的宽高比，aspectRatio = width/height。

// 组件宽度 = 组件高度*1.5 = 90
          Text(item)
            .backgroundColor(0xbbb2cb)
            .fontSize(20)
            .aspectRatio(1.5)
            .height(60)
          // 组件高度 = 组件宽度/1.5 = 60/1.5 = 40
          Text(item)
            .backgroundColor(0xbbb2cb)
            .fontSize(20)
            .aspectRatio(1.5)
            .width(60)

displayPriority

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

默认值：1

说明：

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

小数点后的数字不作优先级区分，即区间为[x, x + 1)内的数字视为相同优先级。例如：1.0与1.9为同一优先级。

子组件的displayPriority均为1时，优先级没有区别。

当子组件的displayPriority大于1时，若父容器空间不足，隐藏低优先级节点。

Text(item.text)
            .width(120)
            .height(60)
            .fontSize(24)
            .textAlign(TextAlign.Center)
            .backgroundColor(0xbbb2cb)
            .displayPriority(3)

四、Flex布局

三个属性

flexBasis

flexBasis(value: number | string)

设置组件的基准尺寸。可以设置宽高

flexGrow

flexGrow(value: number)

设置组件在父容器的剩余空间所占比例。子组件可以分配多余空间

flexShrink

flexShrink(value: number)

设置父容器压缩尺寸分配给此属性所在组件的比例。当父容器为Column、Row时，需设置主轴方向的尺寸。

父组件空间不足，压缩子组件

alignSelf

alignSelf(value: ItemAlign)

子组件在父容器交叉轴的对齐格式。

// alignSelf会覆盖Flex布局容器中的alignItems设置

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }){

         Text('alignSelf End')

                .alignSelf(ItemAlign.End)//子组件覆盖父组件

}

// xxx.ets
@Entry
@Component
struct FlexExample {
  build() {
    Column({ space: 5 }) {
      Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // 基于主轴的基准尺寸
      // flexBasis()值可以是字符串'auto',表示基准尺寸是元素本来的大小,也可以是长度设置，相当于.width()/.height()
      Flex() {
        Text('flexBasis(100)')
          .flexBasis(100) // 这里表示宽度为100vp
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text(`flexBasis('auto')`)
          .flexBasis('auto') // 这里表示宽度保持原本设置的60%的宽度
          .width('60%')
          .height(100)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

      Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // flexGrow()表示剩余空间分配给该元素的比例
      Flex() {
        Text('flexGrow(2)')
          .flexGrow(2) // 父容器分配给该Text的宽度为剩余宽度的2/3
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('flexGrow(1)')
          .flexGrow(1) // 父容器分配给该Text的宽度为剩余宽度的1/3
          .height(100)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

      Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // flexShrink()表示该元素的压缩比例，基于超出的总尺寸进行计算
      // 第一个text压缩比例是0,另外两个都是1,因此放不下时等比例压缩后两个,第一个不压缩
      Flex({ direction: FlexDirection.Row }) {
        Text('flexShrink(0)')
          .flexShrink(0)
          .width('50%')
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('default flexShrink') // 默认值为1
          .width('40%')
          .height(100)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
        Text('flexShrink(1)')
          .flexShrink(1)
          .width('40%')
          .height(100)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)

      Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
      // alignSelf会覆盖Flex布局容器中的alignItems设置
      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
        Text('no alignSelf,height:70')
          .width('33%')
          .height(70)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('alignSelf End')
          .alignSelf(ItemAlign.End)
          .width('33%')
          .height(70)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
        Text('no alignSelf,height:100%')
          .width('34%')
          .height('100%')
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
    }.width('100%').margin({ top: 5 })
  }
}

五、边框

border

border(value: BorderOptions)

设置边框样式。

// xxx.ets
@Entry
@Component
struct BorderExample {
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        // 线段.borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
        Text('dashed')
          .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
        // 点线.border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
        Text('dotted')
          .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
      }.width('100%').height(150)

      Text('.border')
        .fontSize(50)
        .width(300)
        .height(300)
        .border({
          width: { left: 3, right: 6, top: 10, bottom: 15 },
          color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
          radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
          style: {
            left: BorderStyle.Dotted,
            right: BorderStyle.Dotted,
            top: BorderStyle.Solid,
            bottom: BorderStyle.Dashed
          }
        }).textAlign(TextAlign.Center)
    }
  }
}

六、背景设置

backgroundColor

backgroundColor(value: ResourceColor)

设置组件背景色。

backgroundImage

backgroundImage(src: ResourceStr | PixelMap, repeat?: ImageRepeat)

设置组件的背景图片

backgroundImageSize

backgroundImageSize(value: SizeOptions | ImageSize)

设置组件背景图片的宽高

 Row()
        .backgroundImage('/comment/bg.jpg', ImageRepeat.X)
        .backgroundImageSize({ width: '250px', height: '140px' })
        .width('90%')
        .height(70)
        .border({ width: 1 })

backgroundImagePosition

backgroundImagePosition(value: Position | Alignment)

设置背景图的位置。

Row()
        .width(100)
        .height(50)
        .backgroundImage($r('app.media.avatar'), ImageRepeat.NoRepeat)
        .backgroundImageSize({ width: 100, height: 100 })
        .backgroundImagePosition({ x: -50, y: -30 })
        .border({ width: 1 })

七、透明度设置

opacity

opacity(value: number | Resource)

设置组件的不透明度。

元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位。

默认值：1

说明：

子组件会继承父组件的透明度，并与自身的透明度属性叠加。如：父组件透明度为0.1，子组件设置透明度为0.8，则子组件实际透明度为0.1*0.8=0.08。

Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)

八、显隐控制

visibility

visibility(value: Visibility)

控制组件的显隐

控制当前组件显示或隐藏。根据具体场景需要可使用条件渲染代替。

默认值：Visibility.Visible

// xxx.ets
@Entry
@Component
struct VisibilityExample {
  build() {
    Column() {
      Column() {
        // 隐藏不参与占位
        Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)

        // 隐藏参与占位
        Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)

        // 正常显示，组件默认的显示模式
        Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)
        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)
      }.width('90%').border({ width: 1 })
    }.width('100%').margin({ top: 5 })
  }
}

九、禁用控制

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

enabled

enabled(value: boolean)

设置组件是否可交互。

值为true表示组件可交互，响应点击等操作。

值为false表示组件不可交互，不响应点击等操作。

默认值：true

// 点击没有反应
      Button('disable').enabled(false)

十、浮层

overlay

overlay(value: string | CustomBuilder | ComponentContent, options?: { align?: Alignment; offset?: { x?: number; y?: number } })

在当前组件上，增加遮罩文本或者叠加自定义组件以及ComponentContent作为该组件的浮层。

文本 

Image($r('app.media.img'))
            .width(240).height(240)
            .overlay("Winter is a beautiful season, especially when it snows.", {
              align: Alignment.Bottom,
              offset: { x: 0, y: -15 }
            })

组件

// xxx.ets
@Entry
@Component
struct OverlayExample {
  @Builder OverlayNode() {
    Column() {
      Image($r('app.media.img1'))
      Text("This is overlayNode").fontSize(20).fontColor(Color.White)
    }.width(180).height(180).alignItems(HorizontalAlign.Center)
  }

  build() {
    Column() {
      Image($r('app.media.img2'))
        .overlay(this.OverlayNode(), { align: Alignment.Center })
        .objectFit(ImageFit.Contain)
    }.width('100%')
    .border({ color: Color.Black, width: 2 }).padding(20)
  }
}

 十一、Z序控制

zIndex

zIndex(value: number)

设置组件的堆叠顺序。

 // stack会重叠组件, 默认后定义的在最上面，具有较高zIndex值的元素在zIndex较小的元素前面
        Text('1, zIndex(2)')
          .size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb)
          .zIndex(2)
        Text('2, default zIndex(1)')
          .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart)
          .zIndex(1)

十二、图形变换

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

Row()
        .rotate({
          x: 0,
          y: 0,
          z: 1,
          centerX: '50%',
          centerY: '50%',
          angle: 300
        }) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度


Row()
        .translate({ x: 100, y: 10 }) // x轴方向平移100，y轴方向平移10
Row()
        .scale({ x: 2, y: 0.5 }) // 高度缩小一倍，宽度放大一倍，z轴在2D下无效果

//矩阵变化
Row()
        .width(100).height(100).backgroundColor(0xAFEEEE)
        .transform(matrix4.identity().translate({ x: 50, y: 50 }).scale({ x: 1.5, y: 1 }).rotate({
          x: 0,
          y: 0,
          z: 1,
          angle: 60
        }))
// xxx.ets
import { matrix4 } from '@kit.ArkUI';

@Entry
@Component
struct TransformExample {
  build() {
    Column() {
      Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
      Row()
        .rotate({
          x: 0,
          y: 0,
          z: 1,
          centerX: '50%',
          centerY: '50%',
          angle: 300
        }) // 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
        .width(100).height(100).backgroundColor(0xAFEEEE)

      Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14)
      Row()
        .translate({ x: 100, y: 10 }) // x轴方向平移100，y轴方向平移10
        .width(100).height(100).backgroundColor(0xAFEEEE).margin({ bottom: 10 })

      Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
      Row()
        .scale({ x: 2, y: 0.5 }) // 高度缩小一倍，宽度放大一倍，z轴在2D下无效果
        .width(100).height(100).backgroundColor(0xAFEEEE)

      Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
      Row()
        .width(100).height(100).backgroundColor(0xAFEEEE)
        .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 })
  }
}

十三、图像效果

blur

blur(value: number, options?: BlurOptions)

为组件添加内容模糊效果。

 // 对字体进行模糊
Text('blur text')
          .blur(5)

backdropBlur

backdropBlur(value: number, options?: BlurOptions)

为组件添加背景模糊效果。

 // 对背景进行模糊 
Text()
        .width('90%')
        .height(40)
        .fontSize(16)
        .backdropBlur(3)
        .backgroundImage($r('app.media.avatar'))
        .backgroundImageSize({ width: 100, height: 40 })

shadow

shadow(value: ShadowOptions | ShadowStyle)

为组件添加阴影效果。

// 添加阴影效果，图片效果不变
//fill:true内部填充
      Image($r('app.media.zfb_pro_list1'))
        .width('90%')
        .height(30)
        .shadow({ radius: 10, color: Color.Green, offsetX: 20, offsetY: 20 })

      // 添加内部阴影效果
      Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.zfb_pro_list1'))
        .width('90%')
        .height(30)
        .shadow({ radius: 5, color: Color.Green, offsetX: 20, offsetY: 20,fill:true }).opacity(0.5)

grayscale

grayscale(value: number)

为组件添加灰度效果。

// 灰度效果0~1，越接近1，灰度越明显
      Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).grayscale(0.3)
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).grayscale(0.8)

brightness

brightness(value: number)

为组件添加高光效果。

  // 高光效果，1为正常图片，<1变暗，>1亮度增大
      Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).brightness(1.2)

saturate

saturate(value: number)

为组件添加饱和度效果。

     // 饱和度，原图为1
      Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).saturate(2.0)
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).saturate(0.7)

contrast

contrast(value: number)

为组件添加对比度效果。

// 对比度，1为原图，>1值越大越清晰，<1值越小越模糊
      Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).contrast(2.0)
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).contrast(0.8)

invert

invert(value: number | InvertOptions)

反转输入的图像。

// 图像反转比例
      Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).invert(0.2)
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).invert(0.8)

sepia

sepia(value: number)

将图像转换为深褐色。

// 深褐色
      Text('sepia').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).sepia(0.8)

hueRotate

hueRotate(value: number | string)

色相旋转效果。

// 色相旋转
      Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Image($r('app.media.zfb_pro_list1')).width('90%').height(30).hueRotate(90)
    }.width('100%').margin({ top: 5 })

十四、形状裁剪

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

clip12+

clip(value: boolean)

是否对当前组件进行裁剪。

Row() {
        Image($r('app.media.testImg')).width('500px').height('280px')
      }
      .clip(true) // 如这里不设置clip为true，则Row组件的圆角不会限制其中的Image组件，Image组件的四个角会超出Row
      .borderRadius(20)

clipShape12+

clipShape(value: CircleShape | EllipseShape | PathShape | RectShape)

按指定的形状对当前组件进行裁剪。

 // 用一个280px直径的圆对图片进行裁剪
      Image($r('app.media.testImg'))
        .clipShape(new Circle({ width: '280px', height: '280px' }))
        .width('500px').height('280px')

mask12+

mask(value: ProgressMask)

maskShape12+

为组件上添加指定形状的遮罩。

mask(value:  CircleShape | EllipseShape | PathShape | RectShape)

为组件上添加指定形状的遮罩。

// 给图片添加了一个500px*280px的方形遮罩
      Image($r('app.media.testImg'))
        .maskShape(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray))
        .width('500px').height('280px')

      // 给图片添加了一个280px*280px的圆形遮罩
      Image($r('app.media.testImg'))
        .maskShape(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray))
        .width('500px').height('280px')

十五、颜色渐变

linearGradient

线性渐变。

- angle: 线性渐变的起始角度。0点方向顺时针旋转为正向角度。

默认值：180

角度为字符串时仅支持类型deg，grad，rad，trun。

- direction: 线性渐变的方向，设置angle后不生效。

默认值：GradientDirection.Bottom

- colors: 指定某百分比位置处的渐变色颜色,设置非法颜色直接跳过。

- repeating: 为渐变的颜色重复着色。

默认值：false

// xxx.ets
@Entry
@Component
struct ColorGradientExample {
  build() {
    Column({ space: 5 }) {
      Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width('90%')
        .height(50)
        .linearGradient({
          angle: 90,//角度
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
      Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width('90%')
        .height(50)
        .linearGradient({
          direction: GradientDirection.Left, // 渐变方向
          repeating: true, // 渐变颜色是否重复
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
        })
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

sweepGradient

角度渐变，仅绘制0-360度范围内的角度，超出时不绘制渐变色，只绘制纯色。

- center：为角度渐变的中心点，即相对于当前组件左上角的坐标。

- start：角度渐变的起点。

默认值：0

角度为字符串时仅支持类型deg，grad，rad，trun。

- end：角度渐变的终点。

默认值：0

角度为字符串时仅支持类型deg，grad，rad，trun。

- rotation: 角度渐变的旋转角度。

默认值：0

角度为字符串时仅支持类型deg，grad，rad，trun。

- colors: 指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。

- repeating: 为渐变的颜色重复着色。

默认值：false

说明：

设置为小于0的值时，按值为0处理，设置为大于360的值时，按值为360处理。

当start、end、rotation的数据类型为string，合法的取值为纯数字或纯数字后带"deg"(度)、"rad"(弧度)、"grad"(梯度)、"turn"(圈)单位，例如："90"、 "90deg"、"1.57rad"。

@Entry
@Component
struct ColorGradientExample {
  build() {
    Column({ space: 5 }) {
      Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(100)
        .sweepGradient({
          center: [50, 50],
          start: 0,
          end: 359,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
      
      Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(100)
        .sweepGradient({
          center: [50, 50],
          start: 0,
          end: 359,
          rotation: 45, // 旋转角度
          repeating: true, // 渐变颜色是否重复
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
        })
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

 

radialGradient

径向渐变。

- center：径向渐变的中心点，即相对于当前组件左上角的坐标。

- radius：径向渐变的半径。

取值范围：[0,+∞)

说明：

设置为小于的0值时，按值为0处理。

- colors: 指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。

- repeating: 为渐变的颜色重复着色。

默认值：false

// xxx.ets
@Entry
@Component
struct ColorGradientExample {
  build() {
    Column({ space: 5 }) {
      Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(100)
        .radialGradient({
          center: [50, 50],
          radius: 60,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
      Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(100)
        .radialGradient({
          center: [50, 50],
          radius: 60,
          repeating: true,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
        })
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

希望大佬文章可以白嫖
关注
专栏目录
OpenHarmony/HarmonyOS文本通用属性
坚果的博客
03-29 1万+
文本通用属性目前只针对包含文本元素的组件，设置文本样式。之所以单独列出来就是因为它的使用实在是太普遍了，所以有必要列出来。
鸿蒙开发：深入了解Arkts语言中的Want对象及其运用
一键难忘的博客
12-06 1857
Want作为对象间信息传递的载体，常用于启动能力（Ability）时传递相关数据。在启动目标Ability时，Want包含了指定的启动目标和启动时需携带的相关数据，如bundleName和字段分别指明目标Ability所在应用的包名和对应包内的Ability名称。例如，在启动UIAbilityA时需要传递数据给UIAbilityB，可以使用Want作为载体，将数据传递给UIAbilityB。图1Want用法示意本文深入介绍了Arkts语言中的Want对象，该对象是一种在应用组件之间进行信息传递的载体。
HarmonyOS开发探索：Search组件实现搜索栏
最新发布
DMZDAMS的博客
07-01 1111
自定义搜索图标
第5节 - ArkUI基本组件01 - 通用属性
to do , to be .
12-22 1312
组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等。
HarmonyOS/OpenHarmony应用开发-ArkTS自适应线性布局定位能力实现
weixin_69135651的博客
02-20 932
相对定位，使用组件的offset属性可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
【ArkTS】鸿蒙开发 绝对定位position（）和相对定位offse（）的区别和用法
m0_66128366的博客
03-28 1970
绝对定位position（）和相对定位offse（）的区别和用法
ArkTS及openHarmony
weixin_45564816的博客
10-16 805
内边距，也就是盒子边和盒子内部的距离。：外边距，也就是盒子和盒子的距离。Column垂直线性布局核心代码。Row 水平线性布局核心代码。(默认值)，等价于Start。Stack层叠布局核心代码。
【鸿蒙应用ArkTS开发系列】- Web组件使用讲解
枫的专栏
04-11 8558
Web是提供网页显示能力的组件，具体用法请参考Web API。
ArkTS快速入门
m0_56308072的博客
12-08 5160
ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。简而言之，ArkTS是华为官方推荐的HarmonyOS开发的主力语言，它是华为自己开发的语言。由于HarmonyOS3.0之后就不再支持Java开发了，因此我们要在鸿蒙系统上开发app，就需要学习这门语言。
自定义下拉刷新动画（ArkTS） 示例代码
01-29
如下图所示，其原理是，当组件的通用属性发生改变时，组件状态由初始状态逐渐变为结束状态的过程中，会创建多个连续的中间状态，逐帧播放后，就会形成属性渐变效果，从而形成动画。 属性动画的使用方式也非常简单，...
002 学习鸿蒙应用开发ArkTs语言
热门推荐
龚礼鹏的博客
04-19 1万+
ArkTs是目前鸿蒙开发的主要语言，目前鸿蒙的主推模型Stage的新版本(3.1.0(API 9))开发不支持Java和JavaScript了，所以开发鸿蒙应用学习ArkTs是很有必要的。5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集。
ArkTS的入门到入土 （3）
2202_75509211的博客
06-01 995
ArtTs的入门到进阶，从小白到鸿蒙大神的快速进阶！！！
ArKTS的基本组件
morr_的博客
02-03 6104
设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。当文本内容较多超出了Text组件范围的时候，您可以使用textOverflow设置文本截取方式，需配合maxLines使用，单独设置不生效，maxLines用于设置文本显示最大行数。
ArkTS基础知识【含示例源码】
当你发现自己的才华撑不起野心时，就请安静下来学习~
11-24 7073
@Link装饰的变量可以父组件的@State装饰的变量建立双向数据绑定，因此对子组件的变量值修改，会同步修改父组件对应的@State修饰的变量，这里对应的就是父组件里的isSwitchDataSource变量，从而自动触发父组件的UI刷新。对应页面的入口组件，也就是被@Entry装饰器修饰的自定义组件，系统还提供了另外的三个生命周期函数，分别是：页面展示时刻的onPageShow(),进行返回的时候的onBackPress(),页面消失时刻的onPageHide();
华为 ArkTS 边框怎么设置，单边边框怎么设置以及条件设置边框（鸿蒙开发）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
12-05 2106
边框设置-通用属性-组件通用信息-组件-组件参考（基于ArkTS的声明式开发范式）-手机、平板、智慧屏和智能穿戴开发-ArkTS API参考-HarmonyOS应用开发。所以不能每个容器都加上四边的边框, 只能分比给每个加左边框，上边框， 然后第二列加右边框， 最后一行加下边框。需要给推荐商品列表添加边框， arkTS的边框跟前端一样，如果出现重叠也会加粗,如下图。border()接收一个对象参数，参数为width, color等，如代码实例。可以明显看到中间重叠的边框比较粗，
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：尺寸设置）
m0_64420071的博客
03-01 4402
ArkTS声明式开发（通用属性：尺寸设置）
固定在屏幕底部
nananayeah的博客
02-08 1330
是图片不受滑动影响，一直位于当前屏幕底部 position:fixed; bottom:0; // position: absolute; // top: 1255rpx; left: 1rpx; width: 749rpx; height: 213rpx;
鸿蒙os 开发中如何实现固定定位
Kzzz666的博客
03-14 1583
因为Row容器在Scroll容器之上，它们互不影响，所以这里只需要将Row容器添加一个position即可完成固定定位。的zIndex属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。需要用到Stack（层叠容器）：Stack容器将所包裹的组件以我们所说的z轴（立体轴）来排列组件，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。同时Stack容器中兄弟组件显示层级关系可以通过。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值