按列表搜索 Xamarin 表单 (MVVM)答案

【问题标题】：Search by list Xamarin Forms (MVVM)按列表搜索 Xamarin 表单 (MVVM)
【发布时间】：2018-02-16 22:25:23
【问题描述】：

我在搜索记录时遇到问题。当您键入字符时，列表不会更新。

目前我正在使用绑定登录进行测试，但我将使用带有照片的 Uri。

我的视图模型

private ObservableCollection<FollowerModel> _followerItems = null;
public ObservableCollection<FollowerModel> FollowerItems
{
    get => _followerItems;
    set
    {
        _followerItems = value;
        OnPropertyChanged();
        OnPropertyChanged();
    }
}

private FollowerModel _followerItem = null;
public FollowerModel FollowerItem
{
    get => _followerItem;
    set
    {
        _followerItem = value;
        OnPropertyChanged();
        OnFollowerItemChanged();
    }
}

// ...

private  void OnSearchPhrase()
{
    var searchPhrase = _searchPhrase.Trim();

    if (searchPhrase.Length < SEARCH_PHRASE_MIN_LENGTH) return; // SEARCH_PHRASE_MIN_LENGTH = 3

    FollowerItems.Where(name => name.Login.Contains(searchPhrase));
}

我的页面视图

<flv:FlowListView SeparatorVisibility="None" HasUnevenRows="true" FlowItemTappedCommand="{Binding FollowerItemCommand}" FlowColumnMinWidth="100" FlowItemsSource="{Binding FollowerItems}">
    <flv:FlowListView.FlowColumnTemplate>
        <DataTemplate>
            <Grid Padding="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="98" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="98" />
                </Grid.ColumnDefinitions>
                <Label Text="{Binding Login}" /> 
                </Image>-->
            </Grid>
        </DataTemplate>
    </flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>

【问题讨论】：

标签： search mvvm xamarin.forms

【解决方案1】：

首先在你的 xaml 中添加一个搜索栏

 <SearchBar Placeholder="Search" Text="{Binding SearchText}"  />

然后为它创建一个 Bindable 属性

private string _searchText;
public string SearchText
{
    get { return _searchText; }
    set
    {
        _searchText = value;
        SearchUserText(_searchText);
        RaisePropertyChanged("SearchText");
    }
}

然后创建一个函数SearchUserText，它将监听文本并更改您的列表

   public void SearchUserText(string text)
    {
          var searchPhrase = _searchPhrase.Trim();

            if (searchPhrase.Length < SEARCH_PHRASE_MIN_LENGTH) return; // SEARCH_PHRASE_MIN_LENGTH = 3

            FollowerItems.Where(name => name.Login.Contains(searchPhrase));

    }

注意：不要忘记在模型上添加 getter 和 setter FollowerModel

示例：

public class FollowerModel : BindableBase
{
    private int _id;
    public int Id
    {
        get { return _id; }
        set { SetProperty(ref _id, value); }
    }

    private string _name;
    public string Name
    {
        get { return _name; }
        set { SetProperty(ref _name, value); }
    }
}

【讨论】：

如果可行，它是比我更好的解决方案，因为它更直接。

【解决方案2】：

首先，您需要两个 ObservableCollections：

一个包含所有项目的ObservableCollection
一个ObservableCollection，其中包含过滤的项目

过滤后的ObservableCollection 将是绑定到您的控件的那个。因此，您只需要一个用于所有项目的私有变量和一个用于过滤项目的公共属性：

private ObservableCollection<FollowerModel> _allFollowerItems;
private ObservableCollection<FollowerModel> _followerItems;

public ObservableCollection<FollowerModel> FollowerItems
{
    get { return _followerItems}
    set
    {
        _followerItems = value;
        RaisePropertyChanged();
    }
}

我注意到的另一件事是您使用的是OnPropertyChanged()。已弃用，请改用 RaisePropertyChanged()。

在您的OnSearchPhrase() 方法中，如果searchPhrase.Length < SEARCH_PHRASE_MIN_LENGTH，您希望将FollowerItems 设置为原始项目(_allFollowerItems)。否则，您将对其进行过滤：

private void OnSearchPhrase()
{
    var searchPhrase = _searchPhrase.Trim();

    if (searchPhrase.Length < SEARCH_PHRASE_MIN_LENGTH)
    {
        FollowerItems = _allFollowerItems;
    }
    else
    {
        FollowerItems = new ObservableCollection<FollowerModel>(_allFollowerItems.Where(name => name.Login.ToLower().Contains(searchPhrase.ToLower())));
    }
}

请注意，我在字符串中添加了ToLower()，以便进行更加用户友好的搜索。如果打算进行区分大小写的搜索，只需将其删除即可。

不要忘记在您现在装载物品的地方设置一次FollowerItems和_allFollowerItems：

FollowerItems = new ObservableCollection(items); _allFollowerItems = new ObservableCollection(items);

【讨论】：