未验证 提交 b7d20018 编写于 作者: O openharmony_ci 提交者: Gitee

!9314 翻译完成 8982/8581/8323/8524/8497

Merge pull request !9314 from ester.zhou/C2-0909
...@@ -4,167 +4,42 @@ ...@@ -4,167 +4,42 @@
You can set your application to call the **ReminderRequest** class to create scheduled reminders for countdown timers, calendar events, and alarm clocks. When the created reminders are published, the timing and pop-up notification functions of your application will be taken over by the reminder agent in the background, even when your application is frozen or exits. You can set your application to call the **ReminderRequest** class to create scheduled reminders for countdown timers, calendar events, and alarm clocks. When the created reminders are published, the timing and pop-up notification functions of your application will be taken over by the reminder agent in the background, even when your application is frozen or exits.
## Available APIs
**reminderAgent** encapsulates the methods for publishing and canceling reminders.
**Table 1** Major APIs in reminderAgent
| API | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| function publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback\<number>): void;<br>function publishReminder(reminderReq: ReminderRequest): Promise\<number>; | Publishes a scheduled reminder.<br>The maximum number of valid notifications (excluding expired ones that will not pop up again) is 30 for one application and 2000 for the entire system. |
| function cancelReminder(reminderId: number, callback: AsyncCallback\<void>): void;<br/>function cancelReminder(reminderId: number): Promise\<void>; | Cancels a specified reminder. (The value of **reminderId** is obtained from the return value of **publishReminder**.) |
| function getValidReminders(callback: AsyncCallback<Array\<ReminderRequest>>): void;<br/>function getValidReminders(): Promise<Array\<ReminderRequest>>; | Obtains all valid reminders set by the current application. |
| function cancelAllReminders(callback: AsyncCallback\<void>): void;<br/>function cancelAllReminders(): Promise\<void>; | Cancels all reminders set by the current application. |
| function addNotificationSlot(slot: NotificationSlot, callback: AsyncCallback\<void>): void;<br/>function addNotificationSlot(slot: NotificationSlot): Promise<void>; | Registers a NotificationSlot instance to be used by the reminder. |
| function removeNotificationSlot(slotType: notification.SlotType, callback: AsyncCallback\<void>): void;function removeNotificationSlot(slotType: notification.SlotType): Promise\<void>; | Removes a NotificationSlot instance of a specified type. |
**ActionButtonType** enumerates types of buttons displayed in a reminder notification.
**Table 2** ActionButtonType enumeration
| Name | Description |
| ------------------------ | ------------------------------------------------------------ |
| ACTION_BUTTON_TYPE_CLOSE | Close button, which can be tapped to stop the reminder alert tone, close the reminder notification, and cancel the reminder snoozing. |
**ReminderType** enumerates the reminder types.
**Table 3** ReminderType enumeration
| Name | Description |
| ---------------------- | ------------------- |
| REMINDER_TYPE_TIMER | Countdown reminder. |
| REMINDER_TYPE_CALENDAR | Calendar reminder. |
| REMINDER_TYPE_ALARM | Alarm reminder. |
**ActionButton** defines a button displayed in the reminder notification.
**Table 4** ActionButton instance
| Name | Type | Mandatory | Description |
| ----- | ---------------- | --------- | ------------------- |
| title | string | Yes | Text on the button. |
| type | ActionButtonType | Yes | Button type. |
**WantAgent** sets the package and ability that are redirected to when the reminder notification is clicked.
**Table 5** WantAgent instance
| Name | Type | Mandatory | Description |
| ----------- | ------ | --------- | ------------------------------------------------------------ |
| pkgName | string | Yes | Name of the package redirected to when the reminder notification is clicked. |
| abilityName | string | Yes | Name of the ability redirected to when the reminder notification is clicked. |
**MaxScreenWantAgent** sets the name of the target package and ability to start automatically when the reminder arrives and the device is not in use. If the device is in use, a notification will be displayed.
**Table 6** MaxScreenWantAgent instance
| Name | Type | Mandatory | Description |
| ----------- | ------ | --------- | ------------------------------------------------------------ |
| pkgName | string | Yes | Name of the package that is automatically started when the reminder arrives and the device is not in use. |
| abilityName | string | Yes | Name of the ability that is automatically started when the reminder arrives and the device is not in use. |
**ReminderRequest** defines the reminder to publish.
**Table 7** ReminderRequest instance
| Name | Type | Mandatory | Description |
| ------------------ | ------------------------------ | --------- | ------------------------------------------------------------ |
| reminderType | ReminderType | Yes | Type of the reminder. |
| actionButton | [ActionButton?, ActionButton?] | No | Action button displayed in the reminder notification. |
| wantAgent | WantAgent | No | Information about the ability that is redirected to when the notification is clicked. |
| maxScreenWantAgent | MaxScreenWantAgent | No | Information about the ability that is automatically started when the reminder arrives. If the device is in use, a notification will be displayed. |
| ringDuration | number | No | Ring duration. |
| snoozeTimes | number | No | Number of reminder snooze times. |
| timeInterval | number | No | Reminder snooze interval. |
| title | string | No | Reminder title. |
| content | string | No | Reminder content. |
| expiredContent | string | No | Extended content to be displayed when the reminder expires. |
| snoozeContent | string | No | Extended content to be displayed when the reminder is snoozing. |
| notificationId | number | No | Notification ID used by the reminder. For details, see the API reference of the **NotificationRequest.setNotificationId(int id)** method. |
| slotType | SlotType | No | Type of the slot used by the reminder. |
**ReminderRequestCalendar** extends **ReminderRequest** and defines a reminder for a calendar event.
For the application to run properly, if both **repeatMonths** and **repeatDays** are not specified, the earliest reminder time must be later than the current time.
**Table 8** ReminderRequestCalendar instance ## Available APIs
| Name | Type | Mandatory | Description |
| ------------ | -------------- | --------- | ------------------------------------------------------------ |
| dateTime | LocalDateTime | Yes | Reminder time, accurate to the minute. |
| repeatMonths | Array\<number> | No | Months in which the reminder repeats. The value range is 1 to 12. |
| repeatDays | Array\<number> | No | Date on which the reminder repeats. The value range is 1 to 31. |
**ReminderRequestAlarm** extends **ReminderRequest** and defines a reminder for the alarm clock.
**Table 9** ReminderRequestAlarm instance
| Name | Type | Mandatory | Description |
| ---------- | -------------- | --------- | ------------------------------------------------------------ |
| hour | number | Yes | Hour portion of the reminder time. The value range is 0 to 23. |
| minute | number | Yes | Minute portion of the reminder time. The value range is 0 to 59. |
| daysOfWeek | Array\<number> | No | Days of a week when the reminder repeats. The value range is 1 to 7. |
**ReminderRequestTimer** extends **ReminderRequest** and defines a reminder for a scheduled timer.
**Table 10** ReminderRequestTimer instance
| Name | Type | Mandatory | Description |
| -------------------- | ------ | --------- | ----------------------------------------- |
| triggerTimeInSeconds | number | Yes | Number of seconds in the countdown timer. |
**LocalDateTime** defines a **LocalDateTime** instance.
**Table 11** LocalDateTime instance **reminderAgent** encapsulates the APIs for publishing and canceling reminders.
For details about the APIs, see [reminderAgent](../reference/apis/js-apis-reminderAgent.md).
**Table 1** Major APIs in reminderAgent
| Name | Type | Mandatory | Description | | Name| Description|
| ------ | ------ | --------- | ----------- | | -------- | -------- |
| year | number | Yes | Year. | | publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback&lt;number&gt;): void<br>publishReminder(reminderReq: ReminderRequest): Promise&lt;number&gt; | Publishes a scheduled reminder.<br>The maximum number of valid notifications (excluding expired ones that will not pop up again) is 30 for one application and 2000 for the entire system. |
| month | number | Yes | Month. | | cancelReminder(reminderId: number, callback: AsyncCallback&lt;void&gt;): void<br>cancelReminder(reminderId: number): Promise&lt;void&gt; | Cancels a specified reminder. (The value of **reminderId** is obtained from the return value of **publishReminder**.)|
| day | number | Yes | Date. | | getValidReminders(callback: AsyncCallback&lt;Array&lt;ReminderRequest&gt;&gt;): void<br>getValidReminders(): Promise&lt;Array&lt;ReminderRequest&gt;&gt; | Obtains all valid reminders set by the current application.|
| hour | number | Yes | Hour. | | cancelAllReminders(callback: AsyncCallback&lt;void&gt;): void<br>cancelAllReminders(): Promise&lt;void&gt; | Cancels all reminders set by the current application.|
| minute | number | Yes | Minute. | | addNotificationSlot(slot: NotificationSlot, callback: AsyncCallback&lt;void&gt;): void<br>addNotificationSlot(slot: NotificationSlot): Promise&lt;void&gt; | Registers a **NotificationSlot** instance to be used by the reminder.|
| second | number | No | Second. | | removeNotificationSlot(slotType: notification.SlotType, callback: AsyncCallback&lt;void&gt;): void<br>removeNotificationSlot(slotType: notification.SlotType): Promise&lt;void&gt; | Removes a **NotificationSlot** instance of a specified type.|
## How to Develop ## How to Develop
> **NOTE** > **NOTE**
> To publish a reminder, your application needs to apply for the **ohos.permission.PUBLISH_AGENT_REMINDER** permission. >
> 1. To publish a reminder through the reminder agent, your application needs to apply for the **ohos.permission.PUBLISH_AGENT_REMINDER** permission.
Publish a 10-second countdown reminder. >
> 2. Your application must have notification enabled. For details, see [Notification.requestEnableNotification](../reference/apis/js-apis-notification.md#notificationrequestenablenotification8).
1. Define a countdown timer instance. 1. Define a reminder agent.
``` Sample code for defining a reminder agent for a countdown timer:
```js
import reminderAgent from '@ohos.reminderAgent'; import reminderAgent from '@ohos.reminderAgent';
import notification from '@ohos.notification'; import notification from '@ohos.notification';
export default { export default {
// In JS Project: // For a JS project:
// timer: { // timer: {
// In eTS Project: // For an eTS project:
let timer : reminderAgent.ReminderRequestTimer = { let timer : reminderAgent.ReminderRequestTimer = {
reminderType: reminderAgent.ReminderType.REMINDER_TYPE_TIMER, reminderType: reminderAgent.ReminderType.REMINDER_TYPE_TIMER,
triggerTimeInSeconds: 10, triggerTimeInSeconds: 10,
...@@ -191,9 +66,97 @@ Publish a 10-second countdown reminder. ...@@ -191,9 +66,97 @@ Publish a 10-second countdown reminder.
} }
``` ```
2. Publish the reminder. Sample code for defining a reminder agent for a calendar event:
``` ```js
// For a JS project:
// calendar: {
// For an eTS project:
let calendar : reminderAgent.ReminderRequestCalendar = {
reminderType: reminderAgent.ReminderType.REMINDER_TYPE_CALENDAR,
dateTime: {
year: 2050,
month: 7,
day: 30,
hour: 11,
minute: 14,
second: 30
},
repeatMonths: [1],
repeatDays: [1],
actionButton: [
{
title: "close",
type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE
},
{
title: "snooze",
type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE
},
],
wantAgent: {
pkgName: "com.example.device",
abilityName: "com.example.device.MainAbility"
},
maxScreenWantAgent: {
pkgName: "com.example.device",
abilityName: "com.example.device.MainAbility"
},
ringDuration: 5,
snoozeTimes: 2,
timeInterval: 5,
title: "this is title",
content: "this is content",
expiredContent: "this reminder has expired",
snoozeContent: "remind later",
notificationId: 100,
slotType: notification.SlotType.SOCIAL_COMMUNICATION
}
```
Sample code for defining a reminder agent for an alarm:
```js
// For a JS project:
// alarm: {
// For an eTS project:
let alarm : reminderAgent.ReminderRequestAlarm = {
reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM,
hour: 11,
minute: 14,
daysOfWeek: [0],
actionButton: [
{
title: "close",
type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE
},
{
title: "snooze",
type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE
},
],
wantAgent: {
pkgName: "com.example.device",
abilityName: "com.example.device.MainAbility"
},
maxScreenWantAgent: {
pkgName: "com.example.device",
abilityName: "com.example.device.MainAbility"
},
ringDuration: 5,
snoozeTimes: 2,
timeInterval: 5,
title: "this is title",
content: "this is content",
expiredContent: "this reminder has expired",
snoozeContent: "remind later",
notificationId: 100,
slotType: notification.SlotType.SOCIAL_COMMUNICATION
}
```
2. Publish a countdown reminder.
```js
startTimer() { startTimer() {
reminderAgent.publishReminder(this.timer, (err, reminderId) =>{ reminderAgent.publishReminder(this.timer, (err, reminderId) =>{
this.printInfo(JSON.stringify(err)); this.printInfo(JSON.stringify(err));
...@@ -203,98 +166,9 @@ Publish a 10-second countdown reminder. ...@@ -203,98 +166,9 @@ Publish a 10-second countdown reminder.
``` ```
HML page code: HML page code:
```html
```
<div class="container"> <div class="container">
<button type="text" value="publishReminder" onclick="startTimer"></button> <button type="text" value="publishReminder" onclick="startTimer"></button>
</div> </div>
``` ```
Sample code for defining a calendar reminder instance:
```
// In JS Project:
// calendar: {
// In eTS Project:
let calendar : reminderAgent.ReminderRequestCalendar = {
reminderType: reminderAgent.ReminderType.REMINDER_TYPE_CALENDAR,
dateTime: {
year: 2050,
month: 7,
day: 30,
hour: 11,
minute: 14,
second: 30
},
repeatMonths: [1],
repeatDays: [1],
actionButton: [
{
title: "close",
type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE
},
{
title: "snooze",
type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE
},
],
wantAgent: {
pkgName: "com.example.device",
abilityName: "com.example.device.MainAbility"
},
maxScreenWantAgent: {
pkgName: "com.example.device",
abilityName: "com.example.device.MainAbility"
},
ringDuration: 5,
snoozeTimes: 2,
timeInterval: 5,
title: "this is title",
content: "this is content",
expiredContent: "this reminder has expired",
snoozeContent: "remind later",
notificationId: 100,
slotType: notification.SlotType.SOCIAL_COMMUNICATION
}
```
Sample code for defining an alarm reminder instance:
```
// In JS Project:
// alarm: {
// In eTS Project:
let alarm : reminderAgent.ReminderRequestAlarm = {
reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM,
hour: 11,
minute: 14,
daysOfWeek: [0],
actionButton: [
{
title: "close",
type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_CLOSE
},
{
title: "snooze",
type: reminderAgent.ActionButtonType.ACTION_BUTTON_TYPE_SNOOZE
},
],
wantAgent: {
pkgName: "com.example.device",
abilityName: "com.example.device.MainAbility"
},
maxScreenWantAgent: {
pkgName: "com.example.device",
abilityName: "com.example.device.MainAbility"
},
ringDuration: 5,
snoozeTimes: 2,
timeInterval: 5,
title: "this is title",
content: "this is content",
expiredContent: "this reminder has expired",
snoozeContent: "remind later",
notificationId: 100,
slotType: notification.SlotType.SOCIAL_COMMUNICATION
}
```
\ No newline at end of file
...@@ -20,7 +20,7 @@ import reminderAgent from'@ohos.reminderAgent'; ...@@ -20,7 +20,7 @@ import reminderAgent from'@ohos.reminderAgent';
publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback&lt;number&gt;): void publishReminder(reminderReq: ReminderRequest, callback: AsyncCallback&lt;number&gt;): void
Publishes an agent-powered reminder. This API uses an asynchronous callback to return the result. Publishes a reminder through the reminder agent. This API uses an asynchronous callback to return the result. It can be called only when notification is enabled for the application through [Notification.requestEnableNotification](../reference/apis/js-apis-notification.md#notificationrequestenablenotification8).
**Required permissions**: ohos.permission.PUBLISH_AGENT_REMINDER **Required permissions**: ohos.permission.PUBLISH_AGENT_REMINDER
...@@ -49,7 +49,7 @@ Publishes an agent-powered reminder. This API uses an asynchronous callback to r ...@@ -49,7 +49,7 @@ Publishes an agent-powered reminder. This API uses an asynchronous callback to r
publishReminder(reminderReq: ReminderRequest): Promise&lt;number&gt; publishReminder(reminderReq: ReminderRequest): Promise&lt;number&gt;
Publishes an agent-powered reminder. This API uses a promise callback to return the result. Publishes a reminder through the reminder agent. This API uses a promise to return the result. It can be called only when notification is enabled for the application through [Notification.requestEnableNotification](../reference/apis/js-apis-notification.md#notificationrequestenablenotification8).
**Required permissions**: ohos.permission.PUBLISH_AGENT_REMINDER **Required permissions**: ohos.permission.PUBLISH_AGENT_REMINDER
...@@ -435,7 +435,7 @@ Sets the package and ability that are redirected to when the reminder notificati ...@@ -435,7 +435,7 @@ Sets the package and ability that are redirected to when the reminder notificati
## MaxScreenWantAgent ## MaxScreenWantAgent
Sets the name of the target package and ability to start automatically when the reminder arrives and the device is not in use. If the device is in use, a notification will be displayed. Provides the information about the target package and ability to start automatically when the reminder is displayed in full-screen mode. This API is reserved.
**System capability**: SystemCapability.Notification.ReminderAgent **System capability**: SystemCapability.Notification.ReminderAgent
...@@ -454,7 +454,7 @@ Defines the reminder to publish. ...@@ -454,7 +454,7 @@ Defines the reminder to publish.
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| reminderType | ReminderType | Yes| Type of the reminder.| | reminderType | ReminderType | Yes| Type of the reminder.|
| actionButton | [ActionButton?,&nbsp;ActionButton?] | No| Action button displayed in the reminder notification. (The parameter is optional. Up to two buttons are supported.)| | actionButton | [ActionButton?,&nbsp;ActionButton?] | No| Button displayed in the reminder notification. (The parameter is optional. Up to two buttons are supported.)|
| wantAgent | WantAgent | No| Information about the ability that is redirected to when the notification is clicked.| | wantAgent | WantAgent | No| Information about the ability that is redirected to when the notification is clicked.|
| maxScreenWantAgent | MaxScreenWantAgent | No| Information about the ability that is automatically started when the reminder arrives. If the device is in use, a notification will be displayed.| | maxScreenWantAgent | MaxScreenWantAgent | No| Information about the ability that is automatically started when the reminder arrives. If the device is in use, a notification will be displayed.|
| ringDuration | number | No| Ringing duration.| | ringDuration | number | No| Ringing duration.|
......
# Search # Search
The **\<Search>** component provides an input area for users to search.
> **NOTE** > **NOTE**
> >
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Search>** component provides an input area for users to search.
## Required Permissions ## Required Permissions
None None
...@@ -20,32 +20,33 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll ...@@ -20,32 +20,33 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
| value | string | No| - | Text input in the search text box. | | value | string | No | - | Text input in the search text box. |
| placeholder | string | No | - | Text displayed when there is no input. | | placeholder | string | No | - | Text displayed when there is no input. |
| icon | string | No| - | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png. | | icon | string | No | - | Path to the search icon. By default, the system search icon is used. The supported icon formats are .svg, .jpg, and .png.|
| controller | SearchController | No| - | Controller. | | controller | SearchController | No | - | Controller. |
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | ----------------------- | ---------------------------------------- | ---- | --------------------- |
| searchButton | string | –| Text on the search button located next to the search text box. By default, there is no search button. | | searchButton | string | – | Text on the search button located next to the search text box. By default, there is no search button.|
| placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color. | | placeholderColor | [ResourceColor](../../ui/ts-types.md) | - | Placeholder text color. |
| placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style. | | placeholderFont | [Font](../../ui/ts-types.md) | - | Placeholder text style. |
| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. | | textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. |
| copyOption<sup>9+</sup> | boolean \| [CopyOption](ts-basic-components-text.md) | true | Whether copy and paste is allowed.|
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or tap the search button on a soft keyboard.<br> - **value**: current text input. | | onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or touch the search button on a soft keyboard.<br> -**value**: current text input.|
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> - **value**: current text input. | | onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> -**value**: current text input. |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> - **value**: text copied. | | onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> -**value**: text copied. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> - **value**: text cut. | | onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> -**value**: text cut. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> - **value**: text pasted. | | onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> -**value**: text pasted. |
## SearchController ## SearchController
...@@ -63,9 +64,9 @@ Sets the position of the caret. ...@@ -63,9 +64,9 @@ Sets the position of the caret.
- Parameters - Parameters
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | --------------------- | | ----- | ------ | ---- | ---- | ----------------- |
| value | number | Yes | - | Length from the start of the text string to the position where the caret is located. | | value | number | Yes | - | Length from the start of the character string to the position where the caret is located.|
...@@ -76,29 +77,30 @@ Sets the position of the caret. ...@@ -76,29 +77,30 @@ Sets the position of the caret.
@Entry @Entry
@Component @Component
struct SearchExample { struct SearchExample {
@State changevalue: string = '' @State changeValue: string = ''
@State submitvalue: string = '' @State submitValue: string = ''
controller: SearchController = new SearchController() controller: SearchController = new SearchController()
build() { build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Text(this.submitvalue) Text(this.submitValue)
Text(this.changevalue) Text(this.changeValue)
Search({value: '', placeholder: 'Type to search', controller: this.controller}) Search({value: this.changeValue, placeholder: 'Type to search', controller: this.controller})
.searchButton('Search') .searchButton('Search')
.width(400) .width(400)
.height(35) .height(35)
.backgroundColor(Color.White) .backgroundColor(Color.White)
.placeholderColor(Color.Grey) .placeholderColor(Color.Grey)
.placeholderFont({ size: 50, weight: 10, family: 'serif', style: FontStyle.Normal }) .placeholderFont({ size: 26, weight: 10, family: 'serif', style: FontStyle.Normal })
.onSubmit((value: string) => { .onSubmit((value: string) => {
this.submitvalue = value this.submitValue = value
}) })
.onChange((value: string) => { .onChange((value: string) => {
this.changevalue = value this.changeValue = value
}) })
.margin({ top: 30 }) .margin({ top: 30, left:10, right:10 })
} }
} }
} }
``` ```
![search](figures/search.png)
# Path2D # Path2D
**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. > **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## addPath ## addPath
...@@ -14,41 +14,43 @@ addPath(path: Object): void ...@@ -14,41 +14,43 @@ addPath(path: Object): void
Adds a path to this path. Adds a path to this path.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory | Default Value | Description |
| path | Object | Yes | null | Path to be added to this path. | | -------- | -------- | -------- | -------- | -------- |
| path | Object | Yes | null | Path to be added to this path. |
- Example
**Example**
```
@Entry ```ts
@Component // xxx.ets
struct AddPath { @Entry
private settings: RenderingContextSettings = new RenderingContextSettings(true) @Component
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) struct AddPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
build() { private path2Db: Path2D = new Path2D()
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) build() {
.width('100%') Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
.height('100%') Canvas(this.context)
.backgroundColor('#ffff00') .width('100%')
.onReady(() =>{ .height('100%')
this.path2Db.addPath(this.path2Da) .backgroundColor('#ffff00')
this.context.stroke(this.path2Db) .onReady(() =>{
}) this.path2Db.addPath(this.path2Da)
} this.context.stroke(this.path2Db)
.width('100%') })
.height('100%')
} }
.width('100%')
.height('100%')
} }
``` }
```
![en-us_image_0000001211898520](figures/en-us_image_0000001211898520.png) ![en-us_image_0000001211898520](figures/en-us_image_0000001211898520.png)
## closePath ## closePath
...@@ -57,37 +59,38 @@ closePath(): void ...@@ -57,37 +59,38 @@ closePath(): void
Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing. Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing.
- Example **Example**
``` ```ts
@Entry // xxx.ets
@Component @Entry
struct ClosePath { @Component
private settings: RenderingContextSettings = new RenderingContextSettings(true) struct ClosePath {
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private path2Db: Path2D = new Path2D() private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private path2Db: Path2D = new Path2D()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { build() {
Canvas(this.context) Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
.width('100%') Canvas(this.context)
.height('100%') .width('100%')
.backgroundColor('#ffff00') .height('100%')
.onReady(() =>{ .backgroundColor('#ffff00')
this.path2Db.moveTo(200, 100) .onReady(() =>{
this.path2Db.lineTo(300, 100) this.path2Db.moveTo(200, 100)
this.path2Db.lineTo(200, 200) this.path2Db.lineTo(300, 100)
this.path2Db.closePath() this.path2Db.lineTo(200, 200)
this.context.stroke(this.path2Db) this.path2Db.closePath()
}) this.context.stroke(this.path2Db)
} })
.width('100%')
.height('100%')
} }
.width('100%')
.height('100%')
} }
``` }
```
![en-us_image_0000001212218482](figures/en-us_image_0000001212218482.png) ![en-us_image_0000001212218482](figures/en-us_image_0000001212218482.png)
## moveTo ## moveTo
...@@ -96,15 +99,17 @@ moveTo(x: number, y: number): void ...@@ -96,15 +99,17 @@ moveTo(x: number, y: number): void
Moves the current coordinate point of the path to the target point, without drawing a line during the movement. Moves the current coordinate point of the path to the target point, without drawing a line during the movement.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory | Default Value | Description |
| x | number | Yes | 0 | X-coordinate of the target point. | | -------- | -------- | -------- | -------- | -------- |
| y | number | Yes | 0 | Y-coordinate of the target point. | | x | number | Yes | 0 | X-coordinate of the target point. |
| y | number | Yes | 0 | Y-coordinate of the target point. |
- Example **Example**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct MoveTo { struct MoveTo {
...@@ -132,7 +137,7 @@ Moves the current coordinate point of the path to the target point, without draw ...@@ -132,7 +137,7 @@ Moves the current coordinate point of the path to the target point, without draw
} }
``` ```
![en-us_image_0000001257138389](figures/en-us_image_0000001257138389.png) ![en-us_image_0000001257138389](figures/en-us_image_0000001257138389.png)
## lineTo ## lineTo
...@@ -141,15 +146,17 @@ lineTo(x: number, y: number): void ...@@ -141,15 +146,17 @@ lineTo(x: number, y: number): void
Draws a straight line from the current point to the target point. Draws a straight line from the current point to the target point.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory | Default Value | Description |
| x | number | Yes | 0 | X-coordinate of the target point. | | -------- | -------- | -------- | -------- | -------- |
| y | number | Yes | 0 | Y-coordinate of the target point. | | x | number | Yes | 0 | X-coordinate of the target point. |
| y | number | Yes | 0 | Y-coordinate of the target point. |
- Example **Example**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct LineTo { struct LineTo {
...@@ -178,7 +185,7 @@ Draws a straight line from the current point to the target point. ...@@ -178,7 +185,7 @@ Draws a straight line from the current point to the target point.
} }
``` ```
![en-us_image_0000001256858435](figures/en-us_image_0000001256858435.png) ![en-us_image_0000001256858435](figures/en-us_image_0000001256858435.png)
## bezierCurveTo ## bezierCurveTo
...@@ -187,19 +194,21 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -187,19 +194,21 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
Draws a cubic bezier curve on the canvas. Draws a cubic bezier curve on the canvas.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory | Default Value | Description |
| cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. | | -------- | -------- | -------- | -------- | -------- |
| cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. | | cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve. |
| cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. | | cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve. |
| cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. | | cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve. |
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | | cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example
**Example**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
...@@ -224,7 +233,7 @@ Draws a cubic bezier curve on the canvas. ...@@ -224,7 +233,7 @@ Draws a cubic bezier curve on the canvas.
} }
``` ```
![en-us_image_0000001257058445](figures/en-us_image_0000001257058445.png) ![en-us_image_0000001257058445](figures/en-us_image_0000001257058445.png)
## quadraticCurveTo ## quadraticCurveTo
...@@ -233,17 +242,19 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void ...@@ -233,17 +242,19 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
Draws a quadratic curve on the canvas. Draws a quadratic curve on the canvas.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory | Default Value | Description |
| cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. | | -------- | -------- | -------- | -------- | -------- |
| cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. | | cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter. |
| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | | cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | | x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. |
| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. |
- Example **Example**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
...@@ -269,28 +280,30 @@ Draws a quadratic curve on the canvas. ...@@ -269,28 +280,30 @@ Draws a quadratic curve on the canvas.
} }
``` ```
![en-us_image_0000001212058512](figures/en-us_image_0000001212058512.png) ![en-us_image_0000001212058512](figures/en-us_image_0000001212058512.png)
## arc ## arc
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
Draws an arc on the canvas. Draws an arc on the canvas.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory | Default Value | Description |
| x | number | Yes | 0 | X-coordinate of the center point of the arc. | | -------- | -------- | -------- | -------- | -------- |
| y | number | Yes | 0 | Y-coordinate of the center point of the arc. | | x | number | Yes | 0 | X-coordinate of the center point of the arc. |
| radius | number | Yes | 0 | Radius of the arc. | | y | number | Yes | 0 | Y-coordinate of the center point of the arc. |
| startAngle | number | Yes | 0 | Start radian of the arc. | | radius | number | Yes | 0 | Radius of the arc. |
| endAngle | number | Yes | 0 | End radian of the arc. | | startAngle | number | Yes | 0 | Start radian of the arc. |
| anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. | | endAngle | number | Yes | 0 | End radian of the arc. |
| anticlockwise | boolean | No | false | Whether to draw the arc counterclockwise. |
- Example
**Example**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct Arc { struct Arc {
...@@ -314,7 +327,7 @@ Draws an arc on the canvas. ...@@ -314,7 +327,7 @@ Draws an arc on the canvas.
} }
``` ```
![en-us_image_0000001212378446](figures/en-us_image_0000001212378446.png) ![en-us_image_0000001212378446](figures/en-us_image_0000001212378446.png)
## arcTo ## arcTo
...@@ -323,18 +336,20 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -323,18 +336,20 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
Draws an arc based on the radius and points on the arc. Draws an arc based on the radius and points on the arc.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory | Default Value | Description |
| x1 | number | Yes | 0 | X-coordinate of the first point on the arc. | | -------- | -------- | -------- | -------- | -------- |
| y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. | | x1 | number | Yes | 0 | X-coordinate of the first point on the arc. |
| x2 | number | Yes | 0 | X-coordinate of the second point on the arc. | | y1 | number | Yes | 0 | Y-coordinate of the first point on the arc. |
| y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. | | x2 | number | Yes | 0 | X-coordinate of the second point on the arc. |
| radius | number | Yes | 0 | Radius of the arc. | | y2 | number | Yes | 0 | Y-coordinate of the second point on the arc. |
| radius | number | Yes | 0 | Radius of the arc. |
- Example **Example**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
...@@ -359,7 +374,7 @@ Draws an arc based on the radius and points on the arc. ...@@ -359,7 +374,7 @@ Draws an arc based on the radius and points on the arc.
} }
``` ```
![en-us_image_0000001212058510](figures/en-us_image_0000001212058510.png) ![en-us_image_0000001212058510](figures/en-us_image_0000001212058510.png)
## ellipse ## ellipse
...@@ -368,21 +383,23 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -368,21 +383,23 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
Draws an ellipse in the specified rectangular region. Draws an ellipse in the specified rectangular region.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- | | Name | Type | Mandatory | Default Value | Description |
| x | number | Yes | 0 | X-coordinate of the ellipse center. | | -------- | -------- | -------- | -------- | -------- |
| y | number | Yes | 0 | Y-coordinate of the ellipse center. | | x | number | Yes | 0 | X-coordinate of the ellipse center. |
| radiusX | number | Yes | 0 | Ellipse radius on the x-axis. | | y | number | Yes | 0 | Y-coordinate of the ellipse center. |
| radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. |
| rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. | | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. |
| startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. | | rotation | number | Yes | 0 | Rotation angle of the ellipse, in radians. |
| endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. | | startAngle | number | Yes | 0 | Angle of the start point for drawing the ellipse, in radians. |
| anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. | | endAngle | number | Yes | 0 | Angle of the end point for drawing the ellipse, in radians. |
| anticlockwise | number | No | 0 | Whether to draw the ellipse in the counterclockwise direction. The value **0** means to draw the ellipse in the clockwise direction, and **1** means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is **0**. |
- Example
**Example**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -407,7 +424,7 @@ Draws an ellipse in the specified rectangular region. ...@@ -407,7 +424,7 @@ Draws an ellipse in the specified rectangular region.
} }
``` ```
![en-us_image_0000001257138391](figures/en-us_image_0000001257138391.png) ![en-us_image_0000001257138391](figures/en-us_image_0000001257138391.png)
## rect ## rect
...@@ -416,17 +433,19 @@ rect(x: number, y: number, width: number, height: number): void ...@@ -416,17 +433,19 @@ rect(x: number, y: number, width: number, height: number): void
Creates a rectangle. Creates a rectangle.
- Parameters **Parameters**
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. |
- Example | Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle. |
| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle. |
| width | number | Yes | 0 | Width of the rectangle. |
| height | number | Yes | 0 | Height of the rectangle. |
**Example**
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
...@@ -450,4 +469,4 @@ Creates a rectangle. ...@@ -450,4 +469,4 @@ Creates a rectangle.
} }
``` ```
![en-us_image_0000001256978385](figures/en-us_image_0000001256978385.png) ![en-us_image_0000001256978385](figures/en-us_image_0000001256978385.png)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册