Xamarin Forms ListView 元素被禁用答案

【问题标题】：Xamarin Forms ListView elements are disabledXamarin Forms ListView 元素被禁用
【发布时间】：2022-01-22 05:05:40
【问题描述】：

在我的应用程序中，我使用Shell tabs。其中一个选项卡是包含 ListView 的 ContentPage。

当我单击 ListView 的任何元素时，我正在导航到另一个视图，并且在导航返回后 ListView 元素被禁用（参见底部链接中的图像）。

我该如何解决？

核实的事实：

bug only 出现在 iOS 上，应用程序在 Android 上正常运行
ListView 的 Selected 元素为空
该错误与传递对 ListView 的 ObservableCollection 元素的引用无关

我有逃逸的bug场景，但这不是问题的救赎：

当应用初始化时点击另一个标签页并返回问题标签页。

来源：

使用 Shell 查看 (RayMainPage.xaml)：

<?xml version="1.0" encoding="utf-8"?>

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:views="clr-namespace:RayHelper"
   x:Class="RayHelper.RayMainPage">
<TabBar>
    <Tab Title="Приюты"
         Icon="search">
        <ShellContent ContentTemplate="{DataTemplate views:HospiceListPage}" />
    </Tab>
    <Tab Title="Фонд Рэй"
         Icon="help">
        <ShellContent ContentTemplate="{DataTemplate views:RayProfilePage}" />
    </Tab>
    <Tab Title="Рейтинг"
         Icon="rank">
        <ShellContent ContentTemplate="{DataTemplate views:UsersRankPage}" />
    </Tab>
    <Tab Title="Пользователь"
         Icon="profile">
        <ShellContent ContentTemplate="{DataTemplate views:UserProfilePage}" />
    </Tab>
</TabBar>
</Shell>

使用 ListView 查看 (HospiceListPage.xaml)：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="RayHelper.HospiceListPage"
         Title="Список приютов">
<ContentPage.Resources>
    ...
</ContentPage.Resources>

<StackLayout>
    <ListView x:Name="HospiceList"
              ItemsSource="{Binding Hospices}"
              SelectionMode="None">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell
                    Text="{Binding Name}"
                    Detail="{Binding Address}"
                    Command="{Binding Source={x:Reference Name=HospiceList}, Path=BindingContext.OpenHospiceProfileCommand}"
                    CommandParameter="{Binding Source={RelativeSource Self}, Path=BindingContext}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

</ContentPage>

和 ViewModel for View with ListView (HospiceListPageViewModel.cs)

usings ...

namespace RayHelper.ViewModels
{
public class HospiceListPageViewModel : MainViewModel
{
    private ObservableCollection<Hospice> _hospices;
    public ObservableCollection<Hospice> Hospices
    {
        get => _hospices;
        set => SetProperty(ref _hospices, value);
    }
    
    public IMvxAsyncCommand<Hospice> OpenHospiceProfileCommand { get; }

    public HospiceListPageViewModel()
    {
        OpenHospiceProfileCommand = new MvxAsyncCommand<Hospice>(OpenHospiceProfileAsync);
        Hospices = new ObservableCollection<Hospice>();
        LoadData();
    }

    private async void LoadData()
    {
        var hospices = await GetHospices();
        foreach (var hospice in hospices)
        {
            Hospices.Add(hospice);
        }
    }

    protected override string ClassName => nameof(HospiceListPageViewModel);

    private async Task<IEnumerable<Hospice>> GetHospices()
    {
        try
        {
            var hospices = await RayHelperClient.GetHospices().ConfigureAwait(false);
            hospices.Sort();
            return hospices;
        }
        catch (Exception e)
        {
            ...
        }
        return Enumerable.Empty<Hospice>();
    }

    private async Task OpenHospiceProfileAsync(Hospice hospice)
    {
        await Navigation.PushAsync(new HospiceProfilePage(hospice));
    }
}
}

图片：

Normal list view

Broken list view

【问题讨论】：

1.什么是“IMvxAsyncCommand”，有时命令下的CanExecute 可以使元素禁用。（例如，一旦命令被触发，CanExecute 将设置为 false 并禁用 UI）。可以尝试一个简单的命令来验证。 2.（很可能是原因 1，但是）你试过 CollectionView 吗？
您可以通过命令打开Modal Page 来避免该问题。我的意思是，致电Navigation.PushModalAsync 打开 HospiceProfilePage。可能值得快速测试一下，看看它的行为是否不同。
MainViewModel,Hospice 和 HospiceProfilePage 是什么？如果对您方便的话，能否请您在github或onedriver上发布一个基本演示，以便我们进行测试？
@ToolmakerSteve，模态页面遇到了同样的问题。
@Shaw，MvxAsyncCommand 是 MVVMCross 的 ICommand 实现（非常强大的 .NET UI 应用程序框架）。目前，我的应用程序中的命令不使用 CanExecute 方法。感谢您的评论，我会尝试 CollectionView。

标签： c# listview xamarin.forms

【解决方案1】：

我认为ListView 有问题。我将ListView 更改为CollectionView，错误消失了。

很遗憾，我不能将TextCell 元素与CollectionView 一起使用。我将不得不完全自己创建一个自定义 TextCell 元素。

【讨论】：