• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023-2025 Fujian Newland Auto-ID Tech.Co.,Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15import { InputDeviceInfo } from '../model/InputDeviceInfo';
16import { getDeviceList } from '../util/InputDeviceUtil';
17import { InputDeviceDataDialog } from '../components/devicemanager/InputDeviceDataDialog';
18import InputDevice from '../util/InputDeviceUtil';
19
20@Component
21struct InputDeviceList {
22  mIsShowIcon: boolean = false;
23  mIsShowStyle: boolean = false;
24  @Link mInputDevices: InputDeviceInfo[];
25  onClickItem: (deviceInfo: InputDeviceInfo) => void = () => {};
26
27  @Builder CustomDivider() {
28    Divider()
29      .strokeWidth('1px')
30      .color($r('sys.color.ohos_id_color_subheading_separator'))
31      .margin({
32        bottom: px2vp(8)
33      })
34  }
35
36  build() {
37    Column({ space: 12 }) {
38      ForEach(this.mInputDevices, (item: InputDeviceInfo, index: number) => {
39        Row() {
40          if (this.mIsShowIcon) {
41            Image(item.icon_source)
42              .width(24)
43              .height(24)
44              .objectFit(ImageFit.Contain)
45              .margin({
46                right: px2vp(24)
47              })
48          }
49          Column({ space: 4 }) {
50            Row() {
51              Column({ space: 4 }) {
52                Text(item.name)
53                  .fontColor($r('sys.color.ohos_id_color_text_primary'))
54                  .fontSize($r('sys.float.ohos_id_text_size_body1'))
55                  .maxLines(1)
56                  .textOverflow({
57                    overflow: TextOverflow.Ellipsis
58                  })
59                  .fontWeight(FontWeight.Medium)
60
61                Text(item.id.toString())
62                  .fontColor($r('app.color.battery_info_value_text'))
63                  .fontSize($r('sys.float.ohos_id_text_size_body2'))
64              }
65              .width('70%')
66              .justifyContent(FlexAlign.Center)
67              .alignItems(HorizontalAlign.Start)
68
69              Blank()
70              if (this.mIsShowStyle) {
71                Text(item.connect ? $r('app.string.input_device_connect') : $r('app.string.input_device_disconnect'))
72                  .fontColor($r('app.color.battery_info_value_text'))
73                  .fontSize($r('sys.float.ohos_id_text_size_body2'))
74              }
75            }
76            .width('100%')
77            .height(47)
78            .justifyContent(FlexAlign.Start)
79            .alignItems(VerticalAlign.Center)
80
81            if (index != this.mInputDevices?.length - 1) {
82              this.CustomDivider()
83            }
84
85          }
86          .width(this.mIsShowStyle ? '100%' : '90%')
87        }
88        .height(48)
89        .justifyContent(FlexAlign.Center)
90        .alignItems(VerticalAlign.Center)
91        .onClick(() => {
92          if (this.onClickItem) {
93            this.onClickItem(item)
94          }
95        })
96      }, (item: InputDeviceInfo) => JSON.stringify(item))
97    }
98    .padding(px2vp(24))
99    .backgroundColor($r('sys.color.ohos_id_color_list_card_bg'))
100    .border({
101      radius: $r('sys.float.ohos_id_corner_radius_default_l')
102    })
103  }
104}
105
106/**
107 * 输入设备
108 */
109@Preview
110@Component
111export struct InputDeviceManager {
112  @State mInputDevices: InputDeviceInfo[] = []
113  @State mCurDevice: InputDeviceInfo | null = null;
114  @State mInputDeviceList: InputDeviceInfo[] = []
115  @State mIsListener: boolean = false
116  @State mIsRefreshing: boolean = false
117  dialogController: CustomDialogController = new CustomDialogController({
118    builder: InputDeviceDataDialog({
119      mDeviceInfo: $mCurDevice
120    }),
121    autoCancel: true,
122    alignment: DialogAlignment.Bottom,
123    offset: {
124      dx: 0,
125      dy: -35
126    }
127  })
128
129  aboutToAppear() {
130    InputDevice.unregisterChange()
131    // 获取设备列表
132    this.getDevices()
133  }
134
135  aboutToDisappear() {
136    InputDevice.unregisterChange()
137    this.mInputDevices = []
138    this.mInputDeviceList = []
139    this.mCurDevice = null
140    this.mIsListener = false
141  }
142
143  getDevices() {
144    getDeviceList((data: InputDeviceInfo[]) => {
145      this.mInputDevices = data
146    })
147  }
148
149  onDeviceChange(devices: InputDeviceInfo[]) {
150    this.mInputDeviceList = devices
151    this.getDevices()
152  }
153
154  onClickItem(deviceInfo: InputDeviceInfo) {
155    this.mCurDevice = deviceInfo
156    if (this.dialogController != undefined) {
157      this.dialogController.open()
158    }
159  }
160
161  build() {
162    Refresh({
163      refreshing: $$this.mIsRefreshing,
164      friction: 100
165    }) {
166      Scroll() {
167        Column({ space: 12 }) {
168          Column() {
169            Row() {
170              Text($r('app.string.input_device_change_title'))
171                .fontColor($r('sys.color.ohos_id_color_text_primary'))
172                .fontSize($r('sys.float.ohos_id_text_size_body1'))
173                .fontWeight(FontWeight.Medium)
174              Blank()
175              Toggle({
176                type: ToggleType.Switch,
177                isOn: this.mIsListener
178              })
179                .width(42)
180                .onChange((isOn) => {
181                  this.mIsListener = isOn
182                  if (isOn) {
183                    InputDevice.registerChange((devices: InputDeviceInfo[]): void => this.onDeviceChange(devices));
184                  } else {
185                    InputDevice.unregisterChange()
186                  }
187                })
188            }
189            .width('100%')
190          }
191          .padding(px2vp(24))
192          .backgroundColor($r('sys.color.ohos_id_color_list_card_bg'))
193          .border({
194            radius: $r('sys.float.ohos_id_corner_radius_default_l')
195          })
196
197          if (this.mIsListener) {
198            Text($r('app.string.input_device_status'))
199              .fontColor($r('sys.color.ohos_id_color_text_secondary'))
200              .fontSize($r('sys.float.ohos_id_text_size_body2'))
201              .fontWeight(FontWeight.Regular)
202              .fontFamily('HarmonyHeiTi')
203
204            InputDeviceList({
205              mInputDevices: $mInputDeviceList,
206              mIsShowIcon: false,
207              mIsShowStyle: true
208            })
209          }
210
211          Text($r('app.string.input_device_list_title'))
212            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
213            .fontSize($r('sys.float.ohos_id_text_size_body2'))
214            .fontWeight(FontWeight.Regular)
215            .fontFamily('HarmonyHeiTi')
216
217          InputDeviceList({
218            mInputDevices: $mInputDevices,
219            mIsShowIcon: true,
220            mIsShowStyle: false,
221            onClickItem: (deviceInfo: InputDeviceInfo): void => this.onClickItem(deviceInfo)
222          })
223
224        }.justifyContent(FlexAlign.Center)
225        .alignItems(HorizontalAlign.Start)
226        .margin(px2vp(24))
227      }
228      .width('100%')
229      .scrollBar(BarState.Off)
230      .id('scrollInputDevice')
231    }
232    .width('100%')
233    .onRefreshing(() => {
234      this.mIsRefreshing = true
235      this.getDevices()
236      setTimeout(() => {
237        this.mIsRefreshing = false
238      }, 500)
239    })
240  }
241}