@ohos.inputMethodList (Input Method List)

The inputMethodList module is oriented to system applications and input method applications. It provides APIs for implementing an input method list. This list displays the default input method subtypes and third-party input methods. Users can use this list to switch from the default input method to another input method.

NOTE

This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.

Modules to Import

import { InputMethodListDialog } from '@kit.IMEKit';

Child Components

Not supported

Attributes

The universal attributes are not supported.

InputMethodListDialog

InputMethodListDialog({controller: CustomDialogController, patternOptions?: PatternOptions})

Implements a dialog box showing the input method list.

Decorator type: @CustomDialog

System capability: SystemCapability.MiscServices.InputMethodFramework

Parameters

Name	Type	Mandatory	Decorator	Description
controller	CustomDialogController	Yes	-	Controller for the dialog box showing the input method list.
patternOptions	PatternOptions	No	-	Input method pattern options (for the system input method only).

PatternOptions

System capability: SystemCapability.MiscServices.InputMethodFramework

Name	Type	Read-Only	Optional	Description
defaultSelected	number	No	Yes	Optional. Default selected pattern.
patterns	Array<Pattern>	No	No	Mandatory. Resource of the pattern option.
action	(index: number) => void	No	No	Mandatory. Callback invoked when the pattern option changes.

Pattern

System capability: SystemCapability.MiscServices.InputMethodFramework

Name	Type	Read-Only	Optional	Description
icon	Resource	No	No	Mandatory. Default icon.
selectedIcon	Resource	No	No	Mandatory. Icon for the selected option.

Events

The universal events are not supported.

Example

import { Pattern, PatternOptions } from '@kit.IMEKit';

@Entry
// Configure the component.
@Component
struct SettingsItem {
  @State defaultPattern: number = 1;
  private oneHandAction: PatternOptions = {
    defaultSelected: this.defaultPattern,
    patterns: [ // Icons in patterns can be used only after the corresponding icon resources have been added to the resource directory of the project.
      {
        icon: $r('app.media.hand_icon'), // Icon resource for the input method mode option, for example, the icon for the one-handed mode.
        selectedIcon: $r('app.media.hand_icon_selected') // Icon resource for the input method mode option in the selected state, for example, the icon for the one-handed mode in the selected state.
      },
      {
        icon: $r('app.media.hand_icon1'),
        selectedIcon: $r('app.media.hand_icon_selected1')
      },
      {
        icon: $r('app.media.hand_icon2'),
        selectedIcon: $r('app.media.hand_icon_selected2'),
      }],
    action:(index: number)=>{
      console.info(`pattern is changed, current is ${index}`);
      this.defaultPattern = index;
    }
  };
  private listController: CustomDialogController = new CustomDialogController({
    builder: InputMethodListDialog({ patternOptions: this.oneHandAction }),
    customStyle: true,
    maskColor: '#00000000'
  });

  build() {
    Column() {
      Flex({ direction: FlexDirection.Column,
        alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Text("Input Method List").fontSize(20)
      }
    }
    .width("13%")
    .id('bindInputMethod')
    .onClick((event?: ClickEvent) => {
      this.listController.open();
    })
  }
}

Effect