• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.inputMethodList (Input Method List)
2<!--Kit: IME Kit-->
3<!--Subsystem: MiscServices-->
4<!--Owner: @illybyy-->
5<!--Designer: @andeszhang-->
6<!--Tester: @murphy1984-->
7<!--Adviser: @zhang_yixin13-->
8
9The **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.
10
11> **NOTE**
12>
13> The initial APIs of this module are supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
14
15## Modules to Import
16
17```ts
18import { InputMethodListDialog } from '@kit.IMEKit';
19```
20
21## Child Components
22
23Not supported
24
25## Attributes
26The [universal attributes](../apis-arkui/arkui-ts/ts-component-general-attributes.md) are not supported.
27
28## InputMethodListDialog
29
30InputMethodListDialog({controller: CustomDialogController, patternOptions?: PatternOptions})
31
32Implements a dialog box showing the input method list.
33
34**Decorator type**: @CustomDialog
35
36**System capability**: SystemCapability.MiscServices.InputMethodFramework
37
38**Parameters**
39
40| Name| Type| Mandatory| Decorator| Description|
41| -------- | -------- | -------- | -------- | -------- |
42| controller | [CustomDialogController](../apis-arkui/arkui-ts/ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| - | Controller for the dialog box showing the input method list.|
43| patternOptions | [PatternOptions](#patternoptions) | No| - | Input method pattern options (for the default input method only).|
44
45## PatternOptions
46
47**System capability**: SystemCapability.MiscServices.InputMethodFramework
48
49| Name| Type| Read-Only| Optional| Description|
50| -------- | -------- | -------- | -------- | -------- |
51| defaultSelected | number | No| Yes| Optional. Default selected pattern.|
52| patterns   | Array<[Pattern](#pattern)> | No| No| Mandatory. Resource of the pattern option.|
53| action | (index: number) => void | No| No| Mandatory. Callback invoked when the pattern option changes.|
54
55## Pattern
56
57**System capability**: SystemCapability.MiscServices.InputMethodFramework
58
59| Name| Type| Read-Only| Optional| Description|
60| -------- | -------- | -------- | -------- | -------- |
61| icon | [Resource](../apis-arkui/arkui-ts/ts-types.md#resource) | No| No| Mandatory. Default icon.|
62| selectedIcon | [Resource](../apis-arkui/arkui-ts/ts-types.md#resource) | No| No| Mandatory. Icon for the selected option.|
63
64##  Events
65
66The [universal events](../apis-arkui/arkui-ts/ts-component-general-events.md) are not supported.
67
68##  Example
69
70```ts
71import { Pattern, PatternOptions } from '@kit.IMEKit';
72
73@Entry
74// Configure the component.
75@Component
76struct SettingsItem {
77  @State defaultPattern: number = 1;
78  private oneHandAction: PatternOptions = {
79    defaultSelected: this.defaultPattern,
80    patterns: [
81      {
82        icon: $r('app.media.hand_icon'),
83        selectedIcon: $r('app.media.hand_icon_selected')
84      },
85      {
86        icon: $r('app.media.hand_icon1'),
87        selectedIcon: $r('app.media.hand_icon_selected1')
88      },
89      {
90        icon: $r('app.media.hand_icon2'),
91        selectedIcon: $r('app.media.hand_icon_selected2'),
92      }],
93    action:(index: number)=>{
94      console.info(`pattern is changed, current is ${index}`);
95      this.defaultPattern = index;
96    }
97  };
98  private listController: CustomDialogController = new CustomDialogController({
99    builder: InputMethodListDialog({ patternOptions: this.oneHandAction }),
100    customStyle: true,
101    maskColor: '#00000000'
102  });
103
104  build() {
105    Column() {
106      Flex({ direction: FlexDirection.Column,
107        alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
108        Text("Input Method List").fontSize(20)
109      }
110    }
111    .width("13%")
112    .id('bindInputMethod')
113    .onClick((event?: ClickEvent) => {
114      this.listController.open();
115    })
116  }
117}
118```
119Effect
120![Effect](./figures/effect.png)
121