> 文档中心 > 关于鸿蒙通用属性的开发

关于鸿蒙通用属性的开发


通用属性

位置设置

名称 参数类型 描述
align Alignment 设置元素内容的对齐方式,当元素的width和height大小大于元素本身内容大小时生效。默认值:Alignment.Center
direction Direction 设置元素水平方向的布局。默认值:Direction.Auto
position Position 绝对定位,设置元素左上角相对于父容器左上角偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。
markAnchor Position 设置元素在位置定位时的锚点,以元素左上角作为基准点进行偏移。通常配合position和offset属性使用,单独使用时,效果类似offset默认值:{x: 0,y: 0}
offset Position 相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。默认值:{x: 0,y: 0}
alignRules9+ {left?: { anchor: string, align: HorizontalAlign };right?: { anchor: string, align: HorizontalAlign };middle?: { anchor: string, align: HorizontalAlign };top?: { anchor: string, align: VerticalAlign };bottom?: { anchor: string, align: VerticalAlign };center?: { anchor: string, align: VerticalAlign }} 指定相对容器的对齐规则。- left:设置左对齐参数。- right:设置右对齐参数。- middle:设置中间对齐的参数。- top:设置顶部对齐的参数。- bottom:设置底部对齐的参数。- center:设置中心对齐的参数。说明:- anchor:设置作为锚点的组件的id值。- align:设置相对于锚点组件的对齐方式。

尺寸设置

名称 参数说明 描述
width Length 设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。若子组件的宽大于父组件的宽,则会画出父组件的范围。
height Length 设置组件自身的高度,缺省时使用元素自身内容需要的高度。若子组件的高大于父组件的高,则会画出父组件的范围。
size {width?: Length,height?: Length} 设置高宽尺寸。
padding Padding | Length 设置内边距属性。参数为Length类型时,四个方向内边距同时生效。默认值:0padding设置百分比时,上下左右内边距均以父容器的width作为基础值。
margin Margin | Length 设置外边距属性。参数为Length类型时,四个方向外边距同时生效。默认值:0margin设置百分比时,上下左右外边距均以父容器的width作为基础值。
constraintSize {minWidth?: Length,maxWidth?: Length,minHeight?: Length,maxHeight?: Length} 设置约束尺寸,组件布局时,进行尺寸范围限制。constraintSize的优先级高于Width和Height。默认值:{minWidth: 0,maxWidth: Infinity,minHeight: 0,maxHeight: Infinity}
layoutWeight number | string 父容器尺寸确定时,设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,表示自适应占满剩余空间。说明:仅在Row/Column/Flex布局中生效。

布局约束

名称 参数说明 描述
aspectRatio number 指定当前组件的宽高比,aspectRatio = width/height。
displayPriority number 设置当前组件在布局容器中显示的优先级,当父容器空间不足时,低优先级的组件会被隐藏。说明:仅在Row/Column/Flex(单行)容器组件中生效。

Flex布局

flexBasis number | string 设置组件在父容器主轴方向上的基准尺寸。默认值:'auto'(表示组件在主轴方向上的基准尺寸为组件原本的大小)
flexGrow number 设置父容器的剩余空间分配给此属性所在组件的比例。默认值:0
flexShrink number 设置父容器压缩尺寸分配给此属性所在组件的比例。父容器为Row、Column时,默认值:0父容器为flex时,默认值:1
alignSelf ItemAlign 子组件在父容器交叉轴的对齐格式,会覆盖Flex布局容器中alignItems设置。默认值:ItemAlign.Auto

边框设置

名称 参数类型 描述
border {width?: Length | EdgeWidths9+,color?: ResourceColor | EdgeColors9+,radius?: Length | BorderRadiuses9+,style?: BorderStyle | EdgeStyles9+} 统一边框样式设置接口。- width:设置边框宽度。- color:设置边框颜色。- radius:设置边框圆角半径。- style:设置边框样式。
borderStyle BorderStyle | EdgeStyles9+ 设置元素的边框样式。默认值:BorderStyle.Solid
borderWidth Length | EdgeWidths9+ 设置元素的边框宽度,不支持百分比。
borderColor ResourceColor | EdgeColors9+ 设置元素的边框颜色。
borderRadius Length | Length9+ 设置元素的边框圆角半径,不支持百分比。

图片边框设置 borderImage

图片边框或者渐变色边框设置接口。

名称 类型 描述
source string | Resource | linearGradient 边框图源或者渐变色设置。
slice Length | EdgeWidths 设置图片边框切割宽度。默认值:0
width Length | EdgeWidths 设置图片边框宽度。默认值:0
outset Length | EdgeWidths 设置边框图片向外延伸距离。默认值:0
repeat RepeatMode 设置边框图片的重复方式。默认值:RepeatMode.Stretch
fill boolean 设置边框图片中心填充。默认值:false

RepeatMode枚举说明

名称 描述
Repeat 被切割图片重复铺平在图片边框上,超出的部分会被剪裁。
Stretch 被切割图片以拉伸填充的方式铺满图片边框。
Round 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时压缩被切割图片。
Space 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时以空白填充。

背景设置

名称 参数类型 描述
backgroundColor ResourceColor 设置组件的背景色。
backgroundImage src: ResourceStr,repeat?: ImageRepeat src:图片地址,支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。repeat:设置背景图片的重复样式,默认不重复。
backgroundImageSize {width?: Length,height?: Length} | ImageSize 设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时,如果只设置一个属性,则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。默认值:ImageSize.Auto
backgroundImagePosition Position | Alignment 设置背景图在组件中显示位置。默认值:{x: 0,y: 0}

透明度设置

名称 参数类型 描述
opacity number | Resource 元素的不透明度,取值范围为0到1,1表示不透明,0表示完全透明, 达到隐藏组件效果,但是在布局中占位。说明:子组件可以继承父组件的此属性。默认值:1

显隐设置

名称 参数类型 描述
visibility Visibility 控制当前组件显示或隐藏。注意,即使组件处于隐藏状态,在页面刷新时仍存在重新创建过程,因此当对性能有严格要求时建议使用条件渲染代替。默认值:Visibility.Visible

图形变换

名称 参数类型 描述
rotate {x?: number,y?: number,z?: number,angle?: Angle,centerX?: number | string,centerY?: number | string} (x, y, z)指定一个矢量,表示旋转轴,正角度为顺时针转动,负角度为逆时针转动,默认值为0,同时可以通过centerX和centerY设置旋转的中心点。默认值:{x: 0,y: 0,z: 0,angle: 0,centerX: '50%',centerY: '50%'}
translate {x?: number | string,y?: number | string,z? : number | string} 可以分别设置X轴、Y轴、Z轴的平移距离,距离的正负控制平移的方向。不支持百分比形式的输入。默认值:{x: 0,y: 0,z: 0}
scale {x?: number,y?: number,z?: number,centerX?: number | string,centerY?: number | string} 可以分别设置X轴、Y轴、Z轴的缩放比例,默认值为1,同时可以通过centerX和centerY设置缩放的中心点。默认值:{x: 1,y: 1,z: 1,centerX:'50%',centerY:'50%'}
transform Matrix4Transit 设置当前组件的变换矩阵。

图像效果

名称 参数类型 默认值 描述
blur number - 为当前组件添加内容模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。
backdropBlur number - 为当前组件添加背景模糊效果,入参为模糊半径,模糊半径越大越模糊,为0时不模糊。
shadow {radius: number | Resource,color?: Color | string | Resource,offsetX?: number | Resource,offsetY?: number | Resource} - 为当前组件添加阴影效果,入参为模糊半径(必填)、阴影的颜色(可选,默认为灰色)、X轴的偏移量(可选,默认为0),Y轴的偏移量(可选,默认为0),偏移量单位为px。
grayscale number 0.0 为当前组件添加灰度效果。值定义为灰度转换的比例,入参1.0则完全转为灰度图像,入参则0.0图像无变化,入参在0.0和1.0之间时,效果呈线性变化。(百分比)
brightness number 1.0 为当前组件添加高光效果,入参为高光比例,值为1时没有效果,小于1时亮度变暗,0为全黑;大于1时亮度增加,数值越大亮度越大。
saturate number 1.0 为当前组件添加饱和度效果,饱和度为颜色中的含色成分和消色成分(灰)的比例,入参为1时,显示原图像,大于1时含色成分越大,饱和度越大;小于1时消色成分越大,饱和度越小。(百分比)
contrast number 1.0 为当前组件添加对比度效果,入参为对比度的值,值为1时,显示原图;大于1时,值越大对比度越高,图像越清晰醒目;小于1时,值越小对比度越低;当对比度为0时,图像变为全灰。(百分比)
invert number 0 反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。(百分比)
colorBlend8+ Color | string | Matrix4Transit - 为当前组件添加颜色叠加效果,入参为叠加的颜色。
sepia number 0 将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的,值为0图像无变化。 (百分比)
hueRotate number | string '0deg' 色相旋转效果,输入参数为旋转角度。

形状裁剪

名称 参数类型 描述
clip Circle | Ellipse | Path | Rect | boolean 参数为相应类型的组件,按指定的形状对当前组件进行裁剪;参数为boolean类型时,设置是否按照父容器边缘轮廓进行裁剪。默认值:false
mask Circle | Ellipse | Path | Rect 在当前组件上加上指定形状的遮罩。

文本样式设置

名称 参数类型 描述
fontColor ResourceColor 设置字体颜色。
fontSize Length | Resource 设置字体大小,Length为number类型时,使用fp单位。字体默认大小10。
fontStyle FontStyle 设置字体样式。默认值:FontStyle.Normal
fontWeight number | FontWeight | string 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。string类型仅支持number类型取值的字符串形式,例如"400",以及"bold"、"bolder"、"lighter"、"regular"、"medium",分别对应FontWeight中相应的枚举值。默认值:FontWeight.Normal
fontFamily string | Resource 设置字体列表。默认字体'HarmonyOS Sans',且当前只支持这种字体。

颜色渐变

名称 参数类型 描述
linearGradient {angle?: number | string,direction?: GradientDirection,colors: Array[ColorStop](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-gauge-0000001380121746-V3#ZH-CN_TOPIC_0000001380121746__colorstop),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[ColorStop](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-gauge-0000001380121746-V3#ZH-CN_TOPIC_0000001380121746__colorstop),repeating?: boolean} 角度渐变。- center:为角度渐变的中心点,即相对于当前组件左上角的坐标。- start:角度渐变的起点。默认值:0- end:角度渐变的终点。默认值:0- rotation: 角度渐变的旋转角度。默认值:0- colors: 为渐变的颜色描述。- repeating: 为渐变的颜色重复着色。默认值:false
radialGradient {center: Point,radius: number | string,colors: Array[ColorStop](https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-gauge-0000001380121746-V3#ZH-CN_TOPIC_0000001380121746__colorstop),repeating?: boolean} 径向渐变。- center:径向渐变的中心点,即相对于当前组件左上角的坐标。- radius:径向渐变的半径。- colors: 为渐变的颜色描述。- repeating: 为渐变的颜色重复着色。默认值:false