diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0001.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0001.gif new file mode 100644 index 0000000000000000000000000000000000000000..fc737da287358cd81c65567e17da1bd4d701edff Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0001.gif differ diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0002.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0002.gif new file mode 100644 index 0000000000000000000000000000000000000000..9e3ff82c3de3a8867949b0d65aa4ffe55360e7cb Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0002.gif differ diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0004.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0004.gif new file mode 100644 index 0000000000000000000000000000000000000000..3b8462cf93c07e4b92c250bcb46409cc81e5129f Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0004.gif differ diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif new file mode 100644 index 0000000000000000000000000000000000000000..2bb6aa6c2a2086f16ae6149e9d3e4b2340d6fe37 Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0005.gif differ diff --git a/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif new file mode 100644 index 0000000000000000000000000000000000000000..2a6cf73b491304e3f53cb0a333588cad2e42f30b Binary files /dev/null and b/zh-cn/application-dev/reference/apis/figures/zh-cn_image_0006.gif differ diff --git a/zh-cn/application-dev/reference/apis/js-apis-prompt.md b/zh-cn/application-dev/reference/apis/js-apis-prompt.md index aeb56ea6f380e2daf696e872cb01514d167ead8c..0553da25895103c1ada4a4ce65bd56e3cebaf53e 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-prompt.md +++ b/zh-cn/application-dev/reference/apis/js-apis-prompt.md @@ -35,6 +35,8 @@ prompt.showToast({ }); ``` +![zh-cn_image_0001](figures/zh-cn_image_0001.gif) + ## ShowToastOptions 文本提示框的选项。 @@ -92,6 +94,8 @@ prompt.showDialog({ }) ``` +![zh-cn_image_0002](figures/zh-cn_image_0002.gif) + ## prompt.showDialog showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void @@ -132,6 +136,8 @@ prompt.showDialog({ }); ``` +![zh-cn_image_0004](figures/zh-cn_image_0004.gif) + ## ShowDialogOptions 对话框的选项。 @@ -170,7 +176,6 @@ showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenu | options | [ActionMenuOptions](#actionmenuoptions) | 是 | 操作菜单选项。 | | callback | AsyncCallback<[ActionMenuSuccessResponse](#actionmenusuccessresponse)> | 是 | 菜单响应结果回调。 | - **示例：** ```js @@ -195,6 +200,8 @@ prompt.showActionMenu({ }) ``` +![zh-cn_image_0005](figures/zh-cn_image_0005.gif) + ## prompt.showActionMenu showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse> @@ -238,6 +245,8 @@ prompt.showActionMenu({ console.info('showActionMenu error: ' + err); }) ``` +![zh-cn_image_0006](figures/zh-cn_image_0006.gif) + ## ActionMenuOptions 操作菜单的选项。 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md index 9e443a8bcf848efe396b10fcdb535aa88efe45be..11e62d888d0296e315826919c7d0ecb1920c970e 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-piece.md @@ -1,10 +1,10 @@ # piece + 一种块状的入口，可包含图片和文本，常用于展示收件人。例如，邮件收件人或信息收件人。 + > **说明：** > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。 - ## 子组件 @@ -15,11 +15,11 @@ 除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： -| 名称 | 类型 | 默认值 | 必填 | 描述 | -| -------- | ------- | ----- | ---- | ---------------------------------------- | -| content | string | - | 是 | 操作块文本内容。 | -| closable | boolean | false | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。 | -| icon | string | - | 否 | 操作块删除图标的url，支持本地路径。 | +| 名称 | 类型 | 必填 | 描述 | +| -------- | ------- | ---- | ------------------------------------------------------------ | +| content | string | 是 | 操作块文本内容。 | +| closable | boolean | 否 | 设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。
默认值：false | +| icon | string | 否 | 操作块删除图标的url，支持本地路径。 | ## 样式 diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192458.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192458.png deleted file mode 100644 index 5da42e3e14d601745274cb62d914c6600620bb25..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001194192458.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png index 5da42e3e14d601745274cb62d914c6600620bb25..eb03ebe25132eb551b633d052cdfc984eda432ee 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png and b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001238952377.png differ 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 0b92ea63cfb6046805b13c61dc574e7c4f599b36..072bc49476ee62742a065c60dd766618e40dbb4f 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 @@ -27,7 +27,7 @@ Image(src: string | PixelMap | Resource) | 参数名 | 参数类型 | 必填 | 参数描述 | | ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource类型) | 是 | 图片的数据源，支持本地图片和网络图片。
当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持跨包/跨模块调用该Image组件，建议使用`$r`方式来管理需全局使用的图片资源。
\- 支持的图片格式包括png、jpg、bmp、svg和gif。
\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。
\- 支持`dataability://`路径前缀的字符串，用于访问通过data ability提供的图片路径。 | +| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource类型) | 是 | 图片的数据源，支持本地图片和网络图片。
当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持跨包/跨模块调用该Image组件，建议使用`$r`方式来管理需全局使用的图片资源。
\- 支持的图片格式包括png、jpg、bmp、svg和gif。
\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。
\- 支持`dataability://`路径前缀的字符串，用于访问通过data ability提供的图片路径。
\- 支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 | ## 属性 @@ -348,3 +348,53 @@ struct ImageExample3 { ``` ![zh-cn_image_0000001205972610](figures/zh-cn_image_0000001205972610.gif) + +### 渲染沙箱路径图片 + +``` +import fileio from '@ohos.fileio'; +import image from '@ohos.multimedia.image'; + +const EMPTY_PATH = 'file://'; + +@Entry +@Component +struct LoadImageExample { + @State fileContent: string = ''; + @State path: string = EMPTY_PATH; + @State accountInfoHeadPic: any = ''; + + build() { + Column() { + Button('读取沙箱图片') + .margin({ bottom: 10 }) + .onClick(() => { + try { + this.path = EMPTY_PATH; + let context = getContext(this); + let path = context.getApplicationContext().filesDir + '/icon.png'; + console.log(`读取沙箱图片=========>${path}`); + let fd = fileio.openSync(path, 0o100, 0o666); + console.log(`create file========>${fd}`); + let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png'; + fileio.copyFileSync(srcPath, path); + console.log(`error:=============>${e.message}`); + } + }) + Button('读取资源图片') + .margin({ bottom: 10 }) + .onClick(() => { + this.path = EMPTY_PATH; + this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png'); + }) + Text(`图片路径:${this.path}`) + .fontSize(20) + .margin({ bottom: 10 }) + Image(this.path) + .width(100) + .height(100) + } + .width('100%').height('100%') + } +} +``` \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md index d61c7802db72149e6a10d510992ceab2823ce4d3..0aa1c8acede3ba6135fd598ac4dc86f4ed43ba4f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md @@ -56,7 +56,7 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty | 名称 | 功能描述 | | -------- | -------- | -| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Slider滑动时触发事件回调。
value：当前进度值。
mode：拖动状态。 | +| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Slider滑动时触发事件回调。
value：当前进度值。若返回值有小数，可使用Math.toFixed()将数据处理为想要的精度。
mode：拖动状态。 | ## SliderChangeMode枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index b8dcfdf87277a8cfc29324f9ef160055e531be4a..a7d649f25f4546fcc44d145429b7a0f25f2ac07e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -771,7 +771,7 @@ clearRect(x: number, y: number, w: number, h: number): void Canvas(this.context) .width('100%') .height('100%') - .backgroundColor('#ffff00') + .backgroundColor('#ffffff') .onReady(() =>{ this.context.fillStyle = 'rgb(0,0,255)' this.context.fillRect(0,0,500,500) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md index e03a97dc9f4496d46dfcdf4cd28b72ca19292c5d..fe3c7bc635115130ff8f3ee27a58682e2b1a0ffc 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md @@ -47,7 +47,6 @@ show(value: { title: string | Resource, message: string  @Entry @Component struct ActionSheetExample { - build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button('Click to Show ActionSheet') @@ -58,26 +57,26 @@ struct ActionSheetExample { confirm: { value: 'Confirm button', action: () => { - console.log('Get Alert Dialog handled') + console.log('Get Alert Dialog handled'); } }, sheets: [ { title: 'apples', action: () => { - console.error('apples') + console.log('apples'); } }, { title: 'bananas', action: () => { - console.error('bananas') + console.log('bananas'); } }, { title: 'pears', action: () => { - console.error('pears') + console.log('pears'); } } ] diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md index 339f808f170e7f9ec3177acfd89776bef19b4f1f..ffb54ddf303b00aa927bdc538a69dfd4022c9c66 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md @@ -23,7 +23,7 @@ | cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 | | alignment | [DialogAlignment](#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Default | | offset | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。 | -| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 | +| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。
**说明：**
当gridCount小于等于0时，弹窗宽度是固定的；大于0时，按照设置的数值显示宽度，最大值为4，若值为小数，则向下取整。 | ## AlertDialogParamWithButtons对象说明 | 参数名 | 参数类型 | 必填 | 参数描述 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md index aa7d7323d82434ad094ea57c5adc8af414a6e38b..cc257b0dcb26a633ee9116a19c972ac9608a5d34 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md @@ -26,6 +26,22 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, aut | customStyle | boolean | 否 | 弹窗容器样式是否自定义。
默认值：false | | gridCount8+ | number | 否 | 弹窗宽度占栅格宽度的个数。 | +## DialogAlignment枚举说明 + +| 名称 | 描述 | +| ------------------------ | ------------------------------------------------------ | +| Top | 垂直顶部对齐。 | +| Center | 垂直居中对齐。 | +| Bottom | 垂直底部对齐。 | +| Default | 默认对齐。
**说明：**
与枚举值Center效果相同。 | +| TopStart8+ | 左上对齐。 | +| TopEnd8+ | 右上对齐。 | +| CenterStart8+ | 左中对齐。 | +| CenterEnd8+ | 右中对齐。 | +| BottomStart8+ | 左下对齐。 | +| BottomEnd8+ | 右下对齐。 | + + ## CustomDialogController ### 导入对象 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md index fe160b0760ee2ce71c67a0c8ad3f7df3344a83d4..494aabc0122e49cb4a09f9b8e67b0143db07013e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md @@ -12,13 +12,13 @@ show(options?: TimePickerDialogOptions) 定义时间滑动选择器弹窗并弹出。 - options参数 - | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | - | -------- | -------- | -------- | -------- | -------- | - | selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 | - | useMilitaryTime | boolean | 否 | false | 展示时间是否为24小时制。 | - | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 点击弹窗中确定按钮时触发。 | - | onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 | - | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 | + | 参数名 | 参数类型 | 必填 | 参数描述 | + | -------- | -------- | -------- | -------- | + | selected | Date | 否 | 设置选中项的时间。
默认值：当前系统时间 | + | useMilitaryTime | boolean | 否 | 展示时间是否为24小时制。
默认值：false | + | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中确定按钮时触发。 | + | onCancel | () => void | 否 | 点击弹窗中取消按钮时触发。 | + | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动选择器，当前选择项改变时触发。 | ## 示例 @@ -28,22 +28,24 @@ show(options?: TimePickerDialogOptions) @Entry @Component struct TimePickerDialogExample01 { - @State isUseMilitaryTime: boolean = true + @State isUseMilitaryTime: boolean = true; + private selectTime: Date = new Date('7/22/2022 12:45:00'); build() { Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Button("TimePickerDialog").onClick(() => { TimePickerDialog.show({ + selected:this.selectTime, useMilitaryTime: this.isUseMilitaryTime, onAccept: (value: TimePickerResult) => { - console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) + console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); }, onCancel: () => { - console.info("TimePickerDialog:onCancel()") + console.info("TimePickerDialog:onCancel()"); }, onChange: (value: TimePickerResult) => { - console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) + console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); } }) }) @@ -60,7 +62,7 @@ struct TimePickerDialogExample01 { @Entry @Component struct TimePickerDialogExample02 { - @State isUseMilitaryTime: boolean = false + @State isUseMilitaryTime: boolean = false; build() { Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, @@ -72,10 +74,10 @@ struct TimePickerDialogExample02 { console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) }, onCancel: () => { - console.info("TimePickerDialog:onCancel()") + console.info("TimePickerDialog:onCancel()"); }, onChange: (value: TimePickerResult) => { - console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) + console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); } }) }) diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642023.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642023.gif new file mode 100644 index 0000000000000000000000000000000000000000..c584f3fddad26c473453a573a12f6aa869d2cdbc Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001118642023.gif differ diff --git a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md index 2ec686adbe79f83c44d548b31d928c51d7f841f9..86db59447ccb15bad9579553a1eef2e03e143d23 100644 --- a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md +++ b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md @@ -56,10 +56,10 @@ struct ParentComp { Column() { Text(this.isCountDown ? 'Count Down' : 'Stopwatch') if (this.isCountDown) { - Image('countdown.png') + Image($r("app.media.countdown")).width(200).height(200) TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red}) } else { - Image('stopwatch.png') + Image($r("app.media.stopwatch")).width(200).height(200) TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black }) } Button(this.isCountDown ? 'Switch to Stopwatch' : 'Switch to Count Down') @@ -93,3 +93,5 @@ struct TimerComponent { } } ``` + +![](figures/zh-cn_image_0000001118642023.gif) \ No newline at end of file