Как добавить SearchView в ActionBar на NativeScript Android (например, WhatsApp)?

Question

Я хотел бы добавить SearchView в ActionBar на NativeScript Android .

То же, что показано в Руководстве по проектированию материалов и используется в WhatsApp при нажатии на значок поиска.

Ниже приведены примеры, которые я не могу «преобразовать» для NativeScript:

Как реализовать SearchView в ActionBar в Android

Android: ДобавитьsearchView на панели действий

Android - Использование SearchView на панели инструментов / панели действий с «стилем Gmail» 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();
    }
}

Пример игровой площадки