This module helps manage the logic of the button component for HarmonyOS apps and atomic services to implement relevant functions.
Since: 4.1.0(11)
Defines the function types of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
| Name | Value | Description |
|---|---|---|
| GET_PHONE_NUMBER | 0 | Verifies a mobile number quickly. Atomic service API: This API can be used in atomic services since API version 4.1.0(11). |
| GET_REALTIME_PHONENUMBER | 1 | Verifies a mobile number in real time. Atomic service API: This API can be used in atomic services since API version 4.1.0(11). NOTE GET_REALTIME_PHONENUMBER is only for internal use since API version 5.0.0(12). |
| LAUNCH_APP | 2 | Launches an app. Atomic service API: This API can be used in atomic services since API version 4.1.0(11). |
| OPEN_SETTING | 3 | Opens the authorization setting page. Atomic service API: This API can be used in atomic services since API version 4.1.0(11). NOTE OPEN_SETTING no longer evolves since API version 5.0.2(14). You are advised to use PERMISSION_SETTING instead. |
| CHOOSE_AVATAR | 4 | Selects an avatar. Atomic service API: This API can be used in atomic services since API version 4.1.0(11). |
| CHOOSE_ADDRESS | 5 | Selects an address. Since: 5.0.0(12) Atomic service API: This API can be used in atomic services since API version 5.0.0(12). |
| CHOOSE_INVOICE_TITLE | 6 | Selects an invoice title. Since: 5.0.0(12) Atomic service API: This API can be used in atomic services since API version 5.0.0(12). |
| REAL_NAME_AUTHENTICATION | 7 | Verifies real-name information. Since: 5.0.0(12) Atomic service API: This API can be used in atomic services since API version 5.0.0(12). NOTE REAL_NAME_AUTHENTICATION is only for internal use currently. |
| FACE_AUTHENTICATION | 8 | Verifies identity information by face. Since: 5.0.0(12) Atomic service API: This API can be used in atomic services since API version 5.0.0(12). NOTE FACE_AUTHENTICATION is only for internal use currently. |
| CHOOSE_LOCATION | 9 | Selects a location on a map. Since: 5.0.0(12) Atomic service API: This API can be used in atomic services since API version 5.0.0(12). |
| SUBSCRIBE_LIVE_VIEW | 10 | Subscribes to live view messages. Since: 5.0.0(12) NOTE SUBSCRIBE_LIVE_VIEW is only for internal use currently. |
| PERMISSION_SETTING | 11 | Permissions settings. Since: 5.0.2(14) Atomic service API: This API can be used in atomic services since API version 5.0.2(14). |
| REQUEST_SUBSCRIBE_MESSAGE | 12 | Obtains service updates based on the authorization code. Since: 6.0.0(20) Atomic service API: This API can be used in atomic services since API version 6.0.0(20). |
| SHARE | 13 | Shares an atomic service. Since: 6.0.0(20) Atomic service API: This API can be used in atomic services since API version 6.0.0(20). |
| FEEDBACK | 14 | Gives feedback. Since: 6.0.0(20) Atomic service API: This API can be used in atomic services since API version 6.0.0(20). |
| GET_PHONE_NUMBER_AND_RISK_LEVEL | 15 | Obtains the mobile number and risk level. Since: 6.0.2(22) Atomic service API: This API can be used in atomic services since API version 6.0.2(22). |
Defines the size options of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
| Name | Value | Description |
|---|---|---|
| DEFAULT | 0 | Default size. |
| MINI | 1 | Small size. |
Defines the effect options when the FunctionalButton component is tapped.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
| Name | Value | Description |
|---|---|---|
| NONE | 0 | No effect. |
| HOVER_CLASS | 1 | Default effect. |
Defines the color options of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
| Name | Value | Description |
|---|---|---|
| DEFAULT | 0 | Blue. |
| PRIMARY | 1 | Green. |
| WARN | 2 | Red. |
Defines the identity verification options of the FunctionalButton component.
This API is added in version 5.0.0(12) and then deprecated in version 6.0.2(22). There is no substitute API.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 5.0.0(12)
| Name | Value | Description |
|---|---|---|
| IDCard | 0 | ID card. |
Defines the real-name information verification object required by the FunctionalButton component.
This API is supported since version 5.0.0(12) and deprecated since version 6.0.2(22). No substitute is provided.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| openID | string | No | No | Identifier that represents the identity of a HUAWEI ID user when using different types of products. The same user has different OpenIDs for different apps. |
| realName | string | No | No | Name on the ID card. |
| credentialID | Uint8Array | No | No | ID card number. |
| credentialType(deprecated) | CredentialType | No | Yes | ID card type. |
Defines style information for the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| size | SizeType | No | Yes | Button size setting. The default value is functionalButtonComponentManager.SizeType.DEFAULT, with the font size 16 fp. |
| bgColor | ColorType | No | Yes | Button color type. The default value is functionalButtonComponentManager.ColorType.DEFAULT, indicating white text on a blue background. |
| plain | boolean | No | Yes | Indicates whether the button is hollow. The options are true (yes) and false (no). The default value is false. |
| disabled | boolean | No | Yes | Indicates whether the button is disabled. The options are true (yes) and false (no). The default value is false. |
| loading | boolean | No | Yes | Indicates whether to display the loading icon before the button name. The options are true (yes) and false (no). The default value is false. |
| hoverClass | HoverClassType | No | Yes | Style of the button when being tapped. The default value is functionalButtonComponentManager.HoverClassType.HOVER_CLASS, indicating that the tapping effect is enabled. |
| hoverStartTime | number | No | Yes | Delay before the pressed state appears upon pressing, in milliseconds. The default value is 0. Value range: [0, +∞) NOTE A value less than 0 evaluates to the value 0. |
| hoverStayTime | number | No | Yes | Retention time of the pressed state after the finger is lifted, in milliseconds. The default value is 0. Value range: [0, +∞) NOTE A value less than 0 evaluates to the value 0. |
| styleConfig | ButtonConfig | No | Yes | Button style settings. NOTE If any setting defined in styleConfig conflicts with that defined in StyleOption, the setting in styleConfig prevails. |
Defines button function and style parameters for the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| openType | OpenType | No | No | Button function scenario. The default value is functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER. Atomic service API: This API can be used in atomic services since API version 4.1.0(11). |
| label | ResourceStr | No | No | Text displayed on the button. An empty character string is displayed by default. Atomic service API: This API can be used in atomic services since API version 4.1.0(11). |
| styleOption | StyleOption | No | Yes | Button style. Atomic service API: This API can be used in atomic services since API version 4.1.0(11). NOTE - For a button, only the style settings defined by styleOption take effect. - When buttonModifier, textModifier, and loadingProgressModifier are used to set the button style, the corresponding attributes will be overwritten. |
| appParam | AppParam | No | Yes | Information about the app to be launched. Example format: {bundleName: "xxx", abilityName: "xxx"} bundleName: bundle name. abilityName: ability name. Atomic service API: This API can be used in atomic services since API version 4.1.0(11). NOTE This parameter is mandatory when openType is set to functionalButtonComponentManager.OpenType.LAUNCH_APP. |
| realNameAuthenticationInfo(deprecated) | RealNameAuthenticationInfo | No | Yes | Information about the real-name information verification button. Since: 5.0.0(12) Atomic service API: This API can be used in atomic services since API version 5.0.0(12). NOTE This API is supported since version 5.0.0(12) and deprecated since version 6.0.2(22). No substitute is provided. |
| subscribeLiveViewParam | SubscribeLiveViewParam | No | Yes | Information about the live view subscription button. Since: 5.0.0(12) |
| permissionListParam | Array<Permissions> | No | Yes | Permission settings button parameters. Since: 5.0.2(14) Atomic service API: This API can be used in atomic services since API version 5.0.2(14). NOTE For details about the names of the permissions to be set, please refer to Application Permissions. |
| subSceneId | string | No | Yes | Sub-scenario ID, which is mandatory for obtaining a service updates authorization code. You need to pass the parameter by referring to Service Updates Scenario Templates. Since: 6.0.0(20) Atomic service API: This API can be used in atomic services since API version 6.0.0(20). |
| shareParam | ShareParam | No | Yes | Share button parameters. Since: 6.0.0(20) Atomic service API: This API can be used in atomic services since API version 6.0.0(20). |
| buttonModifier | ButtonModifier | No | Yes | Sets the attributes of a button, such as the style and color of the setup button. Since: 5.1.0(18) Atomic service API: This API can be used in atomic services since API version 5.1.0(18). |
| textModifier | TextModifier | No | Yes | Modifier for setting text attributes, such as the font color, font size, and font weight. Since: 5.1.0(18) Atomic service API: This API can be used in atomic services since API version 5.1.0(18). |
| loadingProgressModifier | LoadingProgressModifier | No | Yes | Modifier for setting loading effect attributes, such as the style, color, and custom content area. Since: 5.1.0(18) Atomic service API: This API can be used in atomic services since API version 5.1.0(18). NOTE The setting of loadingProgressModifier takes effect only when loading in styleOption is set to true. |
Defines the success response for the mobile number quick verification function.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| code | string | No | Yes | Temporary sign-in credential (authorization code) of a user. NOTE It can be used to obtain the real mobile number upon temporary sign-in. The code is valid for five minutes. For details, please refer to Server-Side Development. |
Defines the success response for the mobile number real-time verification function.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| code | string | No | Yes | Temporary sign-in credential (authorization code) of a user. NOTE It can be used to obtain the real mobile number upon temporary sign-in. The code is valid for five minutes. For details, please refer to Server-Side Development. |
Defines the app permission configuration response after the authorization setting page is opened and then the user is redirected to the app or the authorization setting is completed.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| permissions | Map<string, boolean> | No | Yes | Permission dictionary. In the dictionary, key indicates a permission name, and value indicates whether the permission is enabled. The options of value include true (yes) and false (no). |
Defines the success response for the avatar selection function.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| avatarUri | string | No | Yes | Address of the selected avatar. NOTE The address of the cropped image is returned. |
Defines the bundle name of the app to be launched and the ability name when the FunctionalButton component is used to launch an app.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 4.1.0(11)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| bundleName | ResourceStr | No | No | Bundle name. |
| abilityName | ResourceStr | No | Yes | Ability name. The default value is EntryAbility. |
Defines the response body when the FunctionalButton component is used to select a shipping address.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| userName | string | No | No | User name. |
| mobileNumber | string | No | Yes | Mobile number. |
| telNumber | string | No | Yes | Fixed-line phone number. |
| zipCode | string | No | Yes | Postal code. |
| countryCode | string | No | Yes | Country/Region code. |
| provinceName | string | No | Yes | Province name. |
| cityName | string | No | Yes | City name. |
| districtName | string | No | Yes | District name. |
| streetName | string | No | Yes | Street name. |
| detailedAddress | string | No | No | Detailed address. |
Defines the response body when the FunctionalButton component is used to select an invoice title.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| type | string | No | No | Invoice type. The options are 0 (individual) and 1 (enterprise). |
| title | string | No | No | Invoice title. |
| taxNumber | string | No | No | Tax ID. |
| companyAddress | string | No | Yes | Company address. |
| telephone | string | No | Yes | Phone number. |
| bankName | string | No | Yes | Bank name. |
| bankAccount | string | No | Yes | Bank account. |
Defines the response body when the FunctionalButton component is used to verify real-name information.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| authCode | string | No | Yes | Temporary credential, which is valid for 5 minutes and can be used only once. |
| openID | string | No | Yes | Identifier that represents the identity of a HUAWEI ID user when using different types of products. The same user has different OpenIDs for different apps. |
Defines the response body when the FunctionalButton component is used to verify identity information by face.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| authCode | string | No | Yes | Temporary credential, which is valid for 5 minutes and can be used only once. |
| openID | string | No | Yes | Identifier that represents the identity of a HUAWEI ID user when using different types of products. The same user has different OpenIDs for different apps. |
Defines the response body when the FunctionalButton component is used to verify identity information by face.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| facialRecognitionVerificationToken | string | No | Yes | Token returned after verification success. |
| state | string | No | Yes | state parameter returned in the response body. The value is a string of digits (0-9), letters (a-z or A-Z), dots (.), colons (:), slashes (/), and underscores (). The length limit is 255 characters. The verification rule is ^[0-9a-zA-Z:/.-]{1,255}$. This parameter will be compared with the state parameter in the request body to prevent cross-site attacks. |
Defines the response body when the FunctionalButton component is used to select a location on the map.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| name | string | No | No | Location name. |
| longitude | number | No | No | Longitude. The value ranges from –180 to 180. |
| latitude | number | No | No | Latitude. The value ranges from –90 to 90. |
| address | string | No | No | Address. |
Defines the subscription event and timer when the FunctionalButton component is used to subscribe to live view messages.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 801.
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| event | string | No | No | Subscribes to an event. The value is always SUBSCRIBE_TIMER. |
| alertTime | number | No | No | Reminder timestamp of the timer, in milliseconds. NOTE 1. The parameter cannot be empty. 2. The value of startTime must be greater than or equal to alertTime. 3. The value of startTime and that of alertTime must be later than the current time. 4. The difference between startTime and alertTime must be less than or equal to 3600000 (which can be configured in Push Kit). |
| startTime | number | No | No | Start timestamp of the timer, in milliseconds. NOTE 1. The parameter cannot be empty. 2. The value of startTime must be greater than or equal to alertTime. 3. The value of startTime and that of alertTime must be later than the current time. 4. The difference between startTime and alertTime must be less than or equal to 3600000 (which can be configured in Push Kit). |
Defines the response body when the FunctionalButton component is used to subscribe to live view messages.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 801.
Since: 5.0.0(12)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| subscribeId | string | No | No | Subscription event ID. |
Defines the response body returned when the FunctionalButton component is used for permission settings. The information is used for a UIAbility/UIExtensionAbility to display a permission settings pop-up the second time.
Before calling this API, call requestPermissionsFromUser first. If the user grants the permissions required when the authorization pop-up is displayed the first time, calling this API will not display the permission settings pop-up.
Only UIAbility/UIExtensionAbility is supported.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.2(14).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 5.0.2(14)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| permissionResult | Array<abilityAccessCtrl.GrantStatus> | No | No | Permission settings result. |
Defines the response body of the subscription request.
It is available only to atomic services. If the caller of the onRequestSubscribeMessage API is not an atomic service, error code 10008 will be returned.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 6.0.0(20).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.
Since: 6.0.0(20)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| code | string | No | No | Service updates authorization code, which is used to verify the service and service updates. |
Defines the response of the request for obtaining the mobile number and risk level.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 6.0.2(22).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 6.0.2(22)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| code | string | No | Yes | Authorization code for obtaining a user's mobile number and the corresponding risk level, which is returned upon a retrieval success. |
| errCode | number | No | Yes | Error code, which is returned upon a retrieval failure. |
| errMsg | string | No | Yes | Error message, which is returned upon a retrieval failure. |
FunctionalButton component controller, which is used to receive click events of the component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
onGetPhoneNumber(callback: AsyncCallback<GetPhoneNumberResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for mobile number quick verification. An asynchronous callback is used to return the result.
This API depends on Account Kit. For details, please refer to createAuthorizationWithHuaweiIDRequest.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<GetPhoneNumberResult> | Yes | Callback used to return the result. If the mobile number is successfully obtained, err is undefined, and data is the temporary sign-in credential (authorization code) of the current account. Otherwise, err is an error object. NOTE It can be used to obtain the real mobile number upon temporary sign-in. The code is valid for five minutes. For details, please refer to Server-Side Development. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.GET_PHONE_NUMBER indicates that the button is used to verify a mobile number quickly.
openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER,
label: 'Verify mobile number',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to GET_PHONE_NUMBER, the callback must be onGetPhoneNumber.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onGetPhoneNumber((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
// Obtain an authorization code.
let authorizationCode = data.code;
})
})
}.width('100%')
}.height('100%')
}
} onGetRealtimePhoneNumber(callback: AsyncCallback<GetRealtimePhoneNumberResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for real-time mobile number verification. An asynchronous callback is used to return the result.
This API depends on Account Kit. For details, please refer to createAuthorizationWithHuaweiIDRequest.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<GetRealtimePhoneNumberResult> | Yes | Callback used to return the result. If the mobile number is successfully obtained in real time, err is undefined, and data is the temporary sign-in credential (authorization code) of the current account. Otherwise, err is an error object. NOTE It can be used to obtain the real mobile number upon temporary sign-in. The code is valid for five minutes. For details, please refer to Server-Side Development. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import {FunctionalButton, functionalButtonComponentManager} from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.GET_REALTIME_PHONENUMBER indicates that the button is used to verify a mobile number in real time.
openType: functionalButtonComponentManager.OpenType.GET_REALTIME_PHONENUMBER,
label: 'Verify mobile number now',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to GET_REALTIME_PHONENUMBER, the callback must be onGetRealtimePhoneNumber.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onGetRealtimePhoneNumber((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
// Obtain an authorization code.
let authorizationCode = data.code;
})
})
}
.width('100%')
}
.height('100%')
}
} onLaunchApp(callback: AsyncCallback<void>): FunctionalButtonController
Registers click events of the FunctionalButton component for app launch. An asynchronous callback is used to return the result.
This API depends on Ability Kit. For details, please refer to startAbility.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<void> | Yes | Callback used to return the result. If the app is successfully launched, err is undefined; otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.LAUNCH_APP indicates that the button is used to launch an app.
openType: functionalButtonComponentManager.OpenType.LAUNCH_APP,
label: 'Open APP',
// When OpenType is set to LAUNCH_APP, appParam is mandatory.
appParam: {
bundleName: 'xxx',
abilityName: 'xxx'
},
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to LAUNCH_APP, the callback must be onLaunchApp.
controller: new functionalButtonComponentManager.FunctionalButtonController().onLaunchApp((err) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to launch app, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing. In this case, no value is returned.
hilog.info(0x0000, 'testTag', 'succeeded in launching app');
})
})
}.width('100%')
}.height('100%')
}
}
In the preceding information, bundleName indicates the bundle name and abilityName indicates the ability name.
onOpenSetting(callback: AsyncCallback<OpenSettingResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for opening the authorization setting page. An asynchronous callback is used to return the result.
This API depends on Ability Kit. For details, please refer to startAbilityForResult.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<OpenSettingResult> | Yes | Callback used to return the result. If the authorization setting page is successfully opened, err is undefined, and data is the response returned. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.OPEN_SETTING indicates that the button is used to open the authorization setting page.
openType: functionalButtonComponentManager.OpenType.OPEN_SETTING,
label: 'Open authorization setting page',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to OPEN_SETTING, the callback must be onOpenSetting.
controller: new functionalButtonComponentManager.FunctionalButtonController().onOpenSetting((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to open setting, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing, which is triggered when the app process stops.
hilog.info(0x0000, 'testTag', 'succeeded in opening setting');
data.permissions!.forEach((value, key) => {
hilog.info(0x0000, 'testTag', 'key: %{public}s value: %{public}s', String(key), value);
});
})
})
}.width('100%')
}.height('100%')
}
} onChooseAvatar(callback: AsyncCallback<ChooseAvatarResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for avatar selection. An asynchronous callback is used to return the result.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<ChooseAvatarResult> | Yes | Callback used to return the result. If the avatar selection is successful, err is undefined, and data is the path of the selected avatar image. Otherwise, err is an error object. NOTE The address of the cropped image is returned. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
// Add the account.png file to the /resources/base/media/ directory. Otherwise, an error message will be displayed, indicating that the file cannot be found.
@State url: ResourceStr = $r('app.media.account');
build() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.CHOOSE_AVATAR indicates that the button is used to select an avatar.
openType: functionalButtonComponentManager.OpenType.CHOOSE_AVATAR,
label: '',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.type(ButtonType.Normal)
.backgroundImage(this.url)
.backgroundImageSize(ImageSize.Cover)
.width(80)
.height(80)
.backgroundColor('#E5E5E5')
}
},
// When OpenType is set to CHOOSE_AVATAR, the callback must be onChooseAvatar.
controller: new functionalButtonComponentManager.FunctionalButtonController().onChooseAvatar((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to choose avatar, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in choosing avatar');
this.url = data.avatarUri!;
})
})
}
.padding({ top: 200 })
.height('100%')
.width('100%')
}
} onChooseAddress(callback: AsyncCallback<ChooseAddressResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for shipping address selection. An asynchronous callback is used to return the result.
This API depends on Account Kit. For details, please refer to chooseAddress.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<ChooseAddressResult> | Yes | Callback used to return the result. If the shipping address selection is successful, err is undefined, and data is the shipping address selection result. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.CHOOSE_ADDRESS indicates that the button is used to select a shipping address.
openType: functionalButtonComponentManager.OpenType.CHOOSE_ADDRESS,
label: 'Select shipping address',
// Adjust the button style.
styleOption: {
bgColor:functionalButtonComponentManager.ColorType.DEFAULT,
size: functionalButtonComponentManager.SizeType.DEFAULT,
plain: false,
disabled:false,
loading: false,
hoverClass: functionalButtonComponentManager.HoverClassType.HOVER_CLASS,
hoverStartTime: 0,
hoverStayTime: 0,
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to CHOOSE_ADDRESS, the callback must be onChooseAddress.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onChooseAddress((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to choose address, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in choosing address');
// Obtain address information.
let userName: string = data.userName;
let mobileNumber: string = data.mobileNumber as string;
let countryCode: string = data.countryCode as string;
let provinceName: string = data.provinceName as string;
let cityName: string = data.cityName as string;
let districtName: string = data.districtName as string;
let streetName: string = data.streetName as string;
let detailedAddress: string = data.detailedAddress;
})
})
}.width('100%')
}.height('100%')
}
} onChooseInvoiceTitle(callback: AsyncCallback<ChooseInvoiceTitleResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for invoice title selection. An asynchronous callback is used to return the result.
This API depends on Account Kit. For details, please refer to selectInvoiceTitle.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<ChooseInvoiceTitleResult> | Yes | Callback used to return the result. If the invoice title selection is successful, err is undefined, and data is the invoice title selection result. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.CHOOSE_INVOICE_TITLE indicates that the button is used to select an invoice title.
openType: functionalButtonComponentManager.OpenType.CHOOSE_INVOICE_TITLE,
label: 'Select invoice title',
// Adjust the button style.
styleOption: {
bgColor:functionalButtonComponentManager.ColorType.DEFAULT,
size: functionalButtonComponentManager.SizeType.DEFAULT,
plain: false,
disabled:false,
loading: false,
hoverClass: functionalButtonComponentManager.HoverClassType.HOVER_CLASS,
hoverStartTime: 0,
hoverStayTime: 0,
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to CHOOSE_INVOICE_TITLE, the callback must be onChooseInvoiceTitle.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onChooseInvoiceTitle((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to obtain invoice title, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in obtaining invoice title');
// Obtain invoice information.
let type: string = data.type;
let title: string = data.title;
let taxNumber: string = data.taxNumber;
let companyAddress: string | undefined = data.companyAddress;
let telephone: string | undefined = data.telephone;
let bankName: string | undefined = data.bankName;
let bankAccount: string | undefined = data.bankAccount;
})
})
}.width('100%')
}.height('100%')
}
} onRealNameAuthentication(callback: AsyncCallback<RealNameAuthenticationResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for real-name information verification. An asynchronous callback is used to return the result.
This API depends on Account Kit. For details, please refer to createAuthorizationWithHuaweiIDRequest, AuthenticationController, and executeRequest.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<RealNameAuthenticationResult> | Yes | Callback used to return the result. If the real-name information verification is successful, err is undefined, and data is the verification response body that contains authCode and openID. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { http } from '@kit.NetworkKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
interface Result {
state?: number;
realNameLevel?: number;
verifyResult?: number;
verifyToken?: string;
}
@Entry
@Component
struct SecondPage {
obtainRealNameDataInfo(authCode: string, sceneID: number, openID: string, realName: string, idNo: string,
callback: AsyncCallback<Result>) {
// Each httpRequest corresponds to an HTTP request task and cannot be reused.
let httpRequest = http.createHttp();
// Listen for HTTP response header events. Such events are returned earlier than HTTP responses. You can determine whether to listen for them.
httpRequest.on('headersReceive', (header) => {
hilog.info(0x0000, 'testTag', 'header: %{public}s', header as string);
});
httpRequest.request(
// Define EXAMPLE_URL in extraData based on your service needs. You can add parameters to the URL as required.
'EXAMPLE_URL',
{
method: http.RequestMethod.POST,
// Add header fields based on your service needs.
header: {
'Content-Type': 'application/json'
},
// Use this field to pass information in a POST request.
extraData: {
'authCode': authCode,
'sceneID': sceneID,
'openID': openID,
'realname': realName,
'idNo': idNo
},
expectDataType: http.HttpDataType.STRING,
usingCache: true,
priority: 1,
connectTimeout: 60000,
readTimeout: 60000,
usingProtocol: http.HttpProtocol.HTTP1_1
}, (err, data) => {
if (!err) {
let res: Result = JSON.parse(data.result as string);
callback(undefined, res);
} else {
let error: BusinessError = {code: err.code, message: err.message, name: ''};
callback(error, undefined);
// Unsubscribe from HTTP Response Header events.
httpRequest.off('headersReceive');
// Call destroy() after an HTTP request is complete to release resources.
httpRequest.destroy();
}
});
}
build() {
Row() {
Column() {
FunctionalButton({
params: {
// OpenType.REAL_NAME_AUTHENTICATION indicates that the button is used for real-name information verification.
openType: functionalButtonComponentManager.OpenType.REAL_NAME_AUTHENTICATION,
label: 'Verify real name',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to REAL_NAME_AUTHENTICATION, the callback must be onRealNameAuthentication.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onRealNameAuthentication((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
// Obtain an authorization code.
let authCode: string = data.authCode as string;
let openID: string = data.openID as string;
// sceneid indicates the scenario ID. The options are as follows: 0 (real-name information verification), 1 (face-based identity verification, which verifies the name, certificate type, certificate number, and face), and 2 (face-based identity verification, which verifies the face only).
this.obtainRealNameDataInfo(authCode, 0, openID, 'name', 'idNo', (err, data) => {
if (err) {
hilog.error(0x0000, 'testTag', 'Failed to verify, error: %{public}d %{public}s', err.code, err.message);
return;
}
let state = data.state;
let realNameLevel = data.realNameLevel;
let verifyResult = data.verifyResult;
let verifyToken = data.verifyToken;
hilog.info(0x0000, 'testTag', 'succeeded in verifying');
});
})
})
}
.width('100%')
}
.height('100%')
}
} onFaceAuthentication(callback: AsyncCallback<FaceAuthenticationResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for performing identity verification by face. An asynchronous callback is used to return the result.
This API depends on Account Kit. For details, please refer to createAuthorizationWithHuaweiIDRequest, AuthenticationController, and executeRequest.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<FaceAuthenticationResult> | Yes | Callback used to return the result. If the face-based identity verification is successful, err is undefined, and data is the verification response body that contains authCode and openID. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { http } from '@kit.NetworkKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
interface Result {
state?: number;
realNameLevel?: number;
verifyResult?: number;
verifyToken?: string;
}
@Entry
@Component
struct SecondPage {
obtainFaceVerifyDataInfo(authCode: string, sceneID: number, openID: string, realName: string, idNo: string,
callback: AsyncCallback<Result>) {
// Each httpRequest corresponds to an HTTP request task and cannot be reused.
let httpRequest = http.createHttp();
// Listen for HTTP response header events. Such events are returned earlier than HTTP responses. You can determine whether to listen for them.
httpRequest.on('headersReceive', (header) => {
hilog.info(0x0000, 'testTag', 'header: %{public}s', header as string);
});
httpRequest.request(
// Define EXAMPLE_URL in extraData based on your service needs. You can add parameters to the URL as required.
'EXAMPLE_URL',
{
method: http.RequestMethod.POST,
// Add header fields based on your service needs.
header: {
'Content-Type': 'application/json'
},
// Use this field to pass information in a POST request.
extraData: {
'authCode': authCode,
'sceneID': sceneID,
'openID': openID,
'realname': realName,
'idNo': idNo
},
expectDataType: http.HttpDataType.STRING,
usingCache: true,
priority: 1,
connectTimeout: 60000,
readTimeout: 60000,
usingProtocol: http.HttpProtocol.HTTP1_1
}, (err, data) => {
if (!err) {
let res: Result = JSON.parse(data.result as string);
callback(undefined, res);
} else {
let error: BusinessError = { code: err.code, message: err.message, name: '' };
callback(error, undefined);
// Unsubscribe from HTTP Response Header events.
httpRequest.off('headersReceive');
// Call destroy() after an HTTP request is complete to release resources.
httpRequest.destroy();
}
});
}
build() {
Row() {
Column() {
FunctionalButton({
params: {
// OpenType.FACE_AUTHENTICATION indicates that the button is used for face-based identity verification.
openType: functionalButtonComponentManager.OpenType.FACE_AUTHENTICATION,
label: 'Verify identity by face',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to FACE_AUTHENTICATION, the callback must be onFaceAuthentication.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onFaceAuthentication((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
// Obtain an authorization code.
let authCode: string = data.authCode as string;
let openID: string = data.openID as string;
hilog.info(0x0000, 'testTag', 'succeeded in authCode');
// sceneid indicates the scenario ID. The options are as follows: 0 (real-name information verification), 1 (face-based identity verification, which verifies the name, certificate type, certificate number, and face), and 2 (face-based identity verification, which verifies the face only).
this.obtainFaceVerifyDataInfo(authCode, 2, openID, '', '', (err, data) => {
if (err) {
hilog.error(0x0000, 'testTag', 'error: %{public}d %{public}s', err.code, err.message);
return;
}
let verifyToken: string = data.verifyToken as string;
new functionalButtonComponentManager.FunctionalButtonController().onFaceVerification(verifyToken,
(error, data) => {
if (error) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', error.code, error.message);
return;
}
let facialRecognitionVerificationToken = data.facialRecognitionVerificationToken;
let state = data.state;
hilog.info(0x0000, 'testTag', 'auth result success');
});
});
})
})
}
.width('100%')
}
.height('100%')
}
} onFaceVerification(verifyToken: string, callback: AsyncCallback<FaceVerificationResult>): void
Registers click events of the FunctionalButton component for performing facial authentication. An asynchronous callback is used to return the result.
This API depends on Account Kit. For details, please refer to createAuthorizationWithHuaweiIDRequest, AuthenticationController, and executeRequest.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 1001500003 for PCs/2-in-1 devices and returns error code 801 for TVs.
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| verifyToken | string | Yes | ID token passed to HMS Core (APK) when an app launches the facial authentication page of HMS Core (APK) for successful authentication result verification. For details, please refer to FacialRecognitionVerificationRequest. |
| callback | AsyncCallback<FaceVerificationResult> | Yes | Callback used to return the result. If the facial recognition is successfully triggered, err is undefined, and data is the facial recognition result. Otherwise, err is an error object. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { http } from '@kit.NetworkKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
interface Result {
state?: number;
realNameLevel?: number;
verifyResult?: number;
verifyToken?: string;
}
@Entry
@Component
struct SecondPage {
obtainFaceVerifyDataInfo(authCode: string, sceneID: number, openID: string, realName: string, idNo: string,
callback: AsyncCallback<Result>) {
// Each httpRequest corresponds to an HTTP request task and cannot be reused.
let httpRequest = http.createHttp();
// Listen for HTTP response header events. Such events are returned earlier than HTTP responses. You can determine whether to listen for them.
httpRequest.on('headersReceive', (header) => {
hilog.info(0x0000, 'testTag', 'header: %{public}s', header as string);
});
httpRequest.request(
// Define EXAMPLE_URL in extraData based on your service needs. You can add parameters to the URL as required.
'EXAMPLE_URL',
{
method: http.RequestMethod.POST,
// Add header fields based on your service needs.
header: {
'Content-Type': 'application/json'
},
// Use this field to pass information in a POST request.
extraData: {
'authCode': authCode,
'sceneID': sceneID,
'openID': openID,
'realname': realName,
'idNo': idNo
},
expectDataType: http.HttpDataType.STRING,
usingCache: true,
priority: 1,
connectTimeout: 60000,
readTimeout: 60000,
usingProtocol: http.HttpProtocol.HTTP1_1
}, (err, data) => {
if (!err) {
let res: Result = JSON.parse(data.result as string);
callback(undefined, res);
} else {
let error: BusinessError = { code: err.code, message: err.message, name: '' };
callback(error, undefined);
// Unsubscribe from HTTP Response Header events.
httpRequest.off('headersReceive');
// Call destroy() after an HTTP request is complete to release resources.
httpRequest.destroy();
}
});
}
build() {
Row() {
Column() {
FunctionalButton({
params: {
// OpenType.FACE_AUTHENTICATION indicates that the button is used for face-based identity verification.
openType: functionalButtonComponentManager.OpenType.FACE_AUTHENTICATION,
label: 'Verify identity by face',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to FACE_AUTHENTICATION, the callback must be onFaceAuthentication.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onFaceAuthentication((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
// Obtain an authorization code.
let authCode: string = data.authCode as string;
let openID: string = data.openID as string;
hilog.info(0x0000, 'testTag', 'succeeded in authCode');
// sceneid indicates the scenario ID. The options are as follows: 0 (real-name information verification), 1 (face-based identity verification, which verifies the name, certificate type, certificate number, and face), and 2 (face-based identity verification, which verifies the face only).
this.obtainFaceVerifyDataInfo(authCode, 2, openID, '', '', (err, data) => {
if (err) {
hilog.error(0x0000, 'testTag', 'error: %{public}d %{public}s', err.code, err.message);
return;
}
let verifyToken: string = data.verifyToken as string;
new functionalButtonComponentManager.FunctionalButtonController().onFaceVerification(verifyToken,
(error, data) => {
if (error) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', error.code, error.message);
return;
}
let facialRecognitionVerificationToken = data.facialRecognitionVerificationToken;
let state = data.state;
hilog.info(0x0000, 'testTag', 'auth result success');
});
});
})
})
}
.width('100%')
}
.height('100%')
}
} onChooseLocation(callback: AsyncCallback<ChooseLocationResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for map location selection. An asynchronous callback is used to return the result.
This API depends on Map Kit. For details, please refer to chooseLocation.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.0(12).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<ChooseLocationResult> | Yes | Callback used to return the result. If location selection on the map is successful, err is undefined, and data is the location selection result. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.CHOOSE_LOCATION indicates that the button is used to select a location on the map.
openType: functionalButtonComponentManager.OpenType.CHOOSE_LOCATION,
label: 'Select map location',
// Adjust the button style.
styleOption: {
bgColor:functionalButtonComponentManager.ColorType.DEFAULT,
size: functionalButtonComponentManager.SizeType.DEFAULT,
plain: false,
disabled:false,
loading: false,
hoverClass: functionalButtonComponentManager.HoverClassType.HOVER_CLASS,
hoverStartTime: 0,
hoverStayTime: 0,
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to CHOOSE_LOCATION, the callback must be onChooseLocation.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onChooseLocation((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to choose location, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in choosing location');
let name: string = data.name;
let address: string = data.address;
let longitude: number = data.longitude;
let latitude: number = data.latitude;
})
})
}.width('100%')
}.height('100%')
}
} onSubscribeLiveView(callback: AsyncCallback<SubscribeLiveViewResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for live view subscription. An asynchronous callback is used to return the result.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones and tablets. On other devices, it returns error code 801.
Since: 5.0.0(12)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<SubscribeLiveViewResult> | Yes | Callback used to return the result. If live view subscription is successfully triggered, err is undefined, and data is the subscription result. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Error codes
For details about the error codes, please refer to ArkTS Component Error Codes.
| ID | Error Message |
|---|---|
| 1003500012 | The number of subscription times exceeds the upper limit of 2000. |
| 1003500013 | Invalid event type. |
| 1003500014 | Time exceeds valid period. |
| 1003500015 | Subscribe failed. |
| 1003500016 | Request subscribe liveView exceed. |
Example:
import { hilog } from '@kit.PerformanceAnalysisKit';
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.SUBSCRIBE_LIVE_VIEW indicates that the button is used for live view subscription.
openType: functionalButtonComponentManager.OpenType.SUBSCRIBE_LIVE_VIEW,
label: 'Reserve purchase',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
},
subscribeLiveViewParam: {
event: 'SUBSCRIBE_TIMER',
alertTime: 172178838111,
startTime: 172170198111
}
},
// When OpenType is set to SUBSCRIBE_LIVE_VIEW, the callback must be onSubscribeLiveView.
controller: new functionalButtonComponentManager.FunctionalButtonController().onSubscribeLiveView((err,
data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', `Failed to subscribe LiveView, error code is: ${err?.code} message is ${err?.message}`);
return;
}
let subscribeId = data.subscribeId;
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in subscribing LiveView');
})
})
}
.width('100%')
}
.height('100%')
}
} onPermissionSetting(callback: AsyncCallback<PermissionSettingResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for permission settings. An asynchronous callback is used to return the result.
This API depends on Ability Kit. For details, please refer to requestPermissionOnSetting.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 5.0.2(14).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, PCs/2-in-1 devices, and TVs. On other devices, it returns error code 801.
Since: 5.0.2(14)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<PermissionSettingResult> | Yes | Callback used to return the result. If permission setting is triggered successfully, err is undefined, and data is the permission setting result. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { abilityAccessCtrl, common, PermissionRequestResult } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column({ space: 3 }) {
// Call the Button API of requestPermissionsFromUser.
Button('Request user authorization')
.fontSize(20)
.onClick(() => {
let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
let context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
try {
// Add the ohos.permission.READ_CALENDAR and ohos.permission.WRITE_CALENDAR permissions to the module.json5 file.
atManager.requestPermissionsFromUser(context,
['ohos.permission.READ_CALENDAR', 'ohos.permission.WRITE_CALENDAR'],
(err: BusinessError, data: PermissionRequestResult) => {
if (err) {
hilog.error(0x0000, 'testTag', 'failed in requesting Permissions from user : %{public}d %{public}s',
err.code, err.message);
} else {
hilog.info(0x0000, 'testTag', 'data permissions: %{public}s', data.permissions?.join(','));
hilog.info(0x0000, 'testTag', 'data authResults: %{public}s', data.authResults?.join(','));
hilog.info(0x0000, 'testTag', 'data dialogShownResults: %{public}s', data.dialogShownResults?.join(','));
}
});
} catch (err) {
hilog.error(0x0000, 'testTag', 'error: %{public}d %{public}s', err.code, err.message);
}
})
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.PERMISSION_SETTING indicates that the button is used to set permissions.
openType: functionalButtonComponentManager.OpenType.PERMISSION_SETTING,
label: 'Permission settings',
permissionListParam: ['ohos.permission.READ_CALENDAR', 'ohos.permission.WRITE_CALENDAR'],
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to PERMISSION_SETTING, the callback must be onPermissionSetting.
controller: new functionalButtonComponentManager.FunctionalButtonController().onPermissionSetting((err,
data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to set permission, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in setting permission ');
let result = data.permissionResult;
result.forEach(res => {
hilog.info(0x0000, 'testTag', 'data: %{public}s', String(res));
});
})
})
}
.width('100%')
}
.height('100%')
}
} onRequestSubscribeMessage(callback: AsyncCallback<RequestSubscribeMessageResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for the service updates authorization code button. An asynchronous callback is used to return the result.
This API can be used in atomic services. If the caller is not an atomic service, error code 10008 will be returned.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 6.0.0(20).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.
Since: 6.0.0(20)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<RequestSubscribeMessageResult> | Yes | Callback used to return the result. If the service updates authorization code button is successfully tapped, err is undefined, and data is the code that is returned. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Error codes
For details about the error codes, please refer to ArkTS Component Error Codes.
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.REQUEST_SUBSCRIBE_MESSAGE indicates that the button is used to obtain a service updates authorization code.
openType: functionalButtonComponentManager.OpenType.REQUEST_SUBSCRIBE_MESSAGE,
label: 'Get service updates by authorization code',
// The subSceneId parameter is mandatory to obtain a service updates authorization code.
subSceneId: '',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to REQUEST_SUBSCRIBE_MESSAGE, the callback must be onRequestSubscribeMessage.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onRequestSubscribeMessage((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to request subscribe message, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in requesting subscribe message');
// Process the service updates code.
let code = data.code;
})
})
}.width('100%')
}.height('100%')
}
} onFeedback(callback: AsyncCallback<void>): FunctionalButtonController
Registers click events of the FunctionalButton component for feedback. An asynchronous callback is used to return the result.
This API can be used in atomic services. If the caller is not an atomic service, error code 10008 will be returned.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 6.0.0(20).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Device behavior differences: This API is supported on phones, tablets, and PCs/2-in-1 devices. On other devices, it returns error code 801.
Since: 6.0.0(20)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<void> | Yes | Callback used to return the result. If the feedback button is successfully tapped, err is undefined. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Error codes
For details about the error codes, please refer to ArkTS Component Error Codes.
| ID | Error Message |
|---|---|
| 10008 | Not atomic service. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.FEEDBACK indicates that the button is used to open the feedback page.
openType: functionalButtonComponentManager.OpenType.FEEDBACK,
label: 'Feedback and complain',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to FEEDBACK, the callback must be onFeedback.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onFeedback((err) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to pull up the feedback page, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in pulling up the feedback page');
})
})
}.width('100%')
}.height('100%')
}
} onGetPhoneNumberAndRiskLevel(callback: Callback<GetPhoneNumberAndRiskLevelResult>): FunctionalButtonController
Registers click events of the FunctionalButton component for obtaining a user's mobile number and the corresponding risk level. A synchronous callback is used to return the result.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 6.0.2(22).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 6.0.2(22)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | Callback<GetPhoneNumberAndRiskLevelResult> | Yes | Callback function, which is used to return the authorization code for obtaining a user's mobile number and the corresponding risk level. |
Returns
| Type | Description |
|---|---|
| FunctionalButtonController | FunctionalButton component controller. |
Example:
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.GET_PHONE_NUMBER_AND_RISK_LEVEL indicates that the button is used to obtain a user's mobile number and the corresponding risk level.
openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER_AND_RISK_LEVEL,
label: 'Obtain mobile number and risk level',
// Adjust the button style.
styleOption: {
styleConfig: new functionalButtonComponentManager.ButtonConfig()
.fontSize(20)
}
},
// When OpenType is set to GET_PHONE_NUMBER_AND_RISK_LEVEL, the callback must be onGetPhoneNumberAndRiskLevel.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onGetPhoneNumberAndRiskLevel((data) => {
if (data?.errCode) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', data?.errCode, data?.errMsg);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in authentication');
// Authorization code processing.
let authorizationCode = data?.code;
})
})
}
.width('100%')
}
.height('100%')
}
} Provides methods for implementing custom attributes of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
type(value: ButtonType): ButtonConfig
Sets the display style attribute of FunctionalButton.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ButtonType | Yes | Button type. The default value is ButtonType.Capsule. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
stateEffect(value: boolean): ButtonConfig
Specifies whether to enable the pressed state effect when the FunctionalButton component is tapped.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | boolean | Yes | Indicates whether to display a visual effect when the button is tapped. The options are true (yes) and false (no). The default value is true. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
fontColor(value: ResourceColor): ButtonConfig
Sets the font color attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ResourceColor | Yes | Sets the font color. The default value is #ffffff. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
fontSize(value: Length): ButtonConfig
Sets the font size attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | Yes | Font size. If Length is of the number type, the unit fp is used. The default value is 16, in fp. The value cannot be a percentage. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
fontWeight(value: string | number | FontWeight): ButtonConfig
Sets the font weight attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | string | number | FontWeight | Yes | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is 400. A larger value indicates a larger font weight. For the string type, only strings that represent a number, for example, 400, and the following enumerated values of FontWeight are supported: bold, bolder, lighter, regular, medium, and normal. The default value is FontWeight.Normal. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
fontStyle(value: FontStyle): ButtonConfig
Sets the font style attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | FontStyle | Yes | Sets the font style. The default value is FontStyle.Normal. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
fontFamily(value: string | Resource): ButtonConfig
Sets the font attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | string | Resource | Yes | Font list. The default font is HarmonyOS Sans. The HarmonyOS Sans font and registered custom fonts are supported. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
width(value: Length): ButtonConfig
Sets the width attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | Yes | Width of the component. By default, the width required to fully hold the component content is used. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
height(value: Length): ButtonConfig
Sets the height attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | Yes | Height of the component. By default, the height required to fully hold the component content is used. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
size(value: SizeOptions): ButtonConfig
Sets the size attribute (width and height) of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | SizeOptions | Yes | Sets the size of the component. Example: { width: 20, height: 50 } The unit is vp. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
constraintSize(value: ConstraintSizeOptions): ButtonConfig
Sets the constraint size attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ConstraintSizeOptions | Yes | Constraint size of the component, which is used to limit the size range during component layout. constraintSize takes precedence over width and height. For details about the value, please refer to constraintSize. Default value: { minWidth: 0, maxWidth: Infinity, minHeight: 0, maxHeight: Infinity } The unit is vp. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
padding(value: Length | Padding): ButtonConfig
Sets the padding attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | Padding | Yes | Padding of the component. When the parameter is of the Length type, the setting takes effect for all four paddings. The default value is {left: 16, right: 16}. The unit is vp. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
margin(value: Length | Padding): ButtonConfig
Sets the margin attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | Padding | Yes | Margin. When the parameter is of the Length type, the setting takes effect for all four margins. The default value is 0. The unit is vp. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
backgroundColor(value: ResourceColor): ButtonConfig
Sets the background color attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ResourceColor | Yes | Background color of a component. The default value is #ff007dff. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
backgroundImage(src: ResourceStr, repeat?: ImageRepeat): ButtonConfig
Sets the background image attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| src | ResourceStr | Yes | Image address, which can be the address of an online or local image. SVG images are not supported. |
| repeat | ImageRepeat | No | Indicates whether the background image is repeated. By default, the background image is not repeated. If the set image has a transparent background and backgroundColor is set, the image is overlaid on the background color. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
backgroundImageSize(value: SizeOptions | ImageSize): ButtonConfig
Width and height of the background image of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | SizeOptions | ImageSize | Yes | Width and height of the background image. If the input is a {width: Length, height: Length} object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged. The value range of width and height is [0, +∞). The default value is ImageSize.Auto. NOTE A value less than 0 evaluates to the value 0. If height is set but width is not, the image width is adjusted based on the original aspect ratio of the image. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
backgroundImagePosition(value: Position | Alignment): ButtonConfig
Sets the display position attribute of the background image of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Position | Alignment | Yes | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component. The unit is vp. Default value: { x: 0, y: 0 } When x and y are set in percentage, the offset is calculated based on the width and height of the component. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
opacity(value: number | Resource): ButtonConfig
Sets the opacity of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | number | Resource | Yes | Opacity of a component. The value ranges from 0 to 1. The value 1 means opaque and is the default value, and 0 means completely transparent. NOTE A component can inherit the opacity setting from its parent component. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
border(value: BorderOptions): ButtonConfig
Sets the width, color, rounded corner radius, and style attributes of boarders for the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | BorderOptions | Yes | Unified border style. - width: border width. - color: border color. - radius: radius of the rounded corner of the border. - style: border style. NOTE The default value is 0, indicating that the border is not displayed. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
borderStyle(value: BorderStyle | EdgeStyles): ButtonConfig
Sets the border style attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | BorderStyle | EdgeStyles | Yes | Border style. The default value is BorderStyle.Solid. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
borderWidth(value: Length | EdgeWidths): ButtonConfig
Sets the border width attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | EdgeWidths | Yes | Border width of the component. This parameter cannot be set in percentage. The default value is 1, in vp. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
borderColor(value: ResourceColor | EdgeColors): ButtonConfig
Sets the border color attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ResourceColor | EdgeColors | Yes | Border color. The default value is #000000. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
borderRadius(value: Length | BorderRadiuses): ButtonConfig
Sets the border rounded corner radius attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | BorderRadiuses | Yes | Border radius. The percentage format is not supported. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
borderImage(value: BorderImageOption): ButtonConfig
Sets the border image attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | BorderImageOption | Yes | Border image or border gradient. This API is supported in ArkTS widgets. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
scale(value: ScaleOptions): ButtonConfig
Sets the zoom attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ScaleOptions | Yes | Scale ratio along the X axis, Y axis, and Z axis. The default value is 1.0. centerX and centerY are used to set the scale center point. Default value: { x: 1.0, y: 1.0, z: 1.0, centerX:'0.5', centerY:'0.5' } |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
align(value: Alignment): ButtonConfig
Sets the alignment attribute of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Alignment | Yes | Alignment mode of the component content. This attribute is valid only when the configured width or height exceeds the component size. The default value is Alignment.Center. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
markAnchor(value: Position): ButtonConfig
Sets the anchor for locating the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Position | Yes | Anchor of the component for moving the component with its top start edge as the reference point. The unit is vp. Default value: { x: 0, y: 1 } |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
offset(value: Position): ButtonConfig
Sets the offset coordinates of the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Position | Yes | Anchor of the component for moving the component with its top start edge as the reference point. The unit is vp. Default value: { x: 0, y: 1 } |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
enabled(value: boolean): ButtonConfig
Sets whether to disable the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | boolean | Yes | Indicates whether the security component is interactive. true: The component is interactive and responds to operations such as clicks. false: The component is non-interactive and does not respond to operations such as clicks. The default value is true. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
loadingColor(value: ResourceColor): ButtonConfig
Sets the color attribute of the LoadingProgress icon for the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | ResourceColor | Yes | Loading progress icon color. The default value is #FFFFFF. NOTE If this parameter is set to an abnormal value, the value #ff666666 is used. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
loadingWidth(value: Length): ButtonConfig
Sets the width attribute of the LoadingProgress icon for the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | Yes | Icon width. The default value is 20, in vp. Value range: (-∞, +∞) If this parameter is set to a negative value, the width cannot exceed the button area. If this parameter is set to a positive value, the width is not limited by the button area. Enter a proper value. NOTE The icon in LoadingProgress is always a square. The edge length is the smaller value between loadingWidth and loadingHeight. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
loadingHeight(value: Length): ButtonConfig
Sets the height attribute of the LoadingProgress icon for the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | Yes | Icon height. The default value is 20, in vp. Value range: (-∞, +∞) If this parameter is set to a negative value, the height cannot exceed the button area. If this parameter is set to a positive value, the height is not limited by the button area. Enter a proper value. NOTE The icon in LoadingProgress is always a square. The edge length is the smaller value between loadingWidth and loadingHeight. |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
loadingPadding(value: Length | Padding): ButtonConfig
Sets the padding attribute of the LoadingProgress icon for the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | Padding | Yes | Padding of the icon. The unit is vp. The default value is 0. Value range: (-∞, +∞) |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
loadingMargin(value: Length | Padding): ButtonConfig
Sets the margin attribute of the LoadingProgress icon for the FunctionalButton component.
Model restriction: This API can be used only in the stage model.
Atomic service API: This API can be used in atomic services since API version 4.1.0(11).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 4.1.0(11)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| value | Length | Padding | Yes | Margin of the icon. The unit is vp. The default value is {left: -2, right: 2}. Value range: (-∞, +∞) |
Returns
| Type | Description |
|---|---|
| ButtonConfig | ButtonConfig object. |
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { ButtonModifier, LoadingProgressModifier, TextModifier } from '@kit.ArkUI';
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
// Build an instance of the FunctionalButton component.
FunctionalButton({
params: {
// OpenType.GET_PHONE_NUMBER indicates that the button is used to verify a mobile number quickly.
openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER,
label: 'Verify mobile number',
// Adjust the button style.
styleOption: {
loading: true
},
textModifier: new TextModifier().fontColor(Color.Pink),
buttonModifier: new ButtonModifier().backgroundColor(Color.Green),
loadingProgressModifier: new LoadingProgressModifier().width(20).height(20)
},
// When OpenType is set to GET_PHONE_NUMBER, the callback must be onGetPhoneNumber.
controller: new functionalButtonComponentManager.FunctionalButtonController()
.onGetPhoneNumber((err, data) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to authenticate, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in authenticating');
// Process the authorization code.
let authorizationCode = data.code;
})
})
}
.width('100%')
}
.height('100%')
}
} 