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

Question

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

与《材料设计指南》中显示的相同，并在单击搜索图标时在WhatsApp上使用。

下面是我无法为NativeScript进行“转换”的示例：

How to implement SearchView in ActionBar in Android

Android: Add searchView on the Action Bar

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