MAUI ListView项重叠问题求助

问题现象 #

项目中多次成功实现ListView与ObservableCollection绑定，但本次出现异常：数据源验证正常的情况下，ListView前两项重叠，后续项显示正常；替换为CollectionView后无内容显示，但填充20-30条数据时可见滚动条。

修复方案 #

1. 修正ViewModel异步加载逻辑 #

构造函数中调用async void方法会导致数据加载与UI渲染不同步，引发布局异常。调整数据加载方式：

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";

    [ObservableProperty]
    string howToMake;

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

    public DetailsViewModel()
    {
        _ = InitializeDataAsync();
    }

    // 替换原async void方法为async Task
    private async Task InitializeDataAsync()
    {
        var ProductPages = await RecipePageService.GetProductPage() as List<Product>;

        RecipePage page = RecipePageService.GetRecipeById(Id);
        Title = page.Title;
        HowToMake = page.HowToMake;
        
        Ingredients.Clear();
        foreach(var product in ProductPages)
        {
            if(page.id == product.idRecipePage)
            {
                Ingredients.Add(product);
                Debug.WriteLine(product.name);
            }
        }

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

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

2. 修复ListView重叠问题 #

通过开启自动行高、调整布局元素属性解决重叠：

<?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"/>
        <!-- 添加HasUnevenRows让ListView自动计算行高 -->
        <ListView Grid.Row="2"
                  ItemsSource="{Binding Ingredients}"
                  HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="model:Product">
                    <ViewCell>
                        <!-- 明确Frame背景色，避免透明导致视觉重叠 -->
                        <Frame BackgroundColor="#2C3333" Padding="5">
                            <Frame.GestureRecognizers>
                                <TapGestureRecognizer 
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:DetailsViewModel}}, Path=OutOfStockButtonCommand}"
                                    CommandParameter="{Binding .}"/>
                            </Frame.GestureRecognizers>
                            <!-- 移除多余空列，调整布局占比 -->
                            <Grid ColumnDefinitions="20*, 5*, 7*">
                                <!-- 明确文本颜色，避免与背景混淆 -->
                                <Label Text="{Binding name}"
                                   Grid.Column="0"
                                   TextColor="#CBE4DE"/>
                                <Label Text="{Binding quantity}"
                                   Grid.Column="1"
                                   TextColor="#CBE4DE"/>
                                <Label Text="{Binding unit}"
                                   Grid.Column="2"
                                   TextColor="#CBE4DE"/>
                            </Grid>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</ContentPage>

3. 修复CollectionView无内容问题 #

确保ItemTemplate元素可见并设置合理布局：

<CollectionView Grid.Row="2"
                ItemsSource="{Binding Ingredients}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:Product">
            <Frame BackgroundColor="#2C3333" Padding="5" Margin="2">
                <Grid ColumnDefinitions="20*,5*,7*">
                    <Label Text="{Binding name}" TextColor="#CBE4DE"/>
                    <Label Text="{Binding quantity}" Grid.Column="1" TextColor="#CBE4DE"/>
                    <Label Text="{Binding unit}" Grid.Column="2" TextColor="#CBE4DE"/>
                </Grid>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

额外排查项 #

• 确认Product类的属性为公共可访问，若需后续属性更新，建议实现INotifyPropertyChanged接口
• 验证RecipePageService.GetProductPage()返回的List<Product>非空且类型转换成功
• 调试确认Ingredients集合的元素数量及属性值均符合预期

内容的提问来源于stack exchange，提问作者Bence Hérincs