如何在 NativeScript Android（如 WhatsApp）的 ActionBar 中添加 SearchView？

Question

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

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

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

Android中ActionBar中SearchView的实现方法

Android：在操作栏上添加 searchView

Android - 在工具栏/操作栏中使用带有“Gmail 样式”ListView 的 SearchView

谢谢：）

Answer 1

您将 SearchBar 添加到 ActionBar 并切换它的可见性，就像您链接的示例一样。

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();
    }
}

游乐场样本