未验证 提交 79d3a1d7 编写于 作者: O openharmony_ci 提交者: Gitee

!9099 文档整改

Merge pull request !9099 from 田雨/master
...@@ -58,7 +58,8 @@ Line(options?: {width?: string | number, height?: string | number}) ...@@ -58,7 +58,8 @@ Line(options?: {width?: string | number, height?: string | number})
struct LineExample { struct LineExample {
build() { build() {
Column() { Column() {
Line({ width: 50, height: 100 }).startPoint([0, 0]).endPoint([50, 100]) Line().startPoint([0, 0]).endPoint([50, 100])
Line({ width: 50, height: 50 }).startPoint([0, 0]).endPoint([100, 100])
Line().width(200).height(200).startPoint([50, 50]).endPoint([150, 150]) Line().width(200).height(200).startPoint([50, 50]).endPoint([150, 150])
}.margin({ top: 5 }) }.margin({ top: 5 })
} }
......
# 页面间转场 # 页面间转场
页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。 在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。
> **说明:** > **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
| 名称 | 参数 | 参数描述 | | 名称 | 参数 | 参数描述 |
| ------------------- | ------ | ------------------------------- | | ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| PageTransitionEnter | Object | 页面入场组件,用于自定义当前页面的入场效果,详见动效参数说明。 | | PageTransitionEnter | {<br/>type: RouteType,<br/>duration: number,<br/>curve: Curve&nbsp;\|&nbsp;Curves,<br>delay: number<br/>} | 设置当前页面的自定义入场动效。<br/>-&nbsp;type:不配置时表明pop为push时效果的逆播。<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线,有效值参见[Curve](ts-animatorproperty.md)&nbsp;<br/>&nbsp;默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
| PageTransitionExit | Object | 页面退场组件,用于自定义当前页面的退场效果,详见动效参数说明。 | | PageTransitionExit | {<br/>type: RouteType,<br/>duration: number,<br/>curve: Curve&nbsp;\|&nbsp;Curves,<br/>delay: number<br/>} | 设置当前页面的自定义退场动效。<br/>-&nbsp;type:不配置时表明pop为push时效果的逆播<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线,有效值参见[Curve](ts-animatorproperty.md)&nbsp;<br/>&nbsp;默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
## RouteType枚举说明
- 动效参数说明 | 名称 | 描述 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | ---- | ------------------------------------------------------------ |
| -------- | ------------------------- | ------ | ---- | ---------------------------------------- | | Pop | 重定向指定页面。PageA跳转到PageB时,PageA为Exit+Push,PageB为Enter+Push。 |
| type | RouteType | - | 否 | 不配置时表明pop为push时效果的逆播。 | | Push | 跳转到下一页面。PageB返回至PageA时,PageA为Enter+Pop,PageB为Exit+Pop。 |
| duration | number | 1000 | 否 | 动画时长,单位为毫秒。 | | None | 页面未重定向。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 动画曲线,有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。 |
| delay | number | 0 | 否 | 动画延迟时长,单位为毫秒,默认不延时播放。 |
- RouteType枚举说明
| 名称 | 描述 |
| ---- | ---------------- |
| Pop | 重定向指定页面。PageA跳转到PageB时,PageA为Exit+Push,PageB为Enter+Push。 |
| Push | 跳转到下一页面。PageB返回至PageA时,PageA为Enter+Pop,PageB为Exit+Pop。 |
## 属性 ## 属性
PageTransitionEnter和PageTransitionExit组件支持的属性: | 参数名称 | 参数类型 | 必填 | 参数描述 |
| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| slide | SlideEffect | 否 | 设置页面转场时的滑入滑出效果。<br/>默认值:SlideEffect.Right |
| translate | {<br/>x?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>y?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>z?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置页面转场时的平移效果,为入场时起点和退场时终点的值,和slide同时设置时默认生效slide。<br/>-&nbsp;x:横向的平移距离。<br/>-&nbsp;y:纵向的平移距离。<br/>-&nbsp;z:竖向的平移距离。 |
| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置页面转场时的缩放效果,为入场时起点和退场时终点的值。<br/>-&nbsp;x:横向放大倍数(或缩小比例)。<br/>-&nbsp;y:纵向放大倍数(或缩小比例)。<br/>-&nbsp;z:竖向放大倍数(或缩小比例)。<br/>-&nbsp;centerX、centerY缩放中心点。<br/>-&nbsp;中心点为0时,默认的是组件的左上角。<br/> |
| opacity | number | 否 | 设置入场的起点透明度值或者退场的终点透明度值。<br/>默认值:1 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | ## SlideEffect枚举说明
| --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- |
| slide | SlideEffect | SlideEffect.Right | 否 | 设置转场的滑入效果,有效值参见SlideEffect枚举说明。 |
| translate | {<br/>x?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>y?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>z?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | - | 否 | 设置页面转场时的平移效果,为入场时起点和退场时终点的值,和slide同时设置时默认生效slide。 |
| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | - | 否 | 设置页面转场时的缩放效果,为入场时起点和退场时终点的值。 |
| opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 |
- SlideEffect枚举说明 | 名称 | 描述 |
| 名称 | 描述 | | ------ | ------------------------- |
| ------ | ------------------------- | | Left | 设置到入场时表示从左边滑入,出场时表示滑出到左边。 |
| Left | 设置到入场时表示从左边滑入,出场时表示滑出到左边。 | | Right | 设置到入场时表示从右边滑入,出场时表示滑出到右边。 |
| Right | 设置到入场时表示从右边滑入,出场时表示滑出到右边。 | | Top | 设置到入场时表示从上边滑入,出场时表示滑出到上边。 |
| Top | 设置到入场时表示从上边滑入,出场时表示滑出到上边。 | | Bottom | 设置到入场时表示从下边滑入,出场时表示滑出到下边。 |
| Bottom | 设置到入场时表示从下边滑入,出场时表示滑出到下边。 |
## 事件 ## 事件
PageTransitionEnter和PageTransitionExit组件支持的事件: | 事件 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| 事件 | 功能描述 | | onEnter(event: (type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。<br/>-&nbsp;type:跳转方法。<br/>-&nbsp;progress:当前进度。 |
| ---------------------------------------- | ----------------------------------- | | onExit(event: (type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。<br/>-&nbsp;type:跳转方法。<br/>-&nbsp;progress:当前进度。 |
| onEnter(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
| onExit(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
## 示例 ## 示例
......
# 组件内转场 # 组件内转场
组件转场主要通过transition属性进行配置转场参数,在组件插入和删除时进行过渡动效,主要用于容器组件子组件插入删除时提升用户体验(需要配合animateTo才能生效,动效时长、曲线、延时跟随animateTo中的配置)。 组件内转场主要通过transition属性配置转场参数,在组件插入和删除时显示过渡动效,主要用于容器组件中的子组件插入和删除时,提升用户体验(需要配合[animateTo](ts-explicit-animation.md)才能生效,动效时长、曲线、延时跟随animateTo中的配置)。
> **说明:** > **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 参数描述 | | 名称 | 参数类型 | 参数描述 |
| -------- | -------- | -------- |
| transition | TransitionOptions | 所有参数均为可选参数,详细描述见TransitionOptions参数说明。 |
## TransitionOptions参数说明
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| transition | Object | - | 所有参数均为可选参数,详细描述见transition入参说明。 | | type | [TransitionType](ts-appendix-enums.md#transitiontype) | 否 | 默认包括组件新增和删除。<br/>默认值:TransitionType.All<br/>**说明:**<br/>不指定Type时说明插入删除使用同一种效果。 |
| opacity | number | 否 | 设置组件转场时的透明度效果,为插入时起点和删除时终点的值。<br/>默认值:1 |
- transition入参说明 | translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | 否 | 设置组件转场时的平移效果,为插入时起点和删除时终点的值。<br/>-x:横向的平移距离。<br/>-y:纵向的平移距离。<br/>-z:竖向的平移距离。 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 | | scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number,<br/>centerY?&nbsp;:&nbsp;number<br/>} | 否 | 设置组件转场时的缩放效果,为插入时起点和删除时终点的值。<br/>-x:横向放大倍数(或缩小比例)。<br/>-y:纵向放大倍数(或缩小比例)。<br/>-z:竖向放大倍数(或缩小比例)。<br/>-&nbsp;centerX、centerY缩放中心点。<br/>-&nbsp;中心点为0时,默认的是组件的左上角。<br/> |
| -------- | -------- | -------- | -------- | -------- | | rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | 否 | 设置组件转场时的旋转效果,为插入时起点和删除时终点的值。<br/>-x:横向的旋转向量。<br/>-y:纵向的旋转向量。<br/>-z:竖向的旋转向量。<br/>-&nbsp;centerX,centerY指旋转中心点。<br/>-&nbsp;中心点为(0,0)时,默认的是组件的左上角。 |
| type | [TransitionType](ts-appendix-enums.md#transitiontype) | TransitionType.All | 否 | 默认包括组件新增和删除。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;不指定Type时说明插入删除使用同一种效果。 |
| opacity | number | 1 | 否 | 设置组件转场时的透明度效果,为插入时起点和删除时终点的值。 |
| translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置组件转场时的平移效果,为插入时起点和删除时终点的值。<br/>-x:横向的平移距离。<br/>-y:纵向的平移距离。<br/>-z:竖向的平移距离。 |
| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number,<br/>centerY?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置组件转场时的缩放效果,为插入时起点和删除时终点的值。<br/>-x:横向放大倍数(或缩小比例)。<br/>-y:纵向放大倍数(或缩小比例)。<br/>-z:竖向放大倍数(或缩小比例)。<br/>-&nbsp;centerX、centerY缩放中心点。<br/>-&nbsp;中心点为0时,默认的是组件的左上角。<br/> |
| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | - | 否 | 设置组件转场时的旋转效果,为插入时起点和删除时终点的值。<br/>-x:横向的旋转向量。<br/>-y:纵向的旋转向量。<br/>-z:竖向的旋转向量。<br/>-&nbsp;centerX,centerY指旋转中心点。<br/>-&nbsp;中心点为(0,0)时,默认的是组件的左上角。 |
## 示例 ## 示例
......
# 共享元素转场 # 共享元素转场
共享元素转场支持页面间的转场,如当前页面的图片转场至下一页面中。 设置页面间转场时共享元素的转场动效。
> **说明:** > **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 属性 ## 属性
| 名称 | 参数 | 默认值 | 参数描述 | | 名称 | 参数 | 参数描述 |
| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| sharedTransition | id:&nbsp;string,<br/>options?:&nbsp;Object | - | 两个页面的组件配置为同一个id,则转场过程中会进行共享元素转场,配置为空字符串时不会有共享元素转场效果。 | | sharedTransition | id:&nbsp;string,<br/>{<br/>duration?: number,<br/>curve?: Curve&nbsp;\|&nbsp;string,<br/>delay?: number,<br/>motionPath?: <br/>{<br/>path: string,<br/>form?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>},<br/>zIndex?: number,<br/>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br/>} | 两个页面中id值相同且不为空字符串的组件即为共享元素,在页面转场时可显示共享元素转场动效。<br/>-&nbsp; id:设置组件的id。<br/>-&nbsp; duration:单位为毫秒,默认动画时长为1000毫秒。<br/>-&nbsp;curve:默认曲线为Linear,有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。<br/>-&nbsp;delay:单位为毫秒,默认不延时播放。<br/>-&nbsp;motionPath:运动路径信息。<br/>-&nbsp;path:设置路径。<br/>-&nbsp;from:设置起始值。<br/>-&nbsp;to:设置终止值。<br/>-&nbsp;rotatable:是否旋转。<br/>-&nbsp;zIndex:设置Z轴。<br/>-&nbsp;type:动画类型。 |
- options参数说明
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | ------------------------- | ------ | ---- | --------------------- |
| duration | number | 1000 | 否 | 单位为毫秒,默认动画时长为1000毫秒。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 默认曲线为线性,有效值参见Curve说明。 |
| delay | number | 0 | 否 | 单位为毫秒,默认不延时播放。 |
## 示例 ## 示例
示例功能为两个页面,共享元素转场页面图片点击后转场至页面B的图片。 示例代码为点击图片跳转页面时,显示共享元素图片的自定义转场动效。
```ts ```ts
// xxx.ets // xxx.ets
......
# 背景设置 # 背景设置
设置组件的背景 设置组件的背景样式
> **说明:** > **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| backgroundColor | [ResourceColor](../../ui/ts-types.md) | - | 设置组件的背景色。 | | backgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置组件的背景色。 |
| backgroundImage | src:&nbsp;[ResourceStr](../../ui/ts-types.md),<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | - | src参数:图片地址,支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。<br/>repeat参数:设置背景图片的重复样式,默认不重复。 | | backgroundImage | -&nbsp;src:&nbsp;[ResourceStr](../../ui/ts-types.md),<br/>-&nbsp;repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src:图片地址,支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。<br/>repeat:设置背景图片的重复样式,默认不重复。 |
| backgroundImageSize | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | Auto | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时,如果只设置一个属性,则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。 | | backgroundImageSize | {<br/>width?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>height?:&nbsp;[Length](../../ui/ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时,如果只设置一个属性,则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>默认值:ImageSize.Auto |
| backgroundImagePosition | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 设置背景图在组件中显示位置。 | | backgroundImagePosition | {<br/>x?:&nbsp;[Length](../../ui/ts-types.md#length),<br/>y?:&nbsp;[Length](../../ui/ts-types.md#length)<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。<br/>默认值:<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} |
## 示例 ## 示例
......
...@@ -3,12 +3,8 @@ ...@@ -3,12 +3,8 @@
设置组件是否可以响应点击事件、触摸事件等手指交互事件。 设置组件是否可以响应点击事件、触摸事件等手指交互事件。
> **说明:** > **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 属性 ## 属性
......
...@@ -3,23 +3,18 @@ ...@@ -3,23 +3,18 @@
> **说明:** > **说明:**
> - 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > - 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> >
> - 仅当父组件是Flex组件时生效。 > - 仅当父组件是 Flex、Column、Row 时生效。
## 权限列表
## 属性 ## 属性
| 名称 | 参数说明 | 默认值 | 描述 | | 名称 | 参数说明 | 描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| flexBasis | 'auto'&nbsp;\|&nbsp;Length | 'auto' | 此属性所在的组件在Flex容器中主轴方向上基准尺寸。 | | flexBasis | number \| string | 设置组件在父容器主轴方向上的基准尺寸。<br/>默认值:'auto'(表示组件在主轴方向上的基准尺寸为组件原本的大小) |
| flexGrow | number | 0 | Flex容器的剩余空间分配给此属性所在组件的比例。 | | flexGrow | number | 设置父容器的剩余空间分配给此属性所在组件的比例。<br/>默认值:0 |
| flexShrink | number | 1 | Flex容器压缩尺寸分配给此属性所在组件的比例。 | | flexShrink | number | 设置父容器压缩尺寸分配给此属性所在组件的比例。<br/>默认值:1 |
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | Auto | 覆盖Flex布局容器中alignItems默认配置。 | | alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | 子组件在父容器交叉轴的对齐格式,覆盖Flex布局容器中alignItems默认配置。<br/>默认值:ItemAlign.Auto |
## 示例 ## 示例
...@@ -34,7 +29,7 @@ struct FlexExample { ...@@ -34,7 +29,7 @@ struct FlexExample {
Column({ space: 5 }) { Column({ space: 5 }) {
Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
// 基于主轴基准尺寸 // 基于主轴基准尺寸
// flexBasis()值可以是'auto'(默认值)元素本来的大小 ,如果是数字则类似于.width()/.height() ,基于主轴 // flexBasis()值可以是'auto',表示基准尺寸是元素本来的大小 ,也可以是长度设置,相当于.width()/.height()
Flex() { Flex() {
Text('flexBasis(100)') Text('flexBasis(100)')
.flexBasis('100').height(100).lineHeight(70) .flexBasis('100').height(100).lineHeight(70)
......
...@@ -3,24 +3,21 @@ ...@@ -3,24 +3,21 @@
设置组件的对齐方式、布局方向和显示位置。 设置组件的对齐方式、布局方向和显示位置。
> **说明:** > **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- |
| align | [Alignment](ts-appendix-enums.md#alignment) | Center | 设置元素内容的对齐方式,只有当设置的width和height大小超过元素本身内容大小时生效。 | | align | [Alignment](ts-appendix-enums.md#alignment) | 设置元素内容的对齐方式,只有当设置的width和height大小超过元素本身内容大小时生效。<br/>默认值:Alignment.Center |
| direction | [Direction](ts-appendix-enums.md#direction) | Auto | 设置元素水平方向的布局,可选值参照Direction枚举说明。 | | direction | [Direction](ts-appendix-enums.md#direction) | 设置元素水平方向的布局。<br/>默认值:Direction.Auto |
| position | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | - | 使用绝对定位,设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 | | position | {<br/>x:&nbsp;[Length](../../ui/ts-types.md#length),<br/>y:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 使用绝对定位,设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 |
| markAnchor | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。 | | markAnchor | {<br/>x:&nbsp;[Length](../../ui/ts-types.md#length),<br/>y:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 设置元素在位置定位时的锚点,以元素顶部起点作为基准点进行偏移。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| offset | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 相对布局完成位置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整。 | | offset | {<br/>x:&nbsp;[Length](../../ui/ts-types.md#length),<br/>y:&nbsp;[Length](../../ui/ts-types.md#length)<br/>} | 相对布局完成位置坐标偏移量,设置该属性,不影响父容器布局,仅在绘制时进行位置调整。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 1<br/>} |
| alignRules<sup>9+</sup> | {<br/>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br/>} | 指定相对容器的对齐规则。<br/>-&nbsp;left:设置左对齐参数。<br/>-&nbsp;right:设置右对齐参数。<br/>-&nbsp;middle:设置中间对齐的参数。<br/>-&nbsp;top:设置顶部对齐的参数。<br/>-&nbsp;bottom:设置底部对齐的参数。<br/>-&nbsp;center:设置中心对齐的参数。<br/>**说明:**<br/>-&nbsp;anchor:设置作为锚点的组件的id值。<br>-&nbsp;align:设置相对于锚点组件的对齐方式。 |
## 示例 ## 示例
......
...@@ -3,12 +3,8 @@ ...@@ -3,12 +3,8 @@
用于设置组件的宽高、边距等显示尺寸进行设置。 用于设置组件的宽高、边距等显示尺寸进行设置。
> **说明:** > **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 >
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 属性 ## 属性
......
...@@ -6,16 +6,12 @@ ...@@ -6,16 +6,12 @@
> >
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 事件 ## 事件
| 名称 | 支持冒泡 | 功能描述 | | 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | --------------------------------- | | ------------------------------------------------------------ | -------- | --------------------------------------------------- |
| onClick(callback:&nbsp;(event?:&nbsp;ClickEvent)&nbsp;=&gt;&nbsp;void) | 否 | 点击动作触发该方法调用,event参数见ClickEvent介绍。 | | onClick(event:&nbsp;(event?:&nbsp;ClickEvent)&nbsp;=&gt;&nbsp;void) | 否 | 点击动作触发该方法调用,event参数见ClickEvent介绍。 |
## ClickEvent对象说明 ## ClickEvent对象说明
| 属性名称 | 类型 | 描述 | | 属性名称 | 类型 | 描述 |
......
...@@ -3,20 +3,16 @@ ...@@ -3,20 +3,16 @@
挂载卸载事件指组件从组件树上挂载、卸载时触发的事件。 挂载卸载事件指组件从组件树上挂载、卸载时触发的事件。
> **说明:** > **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 事件 ## 事件
| 名称 | 支持冒泡 | 功能描述 | | 名称 | 支持冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ------------- | | ------------------------------------------------ | -------- | -------------------------- |
| onAppear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件挂载显示时触发此回调。 | | onAppear(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件挂载显示时触发此回调。 |
| onDisappear(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件卸载消失时触发此回调。 | | onDisappear(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 组件卸载消失时触发此回调。 |
## 示例 ## 示例
......
...@@ -3,19 +3,15 @@ ...@@ -3,19 +3,15 @@
当手指放在组件上、滑动或从组件上移开时触发。 当手指放在组件上、滑动或从组件上移开时触发。
> **说明:** > **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 事件 ## 事件
| 名称 | 是否冒泡 | 功能描述 | | 名称 | 是否冒泡 | 功能描述 |
| ---------------------------------------- | ---- | ---------------------------------------- | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onTouch(callback:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | 是 | 触摸动作触发该方法调用,event参数见[TouchEvent](#touchevent对象说明)介绍。 | | onTouch(event:&nbsp;(event?:&nbsp;TouchEvent)&nbsp;=&gt;&nbsp;void) | 是 | 触摸动作触发该方法调用,event参数见[TouchEvent](#touchevent对象说明)介绍。 |
## TouchEvent对象说明 ## TouchEvent对象说明
......
...@@ -8,17 +8,12 @@ ...@@ -8,17 +8,12 @@
> - 目前仅支持通过外接键盘的tab键、方向键触发。 > - 目前仅支持通过外接键盘的tab键、方向键触发。
## 权限列表
## 事件 ## 事件
| **名称** | **支持冒泡** | **功能描述** | | **名称** | **支持冒泡** | **功能描述** |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| onFocus(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 | | onFocus(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件获取焦点时触发的回调。 |
| onBlur(callback:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 | | onBlur(event:()&nbsp;=&gt;&nbsp;void) | 否 | 当前组件失去焦点时触发的回调。 |
> **说明:** > **说明:**
> 支持焦点事件的组件:Button、Text、Image、List、Grid。 > 支持焦点事件的组件:Button、Text、Image、List、Grid。
......
...@@ -3,20 +3,16 @@ ...@@ -3,20 +3,16 @@
在单个动作触发多个事件时,事件的顺序是固定的,鼠标事件默认透传。 在单个动作触发多个事件时,事件的顺序是固定的,鼠标事件默认透传。
> **说明:** > **说明:**
>
> 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 事件 ## 事件
| 名称 | 支持冒泡 | 描述 | | 名称 | 支持冒泡 | 描述 |
| ---------------------------------------- | ---- | ---------------------------------------- | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onHover(callback:&nbsp;(isHover?:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 否 | 鼠标进入或退出组件时触发该回调。<br/>isHover:表示鼠标是否悬浮在组件上,鼠标进入时为true,&nbsp;退出时为false。 | | onHover(event:&nbsp;(isHover?:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 否 | 鼠标进入或退出组件时触发该回调。<br/>isHover:表示鼠标是否悬浮在组件上,鼠标进入时为true,&nbsp;退出时为false。 |
| onMouse(callback:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上移动时,触发该回调,event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点相对于当前组件的坐标。 | | onMouse(event:&nbsp;(event?:&nbsp;MouseEvent)&nbsp;=&gt;&nbsp;void) | 是 | 当前组件被鼠标按键点击时或者鼠标在组件上移动时,触发该回调,event参数包含触发事件时的时间戳、鼠标按键、动作、点击触点在整个屏幕上的坐标和点击触点相对于当前组件的坐标。 |
## MouseEvent对象说明 ## MouseEvent对象说明
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册