Nativescript 的 Material 搜索栏实现

该模块在 iOS 和 Android 两个平台上实现了 Material 搜索栏。您可以使用它作为模态（全屏）或作为简单组件。它还会显示结果。

TabLayout 扩展了 nativescript GridLayout

export const searchAdapter: SearchCallback = {
    onCancel() {
        while (searchBar.results.length) {
            searchBar.results.pop();
        }
    },
    onClear() {
        while (searchBar.results.length) {
            searchBar.results.pop();
        }
    },
    onSubmit() {
        while (searchBar.results.length) {
            searchBar.results.pop();
        }
    },
    onText(text) {
        if (text && (text.startsWith("N") || text.startsWith("n"))) {
            for (let i = 0; i < 10; i++) { 
                searchBar.results.push({ label: text + " " + i })
            }
        } else {
            while (searchBar.results.length) {
                searchBar.results.pop();
            }
        }
    }
}
let searchBar =  page.getViewById("searchbar");
searchBar.register(searchAdapter)

<Page xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:sea="nativescript-nbmaterial-search">
 		<sea:SearchBarModal id="searchbar">
			<sea:SearchBarModal.barTemplate>
				<sea:SearchBar>
					<sea:SearchField/>
					<sea:SearchIcon text="arrow_back" action="cancel" position="left"/>
					<sea:SearchIcon text="mic" action="speech" position="right"/>
					<sea:SearchIcon text="clear" action="clear" position="right"/>
				</sea:SearchBar>
			</sea:SearchBarModal.barTemplate>
			<sea:SearchBarModal.resultTemplate>
				<StackLayout  paddingTop="15">
					<ListView items="{{results}}"  itemTap="searchTap">
						<ListView.itemTemplate>
							<Label text="{{label}}" textWrap="true" />
						</ListView.itemTemplate>
					</ListView>
				</StackLayout>
			</sea:SearchBarModal.resultTemplate>
		</sea:SearchBarModal>
</Page>

}

搜索栏具有以下接口

export interface SearchCallback {
    onClear();
    onCancel();
    onText(text: string);
    onSubmit(text: string);
}
export class SearchBar extends GridLayout {
    callbacks: SearchCallback[];
    register(c: SearchCallback);
    unregister(toDel: SearchCallback);
    cancel();
    clear();
    submit(text: string);
    changed(text: string);
    speech();
}
export class SearchBarModal extends View {
    hide();
    show();
    register(c: SearchCallback);
    unregister(toDel: SearchCallback);
    readonly opened: boolean;
    newPage: Page;
    results: ObservableArray<any>;
}

export class SearchField extends TextField {
    bar: SearchBar;
}
export class SearchIcon extends Label {
    position: "left" | "right";
    action: "submit" | "cancel" | "speech";
    bar: SearchBar;
} 

查看所有模块