devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

关于鸿蒙通用属性的开发_alignrules9+

作者：花生_TL007 | 2024-03-12 21:16:36

赞

踩

alignrules9+

通用属性

位置设置

名称参数类型描述
alignAlignment设置元素内容的对齐方式，当元素的width和height大小大于元素本身内容大小时生效。默认值：Alignment.Center
directionDirection设置元素水平方向的布局。默认值：Direction.Auto
positionPosition绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。
markAnchorPosition设置元素在位置定位时的锚点，以元素左上角作为基准点进行偏移。通常配合position和offset属性使用，单独使用时，效果类似offset默认值：{x: 0,y: 0}
offsetPosition相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。默认值：{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：设置相对于锚点组件的对齐方式。

尺寸设置

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

布局约束

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

Flex布局

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

边框设置

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

图片边框设置 borderImage

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

名称类型描述
sourcestring | Resource | linearGradient边框图源或者渐变色设置。
sliceLength | EdgeWidths设置图片边框切割宽度。默认值：0
widthLength | EdgeWidths设置图片边框宽度。默认值：0
outsetLength | EdgeWidths设置边框图片向外延伸距离。默认值：0
repeatRepeatMode设置边框图片的重复方式。默认值：RepeatMode.Stretch
fillboolean设置边框图片中心填充。默认值：false

RepeatMode枚举说明

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

背景设置

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

透明度设置

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

显隐设置

名称参数类型描述
visibilityVisibility控制当前组件显示或隐藏。注意，即使组件处于隐藏状态，在页面刷新时仍存在重新创建过程，因此当对性能有严格要求时建议使用条件渲染代替。默认值：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%'}
transformMatrix4Transit设置当前组件的变换矩阵。

图像效果

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

形状裁剪

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

文本样式设置

名称参数类型描述
fontColorResourceColor设置字体颜色。
fontSizeLength | Resource设置字体大小，Length为number类型时，使用fp单位。字体默认大小10。
fontStyleFontStyle设置字体样式。默认值：FontStyle.Normal
fontWeightnumber | FontWeight | string设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如"400"，以及"bold"、"bolder"、"lighter"、"regular"、"medium"，分别对应FontWeight中相应的枚举值。默认值：FontWeight.Normal
fontFamilystring | 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
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/225840
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号