我们在HarmonyOS开发中，如何一个带有搜索功能的列表？

Question

我们在HarmonyOS开发中，如何一个带有搜索功能的列表？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以使用TextField组件与ListView组件结合来实现带有搜索功能的列表。

@Entry
@Component
struct SearchableListAbility {
  @State private searchText: string = '';
  @State private filteredItems: string[] = [];

  build() {
    Column() {
      TextField(this.searchText).placeholder('Search...');
      ListView(this.filteredItems)
        .itemCreator((item) => Text(item).fontSize(18))
        .itemSize(50);

      // Simulate filtering logic
      this.filteredItems = this.searchText ? ['Item 1', 'Item 2', 'Item 3'].filter((item) => item.includes(this.searchText)) : ['Item 1', 'Item 2', 'Item 3'];
    }
  }
}

参见：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。