关于鸿蒙通用属性的开发

通用属性

位置设置

名称	参数类型	描述
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