为什么在Xamarin.Forms中不显示从Firebase中的实时数据库检索的数据?

mklgxw1f  于 2023-04-27  发布在  其他
关注(0)|答案(1)|浏览(120)

我正在开发一个食物食谱应用程序,这是我第一次使用Xamarin. Forms。目前,我的实时数据库看起来像这样:

  • 食谱分类
  • 低卡路里
  • 食谱1
  • 名称
  • 描述
  • imageURL
  • 卡路里
  • 配料
  • 食谱2
  • 名称
  • 描述
  • imageURL
  • 卡路里
  • 配料
  • 食谱3
  • 名称
  • 描述
  • imageURL
  • 卡路里
  • 配料

我填写了他们manuallt,我想要的是检索数据(名称,描述,imageURL,卡路里,成分)为每个食谱将显示在一个屏幕(RecipesScreen.xaml),其中将包含食谱的这些细节。我编码这个屏幕,以获取数据,但没有显示!只有标签显示。我一直在尝试如何获得这些数据,但似乎我无法检索数据。

FirebaseHelper.cs代码如下:

namespace dishgoFinalApp
{

internal class FirebaseHelper
    {

    FirebaseClient firebase = new FirebaseClient("https://foodapp-7052b-default-rtdb.asia-southeast1.firebasedatabase.app/");

    public async Task<List<Recipe>> GetAllRecipesAsync(string category)
    {
        var recipes = await firebase
            .Child("RecipeCategories")
            .Child(category)
            .OnceAsync<Recipe>();

        return recipes.Select(r => new Recipe
        {
            Name = r.Object.Name,
            Description = r.Object.Description,
            ImageUrl = r.Object.ImageUrl,
            Calories = r.Object.Calories,
            Ingredients = r.Object.Ingredients
        }).ToList();
    }

    public class Recipe
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string ImageUrl { get; set; }
        public int Calories { get; set; }
        public List<string> Ingredients { get; set; }
    }
}
   }

下面是RecipesScreen.xaml.cs的代码:

namespace dishgoFinalApp

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class RecipesScreen : ContentPage
{
    private FirebaseHelper firebaseHelper;
    private List<Recipe> recipes;

    public RecipesScreen()
    {
        InitializeComponent();

        firebaseHelper = new FirebaseHelper();
        recipes = new List<Recipe>();
    }

    public RecipesScreen(string category) : this()
    {
        LoadRecipes(category);
    }

    private async void LoadRecipes(string category)
    {
        recipes = await firebaseHelper.GetAllRecipesAsync(category);

        // Bind the list of recipes to a ListView or other UI element here
    }
  }
}

下面是RecipesScreen.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="dishgoFinalApp.RecipesScreen">
<ContentPage.Content>
    <StackLayout>
        <Label Text="Welcome to Xamarin.Forms!"
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="CenterAndExpand" />
        
        <ListView ItemsSource="{Binding Recipes}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" Padding="10">
                            <Image Source="{Binding ImageUrl}" WidthRequest="80" HeightRequest="80" />
                            <StackLayout Padding="10">
                                <Label Text="{Binding Name}" FontAttributes="Bold" />
                                <Label Text="{Binding Description}" />
                                <Label Text="{Binding Calories, StringFormat='Calories: {0:F0}'}" />
                                <Label Text="Ingredients:" FontAttributes="Bold" />
                                <Label Text="{Binding IngredientsAsString}" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </StackLayout>
</ContentPage.Content>
</ContentPage>

我希望数据名称、描述、imageURL、卡路里、成分显示在RecipesScreen.xaml屏幕中。

qqrboqgw

qqrboqgw1#

你的代码有几个问题。
一个问题,你定义了变量recipes,但是你绑定了Recipes到属性ItemsSource for your ListView`
因此,您可以尝试替换以下代码:

private List<Recipe> recipes;

其中:

public List<Recipe> Recipes {get;set;}

并按如下方式绑定:

<ListView ItemsSource="{Binding Recipes}">

另外,还需要为页面设置BindContext,可以在页面RecipesScreen.xaml.cs的构造函数上设置BindContext

//set BindingContext with following code
        this.BindingContext= this;

请参考以下代码:

public partial class RecipesScreen : ContentPage
   {
    private FirebaseHelper firebaseHelper;

    public List<Recipe> Recipes{get;set;}

    public RecipesScreen()
    {
        InitializeComponent();

        firebaseHelper = new FirebaseHelper();

        Recipes= new List<Recipe>();
     
        //set BindingContext with following code
        this.BindingContext= this;
    }

    public RecipesScreen(string category) : this()
    {
        LoadRecipes(category);
    }

     // other code

    }

注意事项:
建议您定义变量Recipes的类型如下:

public ObservableCollection<Recipe> Recipes{ get; set; }

并初始化它:

Recipes= new ObservableCollection<Recipe>();

从文档ObservableCollection Class中,我们知道当列表中添加或删除项目时,UI将自动刷新。

相关问题