一、搜索栏SearchHandler的基本原理,如下图所示
- 搜索栏主要有两部分组成:UI控件和SearchHandler派生类。其中UI控件负责数据展示,并提供查询搜索和点击选择项的UI交互功能;SearchHandler派生类响应控件的查询和点击事件,并提供数据源、筛选结果和导航跳转功能。
- SearchHandler派生类有两个重写方法:OnQueryChanged和OnItemSelected。当UI控件输入查询关键词时,触发OnQueryChanged方法,在方法中对数据源进行筛选,并将筛选结果重新渲染到UI控件。当UI控件点击选择后,触发OnItemSelected方法,将方法中进行导航跳转。
二、搜索栏的使用
1、定义SearchHandler派生类,保存在Controls文件夹下
public class MonkeySearchHandler:SearchHandler { //数据源,本例硬编码写死 public List<Monkey> Monkeys { get; set; } = new List<Monkey> { new Monkey { Name="zs",Age=18 }, new Monkey { Name="ls",Age=28 }, new Monkey { Name="ww",Age=38 }, new Monkey { Name="zl",Age=23 }, new Monkey { Name="qq",Age=29 } }; //根据UI控件查询关键词筛选数据源 //参数oldValue为旧的查询关键词,newValue为新的查询关键词 protected override void OnQueryChanged(string oldValue, string newValue) { base.OnQueryChanged(oldValue, newValue); if (string.IsNullOrWhiteSpace(newValue)) { ItemsSource = null; } else { ItemsSource = Monkeys .Where(m => m.Name.ToLower().Contains(newValue.ToLower())) .ToList<Monkey>(); } } //根据UI控件选择项进行导航,使用查询参数传递路由参数。导航跳转的MonkeyDetail页面,如何接收参数,详见导航章节 //参数item为选择项 protected override async void OnItemSelected(object item) { base.OnItemSelected(item); await Task.Delay(1000); await Shell.Current.GoToAsync($"monkeydetail?name={((Monkey)item).Name}&age={((Monkey)item).Age}"); } }
2、在XAML页面中使用搜索栏,本例中为Monkey页面
<ContentPage ...... xmlns:c="clr-namespace:MauiApp13.Controls"> <!--c:MonkeySearchHandler类似于一个集合控件,ItemSource由MonkeySerachHandler.cs提供--> <!--ItemTemplate提供集合项目的视觉模板--> <Shell.SearchHandler> <c:MonkeySearchHandler Placeholder="请输入Monkey名称" ShowsResults="True"> <c:MonkeySearchHandler.ItemTemplate> <DataTemplate> <HorizontalStackLayout> <Label Text="{Binding Name}" /> <Label Text="{Binding Age}" /> </HorizontalStackLayout> </DataTemplate> </c:MonkeySearchHandler.ItemTemplate> </c:MonkeySearchHandler> </Shell.SearchHandler> ...... </ContentPage>
3、UI控件的其它属性设置
<!--SearchBoxVisibility,搜索栏是否可见,Hidden/Collapsible/Expanded--> <!--Keyboard,弹出键盘样式,Default /Chat/Email/Numeric/Plain/Telephone/Text/Url--> <Shell.SearchHandler> <c:MonkeySearchHandler Placeholder="请输入Monkey名称" SearchBoxVisibility="Hidden" Keyboard="Default" ShowsResults="True"> <c:MonkeySearchHandler.ItemTemplate> <DataTemplate> <HorizontalStackLayout> <Label Text="{Binding Name}" /> <Label Text="{Binding Age}" /> </HorizontalStackLayout> </DataTemplate> </c:MonkeySearchHandler.ItemTemplate> </c:MonkeySearchHandler> </Shell.SearchHandler>
标签:控件,Monkey,6.6,UI,MAUI,new,SearchHandler,Name From: https://www.cnblogs.com/functionMC/p/17018076.html