android - 如何在NativeScript Android（如WhatsApp）的ActionBar中添加SearchView？(How to add a SearchView in an ActionBar on NativeScript Android (like WhatsApp)?)

Question

I would like to add a SearchView in an ActionBar on NativeScript Android .

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

The same shown in the Material Design Guide and used on WhatsApp when you click on the search icon.

(单击“材料设计指南”中显示的内容，并在单击搜索图标时在WhatsApp上使用该内容。)

Below are examples that I can not "convert" for NativeScript:

(下面是无法“转换” NativeScript的示例：)

How to implement SearchView in ActionBar in Android

(如何在Android的ActionBar中实现SearchView)

Android: Add searchView on the Action Bar

(Android：在操作栏上添加searchView)

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

(Android-使用“ Gmail样式” ListView在工具栏/ ActionBar中使用SearchView)

Thank you :)

(谢谢 ：）)

  ask by Benjamin Grand translate from so

Answer 1

You will add SearchBar to ActionBar and toggle it's visibility just like the example you linked.

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

XML

(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

(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

(游乐场样本)