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

Question

我想在 NativeScript Android.

的 ActionBar 中添加 SearchView

Material 设计指南中显示的内容与单击搜索图标时在 WhatsApp 上使用的内容相同。

以下是我无法 "convert" NativeScript 的示例：

How to implement SearchView in ActionBar in Android

Android - Using SearchView in Toolbar/ActionBar with "Gmail style" ListView

谢谢:)

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

ViewModel

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

    constructor() {
        super();
    }
}

Playground Sample