Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 7b58e114 编写于 作者: S sienna1128
浏览文件
操作

update docs 

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 fcbc9fca
隐藏空白更改
内联 并排
Showing with 272 addition and 218 deletion
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ 7b58e114
......@@ -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+。<br> 默认值：99 |
| value | string | 是 | 提示内容的文本字符串。 |
| position | [BadgePosition](#badgeposition枚举说明) | 否 | 设置提示点显示位置。<br>默认值：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&nbsp;\|&nbsp;string | 否 | 10 | 文本大小。 |
| badgeSize | number&nbsp;\|&nbsp;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&nbsp;\|&nbsp;string | 否 | 10 | 文本大小。 |
| badgeSize | number&nbsp;\|&nbsp;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)
zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ 7b58e114
......@@ -20,7 +20,7 @@ Column(value?:&nbsp;{space?: string&nbsp;|&nbsp;number})
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| space | string&nbsp;\|&nbsp;number | 否 | 纵向布局元素间距。<br/>默认值：0 |
| space | string&nbsp;\|&nbsp;number | 否 | 纵向布局元素垂直方向间距。<br/>默认值：0 |
## 属性
......@@ -28,8 +28,8 @@ Column(value?:&nbsp;{space?: string&nbsp;|&nbsp;number})
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置子组件在水平方向上的对齐格式。<br/>默认值：HorizontalAlign.Center |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | 设置子组件在垂直方向上的对齐格式。<br/>默认值：FlexAlign.Start |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | 设置子组件在水平方向上的对齐格式。当子组件与父组件宽度一样时无效。<br/>默认值：HorizontalAlign.Center |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | 设置子组件在垂直方向上的对齐格式。当子组件与父组件高度一样时无效。<br/>默认值：FlexAlign.Start |
## 示例
......@@ -40,38 +40,47 @@ Column(value?:&nbsp;{space?: string&nbsp;|&nbsp;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)
zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md
浏览文件 @ 7b58e114
......@@ -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%')
}
......
zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
浏览文件 @ 7b58e114
......@@ -7,10 +7,6 @@
计数器组件，提供相应的增加或者减少的计数操作。
## 权限列表
无
## 子组件
......
zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md
浏览文件 @ 7b58e114
......@@ -20,8 +20,8 @@ Navigator(value?: {target: string, type?: NavigationType})
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------------- | ---- | ---------------------------------------------- |
| target | string | 是 | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | 指定路由方式。<br/>默认值：NavigationType.Push |
| target | string | 是 | 指定跳转目标页面的路径。目标页面需加入main_pages.json文件中。 |
| type | [NavigationType](#navigationtype枚举说明) | 否 | 指定路由方式。<br/>默认值：NavigationType.Push |
## NavigationType枚举说明
......@@ -37,9 +37,9 @@ Navigator(value?: {target: string, type?: NavigationType})
| 名称 | 参数 | 描述 |
| ------ | ------- | ------------------------------------------------------------ |
| active | boolean | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。 |
| params | object | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 |
| target | string | 设置跳转目标页面的路径。 |
| type | NavigationType | 设置路由方式。<br/>默认值：NavigationType.Push |
| params | object | 跳转时要同时传递到目标页面的数据，可在目标页面使用[router.getParams()](../apis/js-api-router.md#routergetparams)获得。 |
| target | string | 设置跳转目标页面的路径。 目标页面需加入main_pages.json文件中。 |
| type | [NavigationType](#navigationtype枚举说明) | 设置路由方式。<br/>默认值：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() {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md
浏览文件 @ 7b58e114
......@@ -27,8 +27,8 @@ Panel(show: boolean)
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| type | PanelType | 设置可滑动面板的类型。<br/>默认值：PanelType.Foldable |
| mode | PanelMode | 设置可滑动面板的初始状态。 |
| type | [PanelType](#paneltype枚举说明) | 设置可滑动面板的类型。<br/>默认值：PanelType.Foldable |
| mode | [PanelMode](#panelmode枚举说明) | 设置可滑动面板的初始状态。 |
| dragBar | boolean | 设置是否存在dragbar，true表示存在，false表示不存在。<br/>默认值：true |
| fullHeight | string&nbsp;\|&nbsp;number | 指定PanelMode.Full状态下的高度。 |
| halfHeight | string&nbsp;\|&nbsp;number | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md
浏览文件 @ 7b58e114
......@@ -29,7 +29,7 @@ Refresh\(value: \{ refreshing: boolean, offset?: number&nbsp;|&nbsp;string , fr
| 名称 | 描述 |
| -------- | -------- |
| onStateChange(callback: (state: RefreshStatus) => void)| 当前刷新状态变更时，触发回调。<br/>-&nbsp;state：刷新状态。 |
| onStateChange(callback: (state: [RefreshStatus](#refreshstatus枚举说明)) => void)| 当前刷新状态变更时，触发回调。<br/>-&nbsp;state：刷新状态。 |
| onRefreshing(callback: () => void)| 进入刷新状态时触发回调。 |
## RefreshStatus枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-container-relativecontainer.md
浏览文件 @ 7b58e114
......@@ -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%')
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @ 7b58e114
......@@ -27,8 +27,8 @@ Row(value?:{space?: number&nbsp;|&nbsp;string })
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。<br/>FlexAlign.Start |
| alignItems | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置子组件在垂直方向上的对齐格式。当子组件与父组件高度一样时无效。<br/>默认值：VerticalAlign.Center |
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | 设置子组件在水平方向上的对齐格式。当子组件与父组件宽度一样时无效。<br/>FlexAlign.Start |
## 示例
......@@ -40,38 +40,41 @@ Row(value?:{space?: number&nbsp;|&nbsp;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)
zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md
浏览文件 @ 7b58e114
......@@ -7,10 +7,6 @@
将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。
## 权限列表
无
## 子组件
......@@ -30,6 +26,8 @@ RowSplit()
> **说明：**
> RowSplit的分割线最小能拖动到刚好包含子组件。
>
> 在真机中查看拖动效果，预览器中不支持拖动。
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ 7b58e114
......@@ -24,9 +24,9 @@ Scroll(scroller?: Scroller)
| 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | --------- |
| scrollable | ScrollDirection | 设置滚动方向。<br/>默认值：ScrollDirection.Vertical |
| scrollable | [ScrollDirection](#scrolldirection枚举说明) | 设置滚动方向。<br/>默认值：ScrollDirection.Vertical |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值：BarState.Off |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 设置滚动条的颜色。 |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 |
| scrollBarWidth | string&nbsp;\|&nbsp;number | 设置滚动条的宽度。 |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值：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)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或