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..0041374b52a2be5a93f620dabed0cba74990ee6f 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..27321b5a24798d6d423cbf76eab974f4ebc2d0fb 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..dd97ea25d042abb1bf14ea0ba1012eedc57eb135 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 f1bc8b9ee610cc20aec1a496a8a9a44a81514a4e..6db7e8dbfb219c2538725ccb8fd908f902ccc5b0 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开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 子组件 支持单个子组件。 @@ -42,15 +37,6 @@ | position | [BadgePosition](#badgeposition枚举说明) | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | | style | [BadgeStyle](#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枚举说明 | 名称 | 描述 | @@ -59,6 +45,13 @@ | 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的颜色。 | ## 示例 @@ -67,44 +60,92 @@ @Entry @Component struct BadgeExample { - @State counts: number = 1 - @State message: string = 'new' + @State counts: number = 1; + @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..6b34c3cee54a5b1d6094505abe506a6b9e2bc00b 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 | ## 属性 @@ -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..dd96432e8b7f5368ad47c9fc9b1823a362a2b75c 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 @@ -1,15 +1,10 @@ # ColumnSplit -> **说明：** -> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - 将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。 +> **说明：** +> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 ## 子组件 @@ -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..27fbd173f704132eb302d27c2191d258761e8533 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 @@ -1,15 +1,13 @@ # Counter +计数器组件，提供相应的增加或者减少的计数操作。 + > **说明：** > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -计数器组件，提供相应的增加或者减少的计数操作。 - -## 权限列表 -无 ## 子组件 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..895184056c41747c9a5f970c89882c7cf4b7cc6e 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 | 是 | 指定跳转目标页面的路径。 | +| 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 | ## 示例 @@ -49,7 +49,7 @@ Navigator(value?: {target: string, type?: NavigationType}) @Entry @Component struct NavigatorExample { - @State active: boolean = false + @State active: boolean = false; @State Text: object = {name: 'news'} build() { @@ -57,13 +57,13 @@ 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) }.active(this.active) .onClick(() => { - this.active = true + this.active = true; }) }.height(150).width(350).padding(35) } @@ -72,12 +72,13 @@ struct NavigatorExample { ```ts // Detail.ets -import router from '@system.router' +import router from '@ohos.router' @Entry @Component struct DetailExample { - @State text: any = router.getParams().text + // 接收Navigator.ets的传参 + @State text: any = router.getParams().text; build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 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..3d46fe5c2ead4d6359b428220f6f75928aa1fe8d 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,18 @@ ## 规则说明 * 容器内子组件区分水平方向，垂直方向： - * 水平方向为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。 * 子组件可以将容器或者其他子组件设为锚点： - * 参与相对布局的容器内组件必须设置id，容器id固定为__container__ - * 无id的子组件位置设置默认为容器左上方 - * 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个 - * 同方向上两个以上位置设置锚点时此子组件额外设置width，height不生效 - * 对齐后需要额外偏移可设置offset + * 参与相对布局的容器内组件必须设置id，容器RelativeContainer的id固定为'__container__'。 + * 无id的子组件位置设置默认为容器左上方。 + * 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个。 + * 同方向上两个以上位置设置锚点时此子组件额外设置width，height不生效。 + * 对齐后需要额外偏移可设置offset。 * 特殊情况 - * 互相依赖，环形依赖时容器内子组件全部不绘制 - * 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制 - -## 权限列表 - -无 - + * 互相依赖，环形依赖时容器内子组件全部不绘制。 + * 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。 + ## 子组件 @@ -42,49 +38,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 54c51fe6288d6b11bc989f0a1d5e0af02c3ec25f..ba536c338ffb88ce73f1a0619d722f8b1c2743c0 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 @@ -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 4768ef64f18bc63f33b96c1cd1a927ad46585afd..e0a02896e93d84a2134a740731beae086e0f71d3 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.None | @@ -161,14 +161,15 @@ scrollBy(dx: Length, dy: Length): void ## 示例 +### 示例1 ```ts // xxx.ets @Entry @Component struct ScrollExample { - scroller: Scroller = new Scroller() - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + scroller: Scroller = new Scroller(); + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; build() { Stack({ alignContent: Alignment.TopStart }) { @@ -186,38 +187,39 @@ 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) + console.info(xOffset + ' ' + yOffset); }) .onScrollEdge((side: Edge) => { - console.info('To the edge') + console.info('To the edge'); }) .onScrollEnd(() => { - console.info('Scroll Stop') + console.info('Scroll Stop'); }) - + Button('scroll 150') .onClick(() => { // 点击后下滑指定距离150.0vp - this.scroller.scrollBy(0,150) + this.scroller.scrollBy(0,150); }) .margin({ top: 10, left: 20 }) Button('scroll 100') .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离 - this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) + this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }); }) .margin({ top: 60, left: 20 }) Button('back top') .onClick(() => { // 点击后回到顶部 - this.scroller.scrollEdge(Edge.Top) + this.scroller.scrollEdge(Edge.Top); }) .margin({ top: 110, left: 20 }) Button('next page') .onClick(() => { // 点击后滑到下一页 - this.scroller.scrollPage({ next: true }) + this.scroller.scrollPage({ next: true }); }) .margin({ top: 170, left: 20 }) }.width('100%').height('100%').backgroundColor(0xDCDCDC) @@ -227,14 +229,14 @@ struct ScrollExample { ![zh-cn_image_0000001174104386](figures/zh-cn_image_0000001174104386.gif) - +### 示例2 ```ts @Entry @Component struct NestedScroll { - @State listPosition: number = 0 // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 - private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] - private scroller: Scroller = new Scroller() + @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 + private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + private scroller: Scroller = new Scroller(); build() { Flex() { @@ -255,18 +257,18 @@ struct NestedScroll { } .width("100%").height("50%").edgeEffect(EdgeEffect.None) .onReachStart(() => { - this.listPosition = 0 + this.listPosition = 0; }) .onReachEnd(() => { - this.listPosition = 2 + this.listPosition = 2; }) .onScrollBegin((dx: number, dy: number) => { if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) { - this.scroller.scrollBy(0, -dy) - return { dxRemain: dx, dyRemain: 0 } + this.scroller.scrollBy(0, -dy); + return { dxRemain: dx, dyRemain: 0 }; } this.listPosition = 1; - return { dxRemain: dx, dyRemain: dy } + return { dxRemain: dx, dyRemain: dy }; }) Text("Scroll Area") diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md index a1f8377688ccbc92894bf6cd20698688a551db1b..2caa55742494f1bcbc26afd7a90ac4b6c98b500e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md @@ -57,4 +57,4 @@ struct KeyEventExample { } ``` - ![keyEvent](figures/keyEvent.png) \ No newline at end of file + ![keyEvent](figures/keyEvent.png)