
HarmonyOS API:通用属性
版本:v3.1 Beta
文本样式设置
更新时间: 2023-02-17 09:40
针对包含文本元素的组件,设置文本样式。
说明
从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数类型 | 描述 |
fontColor | 设置字体颜色。 | |
fontSize | Length | 设置字体大小,Length为number类型时,使用fp单位。字体默认大小16。不支持设置百分比字符串。 |
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',且当前只支持这种字体。 |
示例
栅格设置
更新时间: 2023-02-17 09:19
说明
- 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
- 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。
属性
名称 | 参数类型 | 描述 |
useSizeType | { xs?: number | { span: number, offset: number }, sm?: number | { span: number, offset: number }, md?: number | { span: number, offset: number }, lg?: number | { span: number, offset: number } } | 设置在特定设备宽度类型下的占用列数和偏移列数,span: 占用列数; offset: 偏移列数。 当值为number类型时,仅设置列数, 当格式如{"span": 1, "offset": 0}时,指同时设置占用列数与偏移列数。 - xs: 指设备宽度类型为SizeType.XS时的占用列数和偏移列数。 - sm: 指设备宽度类型为SizeType.SM时的占用列数和偏移列数。 - md: 指设备宽度类型为SizeType.MD时的占用列数和偏移列数。 - lg: 指设备宽度类型为SizeType.LG时的占用列数和偏移列数。 |
gridSpan | number | 默认占用列数,指useSizeType属性没有设置对应尺寸的列数(span)时,占用的栅格列数。 说明: 设置了栅格span属性,组件的宽度由栅格布局决定。 默认值:1 |
gridOffset | number | 默认偏移列数,指useSizeType属性没有设置对应尺寸的偏移(offset)时, 当前组件沿着父组件Start方向,偏移的列数,也就是当前组件位于第n列。 说明: - 配置该属性后,当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式,而是沿着父组件的Start方向偏移一定位移。 - 偏移位移 = (列宽 + 间距)* 列数。 - 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局,类似相对布局。 默认值:0 |
示例
图1 设备宽度为SM
图2 设备宽度为MD
图3 设备宽度为LG
图4 单独设置gridSpan和gridOffset在特定屏幕大小下的效果与useSizeType效果一致
颜色渐变
更新时间: 2023-02-17 09:19
设置组件的颜色渐变效果。
说明
从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
属性
名称 | 参数类型 | 描述 |
linearGradient | { angle?: number | string, direction?: GradientDirection, colors: Array<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>, repeating?: boolean } | 角度渐变。 - center:为角度渐变的中心点,即相对于当前组件左上角的坐标。 - start:角度渐变的起点。 默认值:0 - end:角度渐变的终点。 默认值:0 - rotation: 角度渐变的旋转角度。 默认值:0 - colors: 为渐变的颜色描述。 - repeating: 为渐变的颜色重复着色。 默认值:false |
radialGradient | { center: Point, radius: number | string, colors: Array<ColorStop>, repeating?: boolean } | 径向渐变。 - center:径向渐变的中心点,即相对于当前组件左上角的坐标。 - radius:径向渐变的半径。 - colors: 为渐变的颜色描述。 - repeating: 为渐变的颜色重复着色。 默认值:false |
示例
