目录
一、尺寸设置
宽高，外边距，内边距，尺寸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 })设置定位点，本来是左上角，改变这个定位点
- // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。
- // 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，向下25offset
相对偏移，组件相对原本的布局位置进行偏移。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 })
}
}
