时间戳

首页 > 解决方案 > 一个 emptyView 用于加载数据，另一个用于没有可用数据时

xamarin.forms - 一个 emptyView 用于加载数据，另一个用于没有可用数据时

问题描述

我有一个使用基于从 API 带来的某些数据显示的 CarouselView 的案例，关键是我需要在下载 API 数据时查看某个视图或至少是文本，以及另一个以防万一没有数据。我尝试使用 RefreshView 和 EmptyView 来实现这一点，但我无法实现所需的行为，我可以让 EmptyView 立即出现数据开始加载，因为那时 ItemSource 为空，然后当数据到达应用程序时，轮播出现，在我看来这很丑陋，理想的做法是在 RefreshView 指示器旁边显示一些视图，显示数据正在加载，然后在没有带来任何数据的情况下显示 API 数据未返回的反馈视图。

我希望我已经让自己被理解了，我希望有人能给我一个关于如何实现这种行为的想法。

我的视图模型：

    public MyViewModel()
    {
        IsRefreshing = true;
        Things = new ObservableCollection<Things>();
        var t = Task.Run(async () =>
        {
            await LoadThings();


        });
        Task.WhenAll(t);
        IsRefreshing = false;

    }



    private async Task LoadThings()
    {
        Things = new List<Thing>(await App.WebApiManager.GetThingsAsync(Id));
    }

我的 IsRefreshing 属性链接到包含我的 CarouselView 的 RefreshView 中的 IsRefreshing 属性

标签： xamarin.forms

解决方案

我认为您可以使用两个空视图并在刷新状态更改时在它们之间切换，这是代码：

在 XAML 中添加两个内容视图并将默认空视图设置为 LoadingData：

    <ContentPage.Resources>
        <ContentView x:Key="LoadingData">
            <StackLayout>
                <Label Text="Loading data..."
                       Margin="10,25,10,10"
                       FontAttributes="Bold"
                       FontSize="18"
                       HorizontalOptions="Fill"
                       HorizontalTextAlignment="Center" />
            </StackLayout>
        </ContentView>
        <ContentView x:Key="NoDataLoaded">
            <StackLayout>
                <Label Text="No items to display."
                       Margin="10,25,10,10"
                       FontAttributes="Bold"
                       FontSize="18"
                       HorizontalOptions="Fill"
                       HorizontalTextAlignment="Center" />
            </StackLayout>
        </ContentView>
    </ContentPage.Resources>
    <StackLayout Margin="20">
        <RefreshView IsRefreshing="{Binding IsRefreshing}"
                     Command="{Binding RefreshCommand}">
            <CarouselView x:Name="carouselView"
                          EmptyView="{StaticResource LoadingData}">
               ... ...

并在代码中相应地显示不同的空视图：

public partial class HorizontalPullToRefreshPage : ContentPage
    {
        AnimalsViewModel viewModel;
        public HorizontalPullToRefreshPage()
        {
            InitializeComponent();
            viewModel = new AnimalsViewModel();
            this.BindingContext = viewModel;
            viewModel.PropertyChanged += ViewModel_PropertyChanged;
        }

        private void ViewModel_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName.Equals("IsRefreshing"))
            {
                if (viewModel.IsRefreshing && viewModel.Animals.Count==0)
                {
                    carouselView.EmptyView = Resources["LoadingData"];
                }
                else if (!viewModel.IsRefreshing && viewModel.Animals.Count == 0)
                {
                    carouselView.EmptyView = Resources["NoDataLoaded"];
                }
            }
        }            

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

            await Task.Delay(2000);
            carouselView.ItemsSource = viewModel.Animals;
        }
    }

然后，每次属性 IsRefreshing 更改时，您都有机会切换空视图。

希望能帮助到你。

推荐阅读