5.6-搜索栏SearchHandler

5.6-搜索栏SearchHandler

一、搜索栏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>