diff --git a/zh-cn/application-dev/quick-start/arkts-page-custom-components-lifecycle.md b/zh-cn/application-dev/quick-start/arkts-page-custom-components-lifecycle.md index c222dd5c435946369eba7572bdda0ae5d3eb241c..b242aabf3920af26e051ade1b1a01e70afed1cfb 100644 --- a/zh-cn/application-dev/quick-start/arkts-page-custom-components-lifecycle.md +++ b/zh-cn/application-dev/quick-start/arkts-page-custom-components-lifecycle.md @@ -134,7 +134,7 @@ struct MyComponent { Child() } // this.showChild为false，删除Child子组件，执行Child aboutToDisappear - Button('create or delete Child').onClick(() => { + Button('delete Child').onClick(() => { this.showChild = false; }) // push到Page2页面，执行onPageHide @@ -168,7 +168,7 @@ struct Child { ``` -以上示例中，Index页面包含两个自定义组件，一个是被\@Entry装饰的MyComponent，也是页面的入口组件，即页面的根节点；一个是Child，是MyComponent的子组件。只有\@Entry装饰的节点才可以生效页面的生命周期方法，所以MyComponent中声明了当前Index页面的页面生命周期函数。MyComponent和其子组件Child也同时也声明了组件的生命周期函数。 +以上示例中，Index页面包含两个自定义组件，一个是被\@Entry装饰的MyComponent，也是页面的入口组件，即页面的根节点；一个是Child，是MyComponent的子组件。只有\@Entry装饰的节点才可以生效页面的生命周期方法，所以MyComponent中声明了当前Index页面的页面生命周期函数。MyComponent和其子组件Child也同时声明了组件的生命周期函数。 - 应用冷启动的初始化流程为：MyComponent aboutToAppear --> MyComponent build --> Child aboutToAppear --> Child build --> Child build执行完毕 --> MyComponent build执行完毕 --> Index onPageShow。 diff --git a/zh-cn/application-dev/reference/apis/js-apis-router.md b/zh-cn/application-dev/reference/apis/js-apis-router.md index 150fa39e4f34552e64dc061f5b72da44a8b70d7c..28d5e219b9ee294e46849aa3d42bc5bf365a1539 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-router.md +++ b/zh-cn/application-dev/reference/apis/js-apis-router.md @@ -394,7 +394,7 @@ back(options?: RouterOptions ): void | 参数名 | 类型 | 必填 | 说明 | | ------- | ------------------------------- | ---- | ------------------------------------------------------------ | -| options | [RouterOptions](#routeroptions) | 否 | 返回页面描述信息，其中参数url指路由跳转时会返回到指定url的界面，如果页面栈上没有url页面，则不响应该情况。如果url未设置，则返回上一页，页面栈里面的page不会回收，出栈后会被回收。 | +| options | [RouterOptions](#routeroptions) | 否 | 返回页面描述信息，其中参数url指路由跳转时会返回到指定url的界面，如果页面栈上没有url页面，则不响应该情况。如果url未设置，则返回上一页，页面不会重新构建，页面栈里面的page不会回收，出栈后会被回收。 | **示例：** diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md index 75c4249b57fe899efe5110456a38cf8948f5dff1..4932696e40bd61e59713be726d9ebbdd246edff5 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md @@ -130,7 +130,7 @@ text { ```js // xxx.js -import prompt from '@system.prompt'; +import prompt from '@ohos.promptAction'; export default { data: { diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/LoadingProgress.gif b/zh-cn/application-dev/reference/arkui-ts/figures/LoadingProgress.gif new file mode 100644 index 0000000000000000000000000000000000000000..90d9c7bba27ef616fb6bfdea407358df25ac6f91 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/LoadingProgress.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/drag-drop.gif b/zh-cn/application-dev/reference/arkui-ts/figures/drag-drop.gif new file mode 100644 index 0000000000000000000000000000000000000000..05b0d0a29dfff526df15e64914f77d598124581c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/drag-drop.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/ifButton.gif b/zh-cn/application-dev/reference/arkui-ts/figures/ifButton.gif new file mode 100644 index 0000000000000000000000000000000000000000..d92e24eadd8b744c17ee098ae876c2e9ef605325 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/ifButton.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/loadProgress.jpeg b/zh-cn/application-dev/reference/arkui-ts/figures/loadProgress.jpeg deleted file mode 100644 index 141bc03c7528681e90fc3ed91b4c05611355e092..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/loadProgress.jpeg and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif index cc49b51652e53b6caa3888b054dbea94c2f498eb..35b1bf68c0e0c323eb4c5171be6fbf368c6eb576 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001174264378.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md index bf87d9dff67cfe31128d5fe93e8d6f30ec31cdc4..049583e7d9b6f7a2f1a46f05c5b28c1073e3dc2c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md @@ -69,6 +69,8 @@ 支持[通用事件](ts-universal-events-click.md)。 ## 示例 +### 示例1 + ```ts // xxx.ets @Entry @@ -125,4 +127,34 @@ struct ButtonExample { } ``` -![button](figures/button.gif) \ No newline at end of file +![button](figures/button.gif) + +### 示例2 + +```ts +// xxx.ets +@Entry +@Component +struct SwipeGestureExample { + @State count: number = 0 + + build() { + Column() { + Text(`${this.count}`) + .fontSize(30) + .onClick(() => { + this.count++ + }) + if (this.count <= 0) { + Button('count is negative').fontSize(30).height(50) + } else if (this.count % 2 === 0) { + Button('count is even').fontSize(30).height(50) + } else { + Button('count is odd').fontSize(30).height(50) + } + }.height('100%').width('100%').justifyContent(FlexAlign.Center) + } +} +``` + +![ifButton](figures/ifButton.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md index 8b5276cc0d40cfd320d0e3bdc227737768ec3732..b0edfeca7a67fe9bf2e7091d24b3ea9ca87dc988 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md @@ -368,7 +368,7 @@ import context from '@ohos.app.ability.common'; struct LoadImageExample { @State resourcesPath: string = '' @State sandboxPath: string = '' - context: context.UIAbility = getContext(this) as context.UIAbilityContext + context: context.UIAbilityContext = getContext(this) as context.UIAbilityContext build() { Column() { @@ -395,6 +395,12 @@ struct LoadImageExample { Image(this.resourcesPath) .width(100) .height(100) + .colorFilter([ + 0.30, 0.59, 0.11, 0, 0, + 0.30, 0.59, 0.11, 0, 0, + 0.30, 0.59, 0.11, 0, 0, + 0, 0, 0, 1.0, 0 + ]) Text(`沙箱图片路径:${this.sandboxPath}`) .fontSize(20) .margin({ bottom: 10 }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md index b75519c1419a2d30ec0b4c2ae34112f2ab73b502..0a76407d200709c72058d0c1a788bdc5ed7efdb4 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md @@ -43,4 +43,4 @@ struct LoadingProgressExample { } ``` -![loadProgress](figures/loadProgress.jpeg) +![LoadingProgress](figures/LoadingProgress.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md index dce7db3c476cb2d5e782f7b2cae262fd44b6731e..82867186fe5ed2bba117a04294ef8cd4903a77e6 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md @@ -31,7 +31,7 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te | 名称 | 参数类型 | 描述 | | ------------------------ | ---------------------------------------- | ---------------------------------------- | -| type | InputType | 设置输入框类型。
默认值：InputType.Normal | +| type | [InputType](#inputtype枚举说明) | 设置输入框类型。
默认值：InputType.Normal | | placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | 设置placeholder文本颜色。| | placeholderFont | [Font](ts-types.md#font) | 设置placeholder文本样式。 | | enterKeyType | EnterKeyType | 设置输入法回车键类型，目前仅支持默认类型显示。
默认值：EnterKeyType.Done | @@ -129,6 +129,9 @@ struct TextInputExample { .margin(20) .fontSize(14) .fontColor(Color.Black) + .inputFilter('[a-z]', (e) => { + console.log(JSON.stringify(e)) + }) .onChange((value: string) => { this.text = value }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md index dc08d169e5b2b5b90c7374196d21b90aeaf2b9da..f4116439e1a960bf9a6ab61edbb8441287118e39 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md @@ -42,23 +42,23 @@ Grid(scroller?: Scroller) 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 名称 | 参数类型 | 描述 | -| ----------------------------- | ---------------------------------------- | ---------------------------------------- | -| columnsTemplate | string | 设置当前网格布局列的数量，不设置时默认1列。
例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。
**说明：**
设置为'0fr'时，该列的列宽为0，不显示GridItem。设置为其他非法值时，GridItem显示为固定1列。 | -| rowsTemplate | string | 设置当前网格布局行的数量，不设置时默认1行。
例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。
**说明：**
设置为'0fr'，则这一行的行宽为0，这一行GridItem不显示。设置为其他非法值，按固定1行处理。 | -| columnsGap | [Length](ts-types.md#length) | 设置列与列的间距。
默认值：0
**说明：**
设置为小于0的值时，按默认值显示。 | -| rowsGap | [Length](ts-types.md#length) | 设置行与行的间距。
默认值：0
**说明：**
设置为小于0的值时，按默认值显示。 | -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off
**说明：**
API version 9及以下版本默认值为BarState.Off，API version 10的默认值为BarState.Auto。 | -| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 | -| scrollBarWidth | string \| number | 设置滚动条的宽度。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。
默认值：4
单位：vp | -| cachedCount | number | 设置预加载的GridItem的数量，只在[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)中生效。具体使用可参考[减少应用白块说明](../../ui/arkts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值：1
**说明：**
设置缓存后会在Grid显示区域上下各缓存cachedCount*列数个GridItem。
[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)超出显示和缓存范围的GridItem会被释放。
设置为小于0的值时，按默认值显示。 | -| editMode 8+ | boolean | 设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部[GridItem](ts-container-griditem.md)。
默认值：flase | -| layoutDirection8+ | [GridDirection](#griddirection8枚举说明) | 设置布局的主轴方向。
默认值：GridDirection.Row | -| maxCount8+ | number | 当layoutDirection是Row/RowReverse时，表示可显示的最大列数
当layoutDirection是Column/ColumnReverse时，表示可显示的最大行数。
默认值：Infinity
**说明：**
当maxCount小于minCount时，maxCount和minCount都按默认值处理。
设置为小于0的值时，按默认值显示。 | -| minCount8+ | number | 当layoutDirection是Row/RowReverse时，表示可显示的最小列数。
当layoutDirection是Column/ColumnReverse时，表示可显示的最小行数。
默认值：1
**说明：**
设置为小于0的值时，按默认值显示。 | -| cellLength8+ | number | 当layoutDirection是Row/RowReverse时，表示一行的高度。
当layoutDirection是Column/ColumnReverse时，表示一列的宽度。
默认值：第一个元素的大小 | -| multiSelectable8+ | boolean | 是否开启鼠标框选。
默认值：false
- false：关闭框选。
- true：开启框选。 | -| supportAnimation8+ | boolean | 是否支持动画。当前支持GridItem拖拽动画。
默认值：false | +| 名称 | 参数类型 | 描述 | +| ----------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| columnsTemplate | string | 设置当前网格布局列的数量，不设置时默认1列。
例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。
**说明：**
设置为'0fr'时，该列的列宽为0，不显示GridItem。设置为其他非法值时，GridItem显示为固定1列。 | +| rowsTemplate | string | 设置当前网格布局行的数量，不设置时默认1行。
例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。
**说明：**
设置为'0fr'，则这一行的行宽为0，这一行GridItem不显示。设置为其他非法值，按固定1行处理。 | +| columnsGap | [Length](ts-types.md#length) | 设置列与列的间距。
默认值：0
**说明：**
设置为小于0的值时，按默认值显示。 | +| rowsGap | [Length](ts-types.md#length) | 设置行与行的间距。
默认值：0
**说明：**
设置为小于0的值时，按默认值显示。 | +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off | +| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 | +| scrollBarWidth | string \| number | 设置滚动条的宽度。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。
默认值：4
单位：vp | +| cachedCount | number | 设置预加载的GridItem的数量，只在[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)中生效。具体使用可参考[减少应用白块说明](../../ui/arkts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值：1
**说明：**
设置缓存后会在Grid显示区域上下各缓存cachedCount*列数个GridItem。
[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)超出显示和缓存范围的GridItem会被释放。
设置为小于0的值时，按默认值显示。 | +| editMode 8+ | boolean | 设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部[GridItem](ts-container-griditem.md)。
默认值：flase | +| layoutDirection8+ | [GridDirection](#griddirection8枚举说明) | 设置布局的主轴方向。
默认值：GridDirection.Row | +| maxCount8+ | number | 当layoutDirection是Row/RowReverse时，表示可显示的最大列数
当layoutDirection是Column/ColumnReverse时，表示可显示的最大行数。
默认值：Infinity
**说明：**
当maxCount小于minCount时，maxCount和minCount都按默认值处理。
设置为小于0的值时，按默认值显示。 | +| minCount8+ | number | 当layoutDirection是Row/RowReverse时，表示可显示的最小列数。
当layoutDirection是Column/ColumnReverse时，表示可显示的最小行数。
默认值：1
**说明：**
设置为小于0的值时，按默认值显示。 | +| cellLength8+ | number | 当layoutDirection是Row/RowReverse时，表示一行的高度。
当layoutDirection是Column/ColumnReverse时，表示一列的宽度。
默认值：第一个元素的大小 | +| multiSelectable8+ | boolean | 是否开启鼠标框选。
默认值：false
- false：关闭框选。
- true：开启框选。 | +| supportAnimation8+ | boolean | 是否支持动画。当前支持GridItem拖拽动画。
默认值：false | Grid组件根据rowsTemplate、columnsTemplate属性的设置情况，可分为以下三种布局模式： @@ -107,7 +107,7 @@ Grid组件根据rowsTemplate、columnsTemplate属性的设置情况，可分为 > **说明：** > -> List组件[通用属性clip](ts-universal-attributes-sharp-clipping.md)的默认值为true。 +> Grid组件[通用属性clip](ts-universal-attributes-sharp-clipping.md)的默认值为true。 ## 事件 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md index 568852b80cb198c91c7623b2d221ab4c80862b10..e2f2e5db1ffaee808b6923e8e1a2e4f911718653 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md @@ -50,19 +50,19 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 名称 | 参数类型 | 描述 | -| ------------------------------- | ---------------------------------------- | ---------------------------------------- | -| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。
默认值：Axis.Vertical
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| 名称 | 参数类型 | 描述 | +| ------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | +| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向。
默认值：Axis.Vertical
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | divider | {
strokeWidth: [Length](ts-types.md#length),
color?:[ResourceColor](ts-types.md#resourcecolor),
startMargin?: Length,
endMargin?: Length
} \| null | 设置ListItem分割线样式，不支持设置百分比，默认无分割线。
- strokeWidth: 分割线的线宽。
- color: 分割线的颜色。
- startMargin: 分割线与列表侧边起始端的距离。
- endMargin: 分割线与列表侧边结束端的距离。
从API version 9开始，该接口支持在ArkTS卡片中使用。
endMargin +startMargin 不能超过列宽度。
startMargin和endMargin不支持设置百分比。
List的分割线画在主轴方向两个子组件之间，第一个子组件上方和最后一个子组件下方不会绘制分割线。
多列模式下，ListItem与ListItem之间的分割线起始边距从每一列的交叉轴方向起始边开始计算，其他情况从List交叉轴方向起始边开始计算。 | -| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
API version 9及以下版本默认值为BarState.Off，API version 10的默认值为BarState.Auto。 | -| cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量，只在[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)中生效，其中ListItemGroup将作为一个整体进行计算，ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/arkts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值：1
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
单列模式下，会在List显示的ListItem前后各缓存cachedCount个ListItem。
多列模式下， 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。 | -| editMode(deprecated) | boolean | 声明当前List组件是否处于可编辑模式。
从API version9开始废弃。
默认值：false | -| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果，支持弹簧效果和阴影效果。
默认值：EdgeEffect.Spring
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| chainAnimation | boolean | 设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：List内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
默认值：false
- false：不启用链式联动。
- true：启用链式联动。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| multiSelectable8+ | boolean | 是否开启鼠标框选。
默认值：false
- false：关闭框选。
- true：开启框选。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | -| lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain) | 以列模式为例（listDirection为Axis.Vertical）:
lanes用于决定List组件在交叉轴方向按几列布局。
默认值：1
规则如下：
- lanes为指定的数量时，根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。
- lanes设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的交叉轴尺寸符合最小限制。
- lanes设置了{minLength，maxLength}，如果父组件交叉轴方向尺寸约束为无穷大时，固定按一列排列，列宽度按显示区域内最大的ListItem计算
- ListItemGroup在多列模式下也是独占一行，ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。
- lanes设置了{minLength，maxLength}时，计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。
该接口支持在ArkTS卡片中使用。 | -| alignListItem9+ | [ListItemAlign](#listitemalign9枚举说明) | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。
默认值：ListItemAlign.Start
该接口支持在ArkTS卡片中使用。 | -| sticky9+ | [StickyStyle](#stickystyle9枚举说明) | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。
默认值：StickyStyle.None
该接口支持在ArkTS卡片中使用。
**说明：**
sticky属性可以设置为 StickyStyle.Header \| StickyStyle.Footer 以同时支持header吸顶和footer吸底。 | +| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。
默认值：BarState.Off
从API version 9开始，该接口支持在ArkTS卡片中使用。。 | +| cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量，只在[LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)中生效，其中ListItemGroup将作为一个整体进行计算，ListItemGroup中的所有ListItem会一次性全部加载出来。具体使用可参考[减少应用白块说明](../../ui/arkts-performance-improvement-recommendation.md#减少应用滑动白块)。
默认值：1
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
单列模式下，会在List显示的ListItem前后各缓存cachedCount个ListItem。
多列模式下， 会在List显示的ListItem前后各缓存cachedCount*列数个ListItem。 | +| editMode(deprecated) | boolean | 声明当前List组件是否处于可编辑模式。
从API version9开始废弃。
默认值：false | +| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置组件的滑动效果，支持弹簧效果和阴影效果。
默认值：EdgeEffect.Spring
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| chainAnimation | boolean | 设置当前List是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：List内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
默认值：false
- false：不启用链式联动。
- true：启用链式联动。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| multiSelectable8+ | boolean | 是否开启鼠标框选。
默认值：false
- false：关闭框选。
- true：开启框选。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| lanes9+ | number \| [LengthConstrain](ts-types.md#lengthconstrain) | 以列模式为例（listDirection为Axis.Vertical）:
lanes用于决定List组件在交叉轴方向按几列布局。
默认值：1
规则如下：
- lanes为指定的数量时，根据指定的数量与List组件的交叉轴尺寸除以列数作为列的宽度。
- lanes设置了{minLength，maxLength}时，根据List组件的宽度自适应决定lanes数量（即列数），保证缩放过程中lane的宽度符合{minLength，maxLength}的限制。其中，minLength条件会被优先满足，即优先保证符合ListItem的交叉轴尺寸符合最小限制。
- lanes设置了{minLength，maxLength}，如果父组件交叉轴方向尺寸约束为无穷大时，固定按一列排列，列宽度按显示区域内最大的ListItem计算
- ListItemGroup在多列模式下也是独占一行，ListItemGroup中的ListItem按照List组件的lanes属性设置值来布局。
- lanes设置了{minLength，maxLength}时，计算列数会按照ListItemGroup的交叉轴尺寸计算。当ListItemGroup交叉轴尺寸与List交叉轴尺寸不一致时ListItemGroup中的列数与List中的列数可能不一样。
该接口支持在ArkTS卡片中使用。 | +| alignListItem9+ | [ListItemAlign](#listitemalign9枚举说明) | List交叉轴方向宽度大于ListItem交叉轴宽度 * lanes时，ListItem在List交叉轴方向的布局方式，默认为首部对齐。
默认值：ListItemAlign.Start
该接口支持在ArkTS卡片中使用。 | +| sticky9+ | [StickyStyle](#stickystyle9枚举说明) | 配合[ListItemGroup](ts-container-listitemgroup.md)组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。
默认值：StickyStyle.None
该接口支持在ArkTS卡片中使用。
**说明：**
sticky属性可以设置为 StickyStyle.Header \| StickyStyle.Footer 以同时支持header吸顶和footer吸底。 | ## ListItemAlign9+枚举说明 @@ -93,7 +93,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? | 名称 | 功能描述 | | ---------------------------------------- | ---------------------------------------- | | onItemDelete(deprecated)(event: (index: number) => boolean) | 当List组件在编辑模式时，点击ListItem右边出现的删除按钮时触发。
从API version9开始废弃。
- index: 被删除的列表项的索引值。 | -| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。
- scrollOffset: 滑动偏移量。
- [scrollState](#scrollstate枚举说明): 当前滑动状态。
使用控制器调用ScrollEdge和ScrollToIndex时不会触发，其余情况有滚动就会触发该事件。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。
- scrollOffset: 每帧滚动的偏移量，List的内容向上滚动时偏移量为正，向下滚动时偏移量为负。
- [scrollState](#scrollstate枚举说明): 当前滑动状态。
使用控制器调用ScrollEdge和ScrollToIndex时不会触发，其余情况有滚动就会触发该事件。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | onScrollIndex(event: (start: number, end: number) => void) | 有子组件划入或划出List显示区域时触发。
计算索引值时，ListItemGroup作为一个整体占一个索引值，不计算ListItemGroup内部ListItem的索引值。
- start: 滑动起始位置索引值。
- end: 滑动结束位置索引值。
触发该事件的条件：列表初始化时会触发一次，List显示区域内第一个子组件的索引值或后一个子组件的索引值有变化时会触发。
List的边缘效果为弹簧效果时，在List划动到边缘继续划动和松手回弹过程不会触发onScrollIndex事件。
从API version 9开始，该接口支持在ArkTS卡片中使用。 | | onReachStart(event: () => void) | 列表到达起始位置时触发。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
List初始化时如果initialIndex为0会触发一次，List滚动到起始位置时触发一次。List边缘效果为弹簧效果时，划动经过起始位置时触发一次，回弹回起始位置时再触发一次。 | | onReachEnd(event: () => void) | 列表到底末尾位置时触发。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
List边缘效果为弹簧效果时，划动经过末尾位置时触发一次，回弹回末尾位置时再触发一次。 | @@ -142,43 +142,31 @@ List(value?:{space?: number | string, initialIndex?: number, scroller? @Component struct ListExample { private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] - @State editFlag: boolean = false build() { - Stack({ alignContent: Alignment.TopStart }) { - Column() { - List({ space: 20, initialIndex: 0 }) { - ForEach(this.arr, (item) => { - ListItem() { - Text('' + item) - .width('100%').height(100).fontSize(16) - .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) - }.editable(true) - }, item => item) - } - .listDirection(Axis.Vertical) // 排列方向 - .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 - .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果 - .chainAnimation(false) // 联动特效关闭 - .onScrollIndex((firstIndex: number, lastIndex: number) => { - console.info('first' + firstIndex) - console.info('last' + lastIndex) - }) - .editMode(this.editFlag) - .onItemDelete((index: number) => { - console.info(this.arr[index] + 'Delete') - this.arr.splice(index, 1) - console.info(JSON.stringify(this.arr)) - this.editFlag = false - return true - }).width('90%') - }.width('100%') - - Button('edit list') - .onClick(() => { - this.editFlag = !this.editFlag - }).margin({ top: 5, left: 20 }) - }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + Column() { + List({ space: 20, initialIndex: 0 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width('100%').height(100).fontSize(16) + .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) + } + }, item => item) + } + .listDirection(Axis.Vertical) // 排列方向 + .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 + .onScrollIndex((firstIndex: number, lastIndex: number) => { + console.info('first' + firstIndex) + console.info('last' + lastIndex) + }) + .width('90%') + } + .width('100%') + .height('100%') + .backgroundColor(0xDCDCDC) + .padding({ top: 5 }) } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md index 7af86cd20c7fc4b40dbce0c12f8203a1a281c99d..79cd3b2f3c0cd3454abf3d1803c7697e0525ce3f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -25,7 +25,7 @@ ListItem(value?: string) | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | | sticky(deprecated) | [Sticky](#stickydeprecated枚举说明) | 设置ListItem吸顶效果。
默认值：Sticky.None
从API version9开始废弃，推荐使用[List组件sticky属性](ts-container-list.md#属性)。 | -| editable | boolean \| [EditMode](#editmode枚举说明) | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动列表项。
默认值：false | +| editable(deprecated) | boolean \| [EditMode](#editmode枚举说明) | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动列表项。
从API version9开始废弃。
默认值：false | | selectable8+ | boolean | 当前ListItem元素是否可以被鼠标框选。
**说明：**
外层List容器的鼠标框选开启时，ListItem的框选才生效。
默认值：true | | swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9枚举说明),
} | 用于设置ListItem的划出组件。
- start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。
- end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。
- edgeEffect: 滑动效果。
**说明：**
start和end对应的@builder函数中顶层必须是单个组件，不能是if/else、ForEach、LazyForEach语句。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md index 32a5a53450ab0abf25e142282b8dbfab12f8dba3..6de91287fa67f28087b7ae1311093bc6c6b33aea 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md @@ -83,14 +83,13 @@ SideBarContainer( type?: SideBarContainerType ) @Entry @Component struct SideBarContainerExample { - normalIcon : Resource = $r("app.media.icon") + normalIcon: Resource = $r("app.media.icon") selectedIcon: Resource = $r("app.media.icon") @State arr: number[] = [1, 2, 3] @State current: number = 1 build() { - SideBarContainer(SideBarContainerType.Embed) - { + SideBarContainer(SideBarContainerType.Embed) { Column() { ForEach(this.arr, (item, index) => { Column({ space: 5 }) { @@ -115,6 +114,13 @@ struct SideBarContainerExample { } .margin({ top: 50, left: 20, right: 30 }) } + .controlButton({ + icons: { + hidden: $r('app.media.drawer'), + shown: $r('app.media.drawer'), + switching: $r('app.media.drawer') + } + }) .sideBarWidth(150) .minSideBarWidth(50) .maxSideBarWidth(300) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md index 31f8d37089883ab9b7be85b24fb955f8e005cd00..271317c99aa2969dde13af52888df634b9d796b0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md @@ -28,9 +28,9 @@ Stack(value?: { alignContent?: Alignment }) 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： -| 名称 | 参数类型 | 描述 | -| ------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -| alignContent | [Alignment](ts-appendix-enums.md#alignment) | 设置子组件在容器内的对齐方式。
默认值：Alignment.Center
从API version 9开始，该接口支持在ArkTS卡片中使用。 | +| 名称 | 参数类型 | 描述 | +| ------------ | ------------------------------------------- | ------------------------------------------------------------ | +| alignContent | [Alignment](ts-appendix-enums.md#alignment) | 设置子组件在容器内的对齐方式。
默认值：Alignment.Center
从API version 9开始，该接口支持在ArkTS卡片中使用。
**说明：**
该属性与[通用属性align](ts-universal-attributes-location.md)同时设置时，只有align属性生效。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md index 9bff673088371a23bb7b44d0db0280547ec1df7f..d15ef16766720fa8dd7a25f2590a009e61b91433 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md @@ -45,6 +45,113 @@ ## 示例 +### 示例1 + +```ts +@Observed +class ClassA { + public name: string + public bol: boolean + + constructor(name: string, bol: boolean) { + this.name = name + this.bol = bol + } +} + +@Extend(Text) function textStyle() { + .width('25%') + .height(35) + .fontSize(16) + .textAlign(TextAlign.Center) + .backgroundColor(0xAFEEEE) +} + +@Entry +@Component +struct DragExample { + @State arr: ClassA[] = [new ClassA('A', true), new ClassA('B', true), new ClassA('C', true)] + @State dragIndex: number = 0 + + changeIndex(index1: number, index2: number) { // 交换数组位置 + [this.arr[index1], this.arr[index2]] = [this.arr[index2], this.arr[index1]]; + } + + build() { + Column() { + Row({ space: 15 }) { + List({ space: 20 }) { + ForEach(this.arr, (item, index) => { + ListItem() { + Column() { + Child({ a: this.arr[index] }) + } + .onTouch((event: TouchEvent) => { + if (event.type === TouchType.Down) { + this.dragIndex = index // 获取当前拖拽子组件的索引 + console.info('onTouch' + this.dragIndex) + } + }) + } + }) + } + .listDirection(Axis.Horizontal) + .onDrop((event: DragEvent, extraParams: string) => { // 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。 + let jsonString = JSON.parse(extraParams); + this.changeIndex(this.dragIndex, jsonString.insertIndex) + }) + }.padding({ top: 10, bottom: 10 }).margin(10) + + }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) + } +} + +@Component +struct Child { + @ObjectLink a: ClassA + + @Builder pixelMapBuilder() { + Column() { + Text(this.a.name) + .width('50%') + .height(60) + .fontSize(16) + .borderRadius(10) + .textAlign(TextAlign.Center) + .backgroundColor(Color.Yellow) + } + } + + build() { + Column() { + Text(this.a.name) + .textStyle() + .visibility(this.a.bol ? Visibility.Visible : Visibility.None) + .onDragStart(() => { // 第一次拖拽此事件绑定的组件时，触发回调。 + this.a.bol = false // 控制显隐 + return this.pixelMapBuilder() // 设置拖拽过程中显示的图片。 + }) + .onTouch((event: TouchEvent) => { + if (event.type === TouchType.Up) { + this.a.bol = true + } + }) + Text('') + .width('25%') + .height(35) + .fontSize(16) + .textAlign(TextAlign.Center) + .border({ width: 5, color: 'red' }) + .visibility(!this.a.bol ? Visibility.Visible : Visibility.None) + } + } +} +``` + +![drag-drop](figures/drag-drop.gif) + +### 示例2 + ```ts // xxx.ets @Extend(Text) function textStyle () {