diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Column.png b/zh-cn/application-dev/reference/arkui-ts/figures/Column.png deleted file mode 100644 index 90bb7a5557e42ccc9b6509f96f54328d7a27eea1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/Column.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Row.png b/zh-cn/application-dev/reference/arkui-ts/figures/Row.png deleted file mode 100644 index 6bf426a5f019e76b7b3a0953643988690eb67b1e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/Row.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/badge.png b/zh-cn/application-dev/reference/arkui-ts/figures/badge.png new file mode 100644 index 0000000000000000000000000000000000000000..3228bdc96740a74d0be96891882c423502da4925 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/badge.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/column.png b/zh-cn/application-dev/reference/arkui-ts/figures/column.png new file mode 100644 index 0000000000000000000000000000000000000000..fa79a310ab8ae0be4902227cd26cb137104a15b3 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/column.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/row.png b/zh-cn/application-dev/reference/arkui-ts/figures/row.png new file mode 100644 index 0000000000000000000000000000000000000000..843395ffe02b62ddb87fdad53cb495dc1c1fe432 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/row.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864147.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864147.gif deleted file mode 100644 index 016da55bb5d98a3d2787d870bf2575fbaf383990..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864147.gif and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md index 1e68ee635c0ec903f556bbf68342ca5a57438b07..7cc4e1106c07615a07ffe3b1577d0d35ab0f5457 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md @@ -6,11 +6,6 @@ > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 子组件 支持单个子组件。 @@ -18,44 +13,35 @@ ## 接口 -方法1：Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) - +方法1：Badge(value: { count: number, maxCount?: number, position?: BadgePosition, style: BadgeStyle}) 创建数字标记组件。 +方法2：Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) +根据字符串创建标记组件。 **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| 参数名 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | -| count | number | 是 | - | 设置提醒消息数。 | -| position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | -| maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 | -| style | BadgeStyle | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | - -方法2： Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) +| count | number | 是 | 设置提醒消息数。 | +| maxCount | number | 否 | 最大消息数，超过最大消息时仅显示maxCount+。
默认值：99 | +| value | string | 是 | 提示内容的文本字符串。 | +| position | [BadgePosition](#badgeposition枚举说明) | 否 | 设置提示点显示位置。
默认值：BadgePosition.RightTop | +| style | [BadgeStyle](#badgestyle对象说明) | 是 | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | -根据字符串创建标记组件。 - -- 参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | value | string | 是 | - | 提示内容的文本字符串。 | - | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | - | style | BadgeStyle | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | -- BadgeStyle对象说明 - | 名称 | 类型 | 必填 | 默认值 | 描述 | - | -------- | -------- | -------- | -------- | -------- | - | color | [ResourceColor](ts-types.md) | 否 | Color.White | 文本颜色。 | - | fontSize | number \| string | 否 | 10 | 文本大小。 | - | badgeSize | number \| string | 是 | - | badge的大小。 | - | badgeColor | [ResourceColor](ts-types.md) | 否 | Color.Red | badge的颜色。 | - -- BadgePosition枚举说明 - | 名称 | 描述 | +## BadgePosition枚举说明 +| 名称 | 描述 | | -------- | -------- | - | RightTop | 圆点显示在右上角。 | - | Right | 圆点显示在右侧纵向居中。 | - | Left | 圆点显示在左侧纵向居中。 | +| RightTop | 圆点显示在右上角。 | +| Right | 圆点显示在右侧纵向居中。 | +| Left | 圆点显示在左侧纵向居中。 | +## BadgeStyle对象说明 +| 名称 | 类型 | 必填 | 默认值 | 描述 | + | -------- | -------- | -------- | -------- | -------- | +| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.White | 文本颜色。 | +| fontSize | number \| string | 否 | 10 | 文本大小。 | +| badgeSize | number \| string | 是 | - | badge的大小。 | +| badgeColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | Color.Red | badge的颜色。 | ## 示例 @@ -68,40 +54,88 @@ struct BadgeExample { @State message: string = 'new' build() { - Flex({ justifyContent: FlexAlign.SpaceAround }) { - Badge({ - count: this.counts, - maxCount: 99, - style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } - }) { - Button('message') - .onClick(() => { - this.counts++ - }) - .width(100).height(50).backgroundColor(0x317aff) - }.width(100).height(50) - - Badge({ - value: this.message, - style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } - }) { - Text('message') - .width(80).height(50).fontSize(16).lineHeight(37) - .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) - }.width(80).height(50) - - Badge({ - value: ' ', - position: BadgePosition.Right, - style: { badgeSize: 6, badgeColor: Color.Red } - }) { - Text('message') - .width(90).height(50).fontSize(16).lineHeight(37) - .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) - }.width(90).height(50) - }.width('100%').margin({ top: 5 }) + Column() { + Text('numberBadge').width('80%') + Row({ space: 10 }) { + // 数字上标，maxCount默认99,超过99展示99+ + Badge({ + count: this.counts, + maxCount: 99, + position: BadgePosition.RightTop, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++ + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + + // 数字上标 + Badge({ + count: this.counts, + maxCount: 99, + position: BadgePosition.Left, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++ + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + + + // 数字上标 + Badge({ + count: this.counts, + maxCount: 99, + position: BadgePosition.Right, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++ + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + }.margin(10) + + Text('stringBadge').width('80%') + Row({ space: 30 }) { + Badge({ + value: this.message, + style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } + }) { + Text('message') + .width(80) + .height(50) + .fontSize(16) + .lineHeight(37) + .borderRadius(10) + .textAlign(TextAlign.Center) + .backgroundColor(0xF3F4ED) + }.width(80).height(50) + + // value为空，设置圆点标记 + Badge({ + value: '', + position: BadgePosition.Right, + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Text('message') + .width(90) + .height(50) + .fontSize(16) + .lineHeight(37) + .borderRadius(10) + .textAlign(TextAlign.Center) + .backgroundColor(0xF3F4ED) + }.width(90).height(50) + }.margin(10) + } } } ``` -![zh-cn_image_0000001219864147](figures/zh-cn_image_0000001219864147.gif) +![badge](figures/badge.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md index 89c881153a6ecf8028938f2bd35e903d7c2a63dc..2e0a5e2d9c6d0cb62a3fa3e1b896c227623b9436 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md @@ -20,7 +20,7 @@ Column(value?: {space?: string | number}) | 参数名 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -| space | string \| number | 否 | 纵向布局元素间距。
默认值：0 | +| space | string \| number | 否 | 纵向布局元素垂直方向间距。
默认值：0 | ## 属性 @@ -28,8 +28,8 @@ Column(value?: {space?: string | number}) | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | -| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置子组件在水平方向上的对齐格式。
默认值：HorizontalAlign.Center | -| justifyContent8+ | [FlexAlign](ts-container-flex.md) | 设置子组件在垂直方向上的对齐格式。
默认值：FlexAlign.Start | +| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置子组件在水平方向上的对齐格式。当子组件与父组件宽度一样时无效。
默认值：HorizontalAlign.Center | +| justifyContent8+ | [FlexAlign](ts-container-flex.md) | 设置子组件在垂直方向上的对齐格式。当子组件与父组件高度一样时无效。
默认值：FlexAlign.Start | ## 示例 @@ -40,38 +40,47 @@ Column(value?: {space?: string | number}) struct ColumnExample { build() { Column() { - Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column({ space: 5 }) { - Column().width('100%').height(30).backgroundColor(0xAFEEEE) - Column().width('100%').height(30).backgroundColor(0x00FFFF) - }.width('90%').height(100).border({ width: 1 }) - - Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('50%').height(30).backgroundColor(0xAFEEEE) - Column().width('50%').height(30).backgroundColor(0x00FFFF) - }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) - - Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('50%').height(30).backgroundColor(0xAFEEEE) - Column().width('50%').height(30).backgroundColor(0x00FFFF) - }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) - - Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('30%').height(30).backgroundColor(0xAFEEEE) - Column().width('30%').height(30).backgroundColor(0x00FFFF) - }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center) - - Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Column() { - Column().width('30%').height(30).backgroundColor(0xAFEEEE) - Column().width('30%').height(30).backgroundColor(0x00FFFF) - }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.End) + // 设置子元素垂直方向间距为5 + Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column({ space: 5 }) { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + Column().width('100%').height(30).backgroundColor(0x00FFFF) + }.width('90%').height(100).border({ width: 1 }) + + // 设置子元素水平方向对齐方式 + Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) + + Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) + + Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(30).backgroundColor(0xAFEEEE) + Column().width('50%').height(30).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 }) + + // 设置子元素垂直方向的对齐方式 + Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('90%').height(30).backgroundColor(0xAFEEEE) + Column().width('90%').height(30).backgroundColor(0x00FFFF) + }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center) + + Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('90%').height(30).backgroundColor(0xAFEEEE) + Column().width('90%').height(30).backgroundColor(0x00FFFF) + }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End) }.width('100%').padding({ top: 5 }) } } ``` -![zh-cn_image_0000001219982721](figures/Column.png) +![column](figures/column.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md index 1173d54869b5dbf9b89a9cddc186565ed317b01b..3e3d67af7b2cec5e871cd72df7bbca1aa1f09f6b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md @@ -7,11 +7,6 @@ 将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。 -## 权限列表 - -无 - - ## 子组件 可以包含子组件。 @@ -30,7 +25,8 @@ ColumnSplit() > **说明：** > 与RowSplit相同，ColumnSplit的分割线最小能拖动到刚好包含子组件。 - +> +> 在真机中查看拖动效果，预览器中不支持拖动。 ## 示例 @@ -49,7 +45,7 @@ struct ColumnSplitExample { Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) } - .resizeable(true) + .resizeable(true) // 可拖动 .width('90%').height('60%') }.width('100%') } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md index 6f94eece93ee10164499d401438263123f7ea06f..87b3fff1db30bb0168eb8236c75cf0946144d7f8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md @@ -7,10 +7,6 @@ 计数器组件，提供相应的增加或者减少的计数操作。 -## 权限列表 - -无 - ## 子组件 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md index 0faa4e3a99be989f94c2f0a84d25d6435735663a..deb27f85542c8c8984970e76263037b93109a842 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md @@ -20,8 +20,8 @@ Navigator(value?: {target: string, type?: NavigationType}) | 参数名 | 参数类型 | 必填 | 参数描述 | | ------ | -------------- | ---- | ---------------------------------------------- | -| target | string | 是 | 指定跳转目标页面的路径。 | -| type | NavigationType | 否 | 指定路由方式。
默认值：NavigationType.Push | +| target | string | 是 | 指定跳转目标页面的路径。目标页面需加入main_pages.json文件中。 | +| type | [NavigationType](#navigationtype枚举说明) | 否 | 指定路由方式。
默认值：NavigationType.Push | ## NavigationType枚举说明 @@ -37,9 +37,9 @@ Navigator(value?: {target: string, type?: NavigationType}) | 名称 | 参数 | 描述 | | ------ | ------- | ------------------------------------------------------------ | | active | boolean | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 | -| params | object | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 | -| target | string | 设置跳转目标页面的路径。 | -| type | NavigationType | 设置路由方式。
默认值：NavigationType.Push | +| params | object | 跳转时要同时传递到目标页面的数据，可在目标页面使用[router.getParams()](../apis/js-api-router.md#routergetparams)获得。 | +| target | string | 设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。 | +| type | [NavigationType](#navigationtype枚举说明) | 设置路由方式。
默认值：NavigationType.Push | ## 示例 @@ -57,7 +57,7 @@ struct NavigatorExample { Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) { Text('Go to ' + this.Text['name'] + ' page') .width('100%').textAlign(TextAlign.Center) - }.params({ text: this.Text }) + }.params({ text: this.Text }) // 传参数到Detail页面 Navigator() { Text('Back to previous page').width('100%').textAlign(TextAlign.Center) @@ -77,6 +77,7 @@ import router from '@system.router' @Entry @Component struct DetailExample { + // 接收Navigator.ets的传参 @State text: any = router.getParams().text build() { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md index b59cf14a8370853483539d53b73e410c520b28ae..9c0dd645c5a809fa4007e964c2e72932bc35e727 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md @@ -27,8 +27,8 @@ Panel(show: boolean) | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | -| type | PanelType | 设置可滑动面板的类型。
默认值：PanelType.Foldable | -| mode | PanelMode | 设置可滑动面板的初始状态。 | +| type | [PanelType](#paneltype枚举说明) | 设置可滑动面板的类型。
默认值：PanelType.Foldable | +| mode | [PanelMode](#panelmode枚举说明) | 设置可滑动面板的初始状态。 | | dragBar | boolean | 设置是否存在dragbar，true表示存在，false表示不存在。
默认值：true | | fullHeight | string \| number | 指定PanelMode.Full状态下的高度。 | | halfHeight | string \| number | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md index d1849a00c4bf3ced1ec7d953c60303b16ea5bd09..d03a2a041999f38c12d8dad5d2cd1f70e8656a7d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md @@ -29,7 +29,7 @@ Refresh\(value: \{ refreshing: boolean, offset?: number | string , fr | 名称 | 描述 | | -------- | -------- | -| onStateChange(callback: (state: RefreshStatus) => void)| 当前刷新状态变更时，触发回调。
- state：刷新状态。 | +| onStateChange(callback: (state: [RefreshStatus](#refreshstatus枚举说明)) => void)| 当前刷新状态变更时，触发回调。
- state：刷新状态。 | | onRefreshing(callback: () => void)| 进入刷新状态时触发回调。 | ## RefreshStatus枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-relativecontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-relativecontainer.md index 6b55112ff56f38e83372fb7f319f6e99eb440c2b..eec2c458a66ccc0418a731b9bc49f46c80334b24 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-relativecontainer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-relativecontainer.md @@ -10,22 +10,19 @@ ## 规则说明 * 容器内子组件区分水平方向，垂直方向： - * 水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End - * 垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom + * 水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。 + * 垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。 + * 子组件使用[alignRules](ts-universal-attributes-location.md)属性设置其上中下，左中右边界与外层容器或者设置了id的其他子组件的上中下，左中右对齐方式，具体参考示例。 * 子组件可以将容器或者其他子组件设为锚点： - * 参与相对布局的容器内组件必须设置id，容器id固定为__container__ - * 无id的子组件位置设置默认为容器左上方 - * 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个 - * 同方向上两个以上位置设置锚点时此子组件额外设置width，height不生效 - * 对齐后需要额外偏移可设置offset + * 参与相对布局的容器内组件必须设置id，容器RelativeContainer的id固定为'__container__'。 + * 无id的子组件位置设置默认为容器左上方。 + * 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个。 + * 同方向上两个以上位置设置锚点时此子组件额外设置width，height不生效。 + * 对齐后需要额外偏移可设置offset。 * 特殊情况 - * 互相依赖，环形依赖时容器内子组件全部不绘制 - * 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制 - -## 权限列表 - -无 - + * 互相依赖，环形依赖时容器内子组件全部不绘制。 + * 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。 + ## 子组件 @@ -42,49 +39,68 @@ RelativeContainer() @Entry @Component struct Index { - build() { Row() { - Button("Extra button").width(100).height(50) - RelativeContainer() { - Button("Button 1").width(120).height(30) - .alignRules({ - middle: { anchor: "__container__", align: HorizontalAlign.Center }, - }) - .id("bt1").borderWidth(1).borderColor(Color.Black) - Text("This is text 2").fontSize(20).padding(10) - .alignRules({ - bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, - top: { anchor: "bt1", align: VerticalAlign.Bottom }, - right:{ anchor: "bt1", align: HorizontalAlign.Center } - }).id("tx2").borderWidth(1).borderColor(Color.Black).height(30) - - LoadingProgress().color(Color.Blue) - .alignRules({ - left: { anchor: "bt1", align: HorizontalAlign.End }, - top: { anchor: "tx2", align: VerticalAlign.Center }, - bottom: { anchor: "__container__", align: VerticalAlign.Bottom } - }).id("lp3").borderWidth(1).borderColor(Color.Black) - .height(30).width(30) - - Gauge({ value: 50, min: 0, max: 100 }) - .startAngle(210).endAngle(150) - .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) - .strokeWidth(20) - .width(50).height(50) - .alignRules({ - left: { anchor: "tx2", align: HorizontalAlign.End }, - right:{ anchor: "__container__", align: HorizontalAlign.End }, - top: { anchor: "__container__", align: VerticalAlign.Top }, - bottom: { anchor: "lp3", align: VerticalAlign.Top } - }).id("g4").borderWidth(1).borderColor(Color.Black) - - } - .width(200).height(200) - .backgroundColor(Color.Orange) - - } - .height('100%') + Button("Extra button").width(100).height(50) + + // 外层容器的id默认为为'__container__' + RelativeContainer() { + Button("Button 1") + .width(120) + .height(30) + .alignRules({ + middle: { anchor: "__container__", align: HorizontalAlign.Center }, // 水平方向上，组件中部与容器中间对齐，即组件在容器中水平居中 + }) + .id("bt1") // id设置为bt1 + .borderWidth(1) + .borderColor(Color.Black) + + Text("This is text 2") + .fontSize(20) + .padding(10) + .borderWidth(1) + .borderColor(Color.Black) + .height(30) + .id("tx2") // id设置为tx2 + .alignRules({ + bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, // 组件下边与容器下边对齐 + top: { anchor: "bt1", align: VerticalAlign.Bottom }, // 组件上边与button1底部对齐 + right: { anchor: "bt1", align: HorizontalAlign.Center } // 组件右侧与button1中间点对齐 + }) + + LoadingProgress() + .color(Color.Blue) + .borderWidth(1) + .borderColor(Color.Black) + .height(30) + .width(30) + .id("lp3") // id设置为lp3 + .alignRules({ + left: { anchor: "bt1", align: HorizontalAlign.End }, // 组件左边对齐容器bt1的右边 + top: { anchor: "tx2", align: VerticalAlign.Center }, // 组件上边对齐容器tx2的中间 + bottom: { anchor: "__container__", align: VerticalAlign.Bottom } // 组件下边对齐最外层容器的底边 + }) + + Gauge({ value: 50, min: 0, max: 100 }) + .startAngle(210) + .endAngle(150) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]]) + .strokeWidth(20) + .width(50) + .height(50) + .alignRules({ + left: { anchor: "tx2", align: HorizontalAlign.End }, // 组件左边对齐容器tx2的右边 + right: { anchor: "__container__", align: HorizontalAlign.End }, // 组件右边对齐最外层容器的右边 + top: { anchor: "__container__", align: VerticalAlign.Top }, // 组件上边对齐最外层容器的上边 + bottom: { anchor: "lp3", align: VerticalAlign.Top } // 组件下边对齐容器lp3的上边 + }) + .id("g4") + .borderWidth(1) + .borderColor(Color.Black) + } + .width(200).height(200) + .backgroundColor(Color.Orange) + }.height('100%') } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md index 8376694073445f0b52b7f283be3a7b44cc2cb1e2..0ebbe9d5cbbb2ac0ec8fa3f0597e8bc9366f6ee6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md @@ -27,8 +27,8 @@ Row(value?:{space?: number | string }) | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | -| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。
默认值：VerticalAlign.Center | -| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。
FlexAlign.Start | +| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。当子组件与父组件高度一样时无效。
默认值：VerticalAlign.Center | +| justifyContent8+ | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。当子组件与父组件宽度一样时无效。
FlexAlign.Start | ## 示例 @@ -40,38 +40,41 @@ Row(value?:{space?: number | string }) struct RowExample { build() { Column({ space: 5 }) { + // 设置子组件水平方向的间距为5 Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row({ space: 5 }) { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.width('90%').height(107).border({ width: 1 }) - - Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 }) - - Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) - - Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) - - Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') - Row() { - Row().width('30%').height(50).backgroundColor(0xAFEEEE) - Row().width('30%').height(50).backgroundColor(0x00FFFF) - }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) + Row({ space: 5 }) { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').height(107).border({ width: 1 }) + + // 设置子元素垂直方向对齐方式 + Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 }) + + Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 }) + + // 设置子元素水平方向对齐方式 + Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End) + + Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + Row().width('30%').height(50).backgroundColor(0x00FFFF) + }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center) }.width('100%') } } ``` -![zh-cn_image_0000001174422908](figures/Row.png) +![row](figures/row.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md index 0cec1a56838513830296eb80e4860ffde3ddb795..ae460606c107c01221789228b458b7160e66d93a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md @@ -7,10 +7,6 @@ 将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。 -## 权限列表 - -无 - ## 子组件 @@ -30,6 +26,8 @@ RowSplit() > **说明：** > RowSplit的分割线最小能拖动到刚好包含子组件。 +> +> 在真机中查看拖动效果，预览器中不支持拖动。 ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md index 4dadcc663fc36e9375eec8e830cade16ceb5cc57..7e9416442e28a60c855172f5147f5b12dcf2c213 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -24,9 +24,9 @@ Scroll(scroller?: Scroller) | 名称 | 参数类型 | 描述 | | -------------- | ---------------------------------------- | --------- | -| scrollable | ScrollDirection | 设置滚动方向。
默认值：ScrollDirection.Vertical | +| scrollable | [ScrollDirection](#scrolldirection枚举说明) | 设置滚动方向。
默认值：ScrollDirection.Vertical | | scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off | -| scrollBarColor | string \| number \| Color | 设置滚动条的颜色。 | +| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 | | scrollBarWidth | string \| number | 设置滚动条的宽度。 | | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。
默认值：EdgeEffect.Spring | @@ -186,10 +186,11 @@ struct ScrollExample { }, item => item) }.width('100%') } - .scrollable(ScrollDirection.Vertical) - .scrollBar(BarState.On) - .scrollBarColor(Color.Gray) - .scrollBarWidth(30) + .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 + .scrollBar(BarState.On) // 滚动条常驻显示 + .scrollBarColor(Color.Gray) // 滚动条颜色 + .scrollBarWidth(30) // 滚动条宽度 + .edgeEffect(EdgeEffect.None) .onScroll((xOffset: number, yOffset: number) => { console.info(xOffset + ' ' + yOffset) }) @@ -199,7 +200,7 @@ struct ScrollExample { .onScrollEnd(() => { console.info('Scroll Stop') }) - + Button('scroll 150') .onClick(() => { // 点击后下滑指定距离150.0vp this.scroller.scrollBy(0,150)