如何在 NativeScript Android(如 WhatsApp)上的 ActionBar 中添加 SearchV

Question

我想在NativeScript Android上的 ActionBar 中添加一个 SearchView。

在材料设计指南中显示的相同内容，当您单击搜索图标时，也会在WhatsApp上使用。

以下是我无法"转换"为NativeScript的示例：

如何在Android的ActionBar中实现SearchView

安卓：在操作栏上添加搜索视图

Android - 在工具栏/操作栏中使用带有"Gmail样式"列表视图的SearchView

谢谢:)

Answer 1

您将搜索栏添加到操作栏并切换其可见性，就像您链接的示例一样。

.XML

<ActionBar title="Home">
<SearchBar visibility="{{ show, show ? 'visible' : 'hidden' }}"
clear="onToggleSearchBar">
</SearchBar>
<ActionItem visibility="{{ show, show ? 'hidden' : 'visible' }}"
text="Search" tap="onToggleSearchBar"></ActionItem>
</ActionBar>

TS

export function onToggleSearchBar(args: EventData) {
(args.object as any).bindingContext.show = !(args.object as any).bindingContext.show;
}

视图模型

export class HomeViewModel extends Observable {
@ObservableProperty() show: boolean = false;
constructor() {
super();
}
}

游乐场样本