This module provides logic management for the FunctionalInput component, helping HarmonyOS apps and atomic services quickly display the region selection page for users.
Since: 5.1.0(18)
This enumeration defines the function type of the province/city/district selector.
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.1.0(18).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 5.1.0(18)
| Name | Value | Description |
|---|---|---|
| SELECT_DISTRICT | 0 | The default value is 0, indicating the province/city/district selector. |
Defines the parameters of the FunctionalInput component, including the type, style, and icon of the province/city/district selector.
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.1.0(18).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 5.1.0(18)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| inputType | InputType | No | No | Input component function scenario. The default value is SELECT_DISTRICT. |
| textInputValue | TextInputOptions | No | No | Prompt and default input text displayed when the user does not input any content in the TextInput component. |
| inputAttributeModifier | TextInputModifier | No | Yes | Event and attribute settings of the component. This setting supports some universal events, universal attributes, TextInput events, and TextInput attributes. If the icon parameter is left empty, this parameter has no default value. If the icon parameter is not empty, the default value of the parameter is as follows: padding({ top: 8, bottom: 8, left: 16, right: 48, }) If the device language is set to a mirrored language, the default value is as follows: padding({ top: 8, bottom: 8, left: 48, right: 16, }) NOTE This parameter does not work for the following events and attributes: Events: onFocus, onBlur, onClick, onKeyEvent, onKeyPreIme, onSubmit, onEditChange, onCopy, onCut, onPaste, onTextSelectionChange, onSecurityStateChange, onWillInsert, onDidInsert, onWillDelete, onDidDelete Attributes: focusable, tabIndex, defaultFocus, groupDefaultFocus, focusOnTouch, focusBox, type, enterKeyType, caretColor, copyOption, showPasswordIcon, selectedBackgroundColor, caretStyle, caretPosition, passwordIcon, enableKeyboardOnFocus, customKeyboard, passwordRules, selectAll, contentType, showPassword |
| icon | Resource | No | Yes | Icon settings of the component. Supported types are symbol and image. By default, there is no icon displayed. |
| iconImgModifier | ImageModifier | No | Yes | Event and style settings of the icon of the image type. This parameter is used when icon is set to image. iconImgModifier .size({ width: 24, height: 24 }) .margin({ start: 8, end: 16, }) |
| iconSymbolModifier | SymbolGlyphModifier | No | Yes | Event and style settings of the icon of the symbol type. This parameter is used when icon is set to symbol. iconSymbolModifier .fontColor([$r('sys.color.ohos_id_color_fourth')]) .margin({ start: 8, end: 16 }) |
Response body returned after region selection.
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.1.0(18).
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.1.0(18)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| inputContent | string | No | No | Selected region information. Format: province, city, district, and street. |
| districtSelectResult | sceneMap.DistrictSelectResult | No | No | Selected district information. |
FunctionalInput 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 5.1.0(18).
System capability: SystemCapability.AtomicserviceComponent.UIComponent
Since: 5.1.0(18)
onSelectDistrict(callback: AsyncCallback<DistrictSelectResult>): FunctionalInputController
Registers click events of the FunctionalInput component for implementing region selection. An asynchronous callback is used to return the result.
This API depends on Map Kit. For details, please refer to selectDistrict.
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.1.0(18).
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.1.0(18)
Parameters
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| callback | AsyncCallback<DistrictSelectResult> | Yes | Callback used to return the result. If the region selection is successful, err is undefined, and data is the region selection result. Otherwise, err is an error object. |
Returns
| Type | Description |
|---|---|
| FunctionalInputController | FunctionalInput component controller. |
Example:
import { FunctionalInput, functionalInputComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { SymbolGlyphModifier, TextInputModifier } from '@kit.ArkUI';
@Entry
@Component
struct Index {
@State inputContent: string = '';
build() {
Column() {
Row() {
Text('Region').width(64)
// Build an instance of the FunctionalInput component.
FunctionalInput({
params: {
// InputType.SELECT_DISTRICT indicates the province/city/district selector input type.
inputType: functionalInputComponentManager.InputType.SELECT_DISTRICT,
textInputValue: {
text: this.inputContent,
placeholder: 'Province, city, district, street'
},
// Adjust the TextInput style.
inputAttributeModifier: new TextInputModifier()
.fontColor($r('sys.color.ohos_id_color_badge_red'))
.onChange((value) => {
if (value !== this.inputContent) {
this.inputContent = value;
}
}),
// Place the icon at the end.
icon: $r('sys.symbol.xmark'),
// Set the event and style of the icon.
iconSymbolModifier: new SymbolGlyphModifier()
.onClick(() => {
this.inputContent = '';
})
.fontSize(32)
},
// When InputType is set to SELECT_DISTRICT, the callback must be onSelectDistrict.
controller: new functionalInputComponentManager.FunctionalInputController().onSelectDistrict((err,
data: functionalInputComponentManager.DistrictSelectResult) => {
if (err) {
// Error processing.
hilog.error(0x0000, 'testTag', 'Failed to select district, error: %{public}d %{public}s', err.code, err.message);
return;
}
// Success processing.
hilog.info(0x0000, 'testTag', 'succeeded in selecting district');
// Display the selected region information in the input component.
this.inputContent = data.inputContent;
})
})
.layoutWeight(1)
}.height('100%')
}.width('100%')
}
}