XAML MAUI ListView重叠项

q3qa4bjr  于 2023-04-09  发布在  其他
关注(0)|答案(1)|浏览(140)

目前,我正在尝试使用Observablecollection〈〉使ListView工作。我在同一个项目中已经这样做了3次,但不是在同一个.xaml文件中。我真的不知道发生了什么以及为什么会发生。我能说的是,我给ListView的列表完全正常,我已经通过断点多次检查并将内容写入输出,所以在我看来这不是问题所在
下面是ViewModel的代码:

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using KitchenRecipes.MyClasses;
using KitchenRecipes.Services;
using System.Collections.ObjectModel;
using System.Diagnostics;

namespace KitchenRecipes.ViewModel;
[QueryProperty("Id", "Id")]
public partial class DetailsViewModel : ObservableObject
{
    [ObservableProperty]
    private int id;

    [ObservableProperty]
    string title = "Nem sikerült betölteni a részleteket";  //Simple error message as default

    [ObservableProperty]
    string howToMake;

    [ObservableProperty]
    ObservableCollection<Product> ingredients = new ObservableCollection<Product>();

    public DetailsViewModel()
    {
        LookForItem();
    }

    private async void LookForItem()
    {
        var ProductPages = await RecipePageService.GetProductPage() as List<Product>;

        RecipePage page = RecipePageService.GetRecipeById(Id);
        Title = page.Title;
        HowToMake = page.HowToMake;
        for(int i = 0; i < ProductPages.Count; i++)
        {
            if(page.id == ProductPages[i].idRecipePage)
            {
                Ingredients.Add(ProductPages[i]);
                Debug.WriteLine(ProductPages[i].name);
            }
        }

        Debug.WriteLine($"List hossza:{Ingredients.Count}");

        //Miert?
        //Product tmp = Ingredients[1];
        //Ingredients.RemoveAt(1);
        //Ingredients.Insert(1, tmp);
    }

    [RelayCommand]
    private void OutOfStockButton(Product p)
    {
        Debug.WriteLine(p.name);
    }

下面是XAML文件:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="KitchenRecipes.DetailsPage"
             Title="Részletek"
             xmlns:viewmodel="clr-namespace:KitchenRecipes.ViewModel"
             x:DataType="viewmodel:DetailsViewModel"
             xmlns:model="clr-namespace:KitchenRecipes.MyClasses">
    <Grid BackgroundColor="#2E4F4F"
          RowDefinitions="10*, 40*, 50*, Auto"
          Padding="5">
        <Label Text="{Binding Title}"
               Grid.Row="0"
               TextColor="#CBE4DE"
               BackgroundColor="#2C3333"
               Padding="2"/>
        <Label Text="{Binding HowToMake}"
               Grid.Row="1"
               TextColor="#CBE4DE"
               BackgroundColor="#2C3333"
               Padding="2"/>
        <ListView Grid.Row="2"
                  ItemsSource="{Binding Ingredients}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="model:Product">
                    <ViewCell>
                        <Frame BackgroundColor="Transparent">
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer 
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:DetailsViewModel}}, Path=OutOfStockButtonCommand}"
                                    CommandParameter="{Binding .}"/>
                            </Frame.GestureRecognizers>
                            <Grid ColumnDefinitions="20*, 5*, 7*, 2*">
                                <Label Text="{Binding name}"
                                   Grid.Column="0"/>
                                <Label Text="{Binding quantity}"
                                   Grid.Column="1"/>
                                <Label Text="{Binding unit}"
                                   Grid.Column="2"/>
                            </Grid>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</ContentPage>

我认为路径工作得很好,因为一切都在按它应该的方式使用。
下面是一个例子的问题:

正如你所看到的,第二个项目正在与第一个项目重叠。然而,在第二个项目之后,一切都正常。
我试着把ListView改成CollectionView,但是当我这么做的时候,列表根本就不显示。它是存在的,因为当我用20或30个项目填充它的时候,滚动条会出现,但是什么都不显示。

oaxa6hgo

oaxa6hgo1#

我测试了你提供的代码,我删除了TapGestureRecognizer,然后它工作得很好。我通过使用静态数据绑定了listview。你可以使用SelectedItem作为listviewitem,而不是使用TapGestureRecognizer。

相关问题