当我的数据加载到 Xamarin Forms 中时，如何使加载屏幕消失？

Question

我想在没有数据显示时构建一个加载屏幕。但它不起作用，它一直在加载。如何使加载屏幕在加载数据时消失？

这是我的C# 代码

        if (Clublistview.ItemsSource == null)
        {
            try
            {
                base.OnAppearing();
                await setClubs(Clublistview);

                overlay.IsVisible = false;
                Clublistview.IsVisible = true;
            }
            catch (Exception ex)
            {
                //MessagingCenter
                await DisplayAlert("Error",
                    "There seems to be an error, please check your internet connection.",
                    "OK");
            }
        }
        else
        {
            overlay.IsVisible = true;
            Clublistview.IsVisible = false;
        }

这是XAML 代码

 <ListView  x:Name="Clublistview" HasUnevenRows="true" ItemSelected="OnItemSelected" ItemsSource="{Binding Id}" IsVisible="true">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell Height="55">
                            <StackLayout BackgroundColor="White"
                            Orientation="Vertical">
                                <StackLayout Orientation="Horizontal" Padding="2,2,2,2">
                                    <Image Source="{Binding Logo}" IsVisible="true" WidthRequest="50" HeightRequest="50"/>

                                    <StackLayout Orientation="Vertical">
                                        <Label Text="{Binding Name}" FontSize="20" x:Name="BtnClub" 
                                         TextColor="Black" />

                                        <Label HorizontalOptions="Start" Text="Select for more info" FontSize="10"/>
                                        <!--<Button BackgroundColor="White" TextColor="Black"  HorizontalOptions="Start" x:Name="btnInfo" 
                                        Text="Select for more info" FontSize="10" Clicked="OnInfoClicked" CommandParameter="{Binding Id}"/>-->
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <ContentView x:Name="overlay" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"  AbsoluteLayout.LayoutFlags="All" IsVisible="false">
                <ActivityIndicator  IsRunning="True" IsVisible="True" Color="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
              </ContentView>

Answer 1

看起来这段代码被放置在OnAppearing您的ContentPage. 如果是这种情况，它只会在页面显示时被调用 1 次。假设Clublistview.ItemsSource不为空，则执行以下代码：

overlay.IsVisible = true;
Clublistview.IsVisible = false;

这意味着您的叠加层是可见的并且ActivityIndicator将会旋转。如果这不存在OnAppearing，那么我不确定您何时调用它所在的方法。

您可能想做这样的事情：

public override async void OnAppearing()
{
   base.OnAppearing();

   // Show your overlay
   overlay.IsVisible = true;
   Clublistview.IsVisible = false;

   // Load the items into the ItemsSource
   await setClubs(Clublistview);

   // Hide the overlay
   overlay.IsVisible = false;
   Clublistview.IsVisible = true;
}

您可以使用 MVVM 模式以更简洁的方式实现此类行为。使用 MVVM，您可以使用属性绑定来控制何时显示叠加层。我们有一些关于 MVVM 和 Xamarin.Forms 的指南，可以帮助您开始使用。这是一篇博客文章，也展示了一个示例。