如何在OpenHarmony ListView中實現多選功能

在 OpenHarmony 的 ListView 中實現多選功能，可以通過以下步驟來完成：

1. 設置 ListView 的選擇模式： 首先，確保你的 ListView 組件支持多選。你需要在 ListView 的屬性中設置 selectionMode 為 multiple。

   <ListView
       id="listView"
       selectionMode="multiple"
       // 其他屬性...
   >
       <!-- 列表項模板 -->
       <ListTemplate>
           <Text
               text="{{item.name}}"
               // 其他屬性...
           />
       </ListTemplate>
   </ListView>
   

2. 處理選擇事件： 你需要監聽 ListView 的選擇事件，以便在用戶選擇或取消選擇項目時執行相應的操作。

   const listView = document.getElementById('listView');
   listView.on('itemclick', (event) => {
       const selectedItem = event.item;
       const isSelected = event.selected;
   
       if (isSelected) {
           console.log(`Item selected: ${selectedItem.name}`);
       } else {
           console.log(`Item deselected: ${selectedItem.name}`);
       }
   });
   

3. 獲取選中的項目： 如果你需要在某個時刻獲取所有選中的項目，可以使用 ListView 的 getSelection 方法。

   function getSelectedItems() {
       const selection = listView.getSelection();
       return selection.map(item => item.model);
   }
   
   // 在需要的時候調用
   const selectedItems = getSelectedItems();
   console.log('Selected items:', selectedItems);
   

4. 更新 UI 以反映選擇狀態： 你可能還需要在列表項的模板中添加一些邏輯，以便在選擇狀態改變時更新 UI。例如，你可以根據項目是否被選中來改變文本顏色或背景顏色。

   <ListTemplate>
       <Text
           text="{{item.name}}"
           style="{{item.isSelected ? 'color: blue;' : 'color: black;'}}"
           // 其他屬性...
       />
   </ListTemplate>
   

   并在 JavaScript 中更新 isSelected 屬性：

   listView.on('itemclick', (event) => {
       const selectedItem = event.item;
       selectedItem.isSelected = !selectedItem.isSelected;
       listView.render(); // 重新渲染 ListView 以更新 UI
   });
   

通過以上步驟，你可以在 OpenHarmony 的 ListView 中實現多選功能，并根據需要處理選擇事件和更新 UI。