Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

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

未验证 提交 bf5255b7 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!10117 update docs 

Merge pull request !10117 from sienna1128/docs/0929
上级 ae44d303 7cf8123a
隐藏空白更改
内联 并排
Showing with 283 addition and 220 deletion
zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md
浏览文件 @ bf5255b7
......@@ -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)
zh-cn/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ bf5255b7
......@@ -20,7 +20,7 @@ Column(value?: {space?: string | number})
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| space | string&nbsp;\|&nbsp;number | 否 | 纵向布局元素间距。<br/>默认值：0 |
| space | string&nbsp;\|&nbsp;number | 否 | 纵向布局元素垂直方向间距。<br/>默认值：0 |
## 属性
......@@ -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
浏览文件 @ bf5255b7
# 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%')
}
......
zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
浏览文件 @ bf5255b7
# Counter
计数器组件，提供相应的增加或者减少的计数操作。
> **说明：**
> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
计数器组件，提供相应的增加或者减少的计数操作。
## 权限列表
无
## 子组件
......
zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md
浏览文件 @ bf5255b7
......@@ -20,8 +20,8 @@ Navigator(value?: {target: string, type?: NavigationType})
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------------- | ---- | ---------------------------------------------- |
| target | string | 是 | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | 指定路由方式。<br/>默认值：NavigationType.Push |
| target | string | 是 | 指定跳转目标页面的路径。 |
| 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 |
## 示例
......@@ -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 }) {
......
zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md
浏览文件 @ bf5255b7
......@@ -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
浏览文件 @ bf5255b7
......@@ -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
浏览文件 @ bf5255b7
......@@ -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%')
}
}
```
......
zh-cn/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @ bf5255b7
......@@ -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
浏览文件 @ bf5255b7
......@@ -7,10 +7,6 @@
将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。
## 权限列表
无
## 子组件
......@@ -30,6 +26,8 @@ RowSplit()
> **说明：**
> RowSplit的分割线最小能拖动到刚好包含子组件。
>
> 在真机中查看拖动效果，预览器中不支持拖动。
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ bf5255b7
......@@ -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.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")
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
浏览文件 @ bf5255b7
......@@ -57,4 +57,4 @@ struct KeyEventExample {
}
```
![keyEvent](figures/keyEvent.png)
\ No newline at end of file
![keyEvent](figures/keyEvent.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或