.NET MAUI删除ListView项后显示异常问题求助

在.NET MAUI开发中，ObservableCollection集合元素已被正确删除，但删除后ListView仅能部分显示剩余元素（例如仅显示第4项，其余项为空白栏）。以下是当前代码：

XAML代码 #

<VerticalStackLayout>
    <ScrollView>
        <StackLayout>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Image
                    Grid.Column="0"
                    Source="logo.png"
                    WidthRequest="150"
                    HorizontalOptions="Start"
                    VerticalOptions="Start"/>

                <Label
                    TextColor="Black"
                    Grid.Column="1"
                    Text="TODO"
                    FontSize="35"
                    HorizontalOptions="Start" 
                    VerticalOptions="Start" 
                    Margin="23"/>
            </Grid>

            <Grid BackgroundColor="#24D4A3">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <ListView 
                    Grid.ColumnSpan="2"
                    Grid.RowSpan="2"
                    RowHeight="100"
                    x:Name="listview">
                    <ListView.ItemTemplate>
                        <DataTemplate >
                            <ViewCell >
                                <Grid BackgroundColor="#24D4A3">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="auto"/>
                                    </Grid.ColumnDefinitions>
                                    <Button BackgroundColor="#DEABF5"
                                        Text="{Binding Title}"  
                                        Clicked="onNoteSelected"
                                        BorderWidth="2"
                                        TextColor="Black"
                                        FontSize="28"
                                        Margin="20"
                                        CornerRadius="100"
                                        WidthRequest="350"
                                        HeightRequest="70"
                                        HorizontalOptions="Center"
                                        VerticalOptions="Start"/>

                                    <Button
                                        BindingContext="{Binding Id}"
                                        Clicked="ToDoSolved" 
                                        BorderWidth="2"
                                        BorderColor="Black"
                                        BackgroundColor="White"
                                        WidthRequest="45"
                                        HeightRequest="45"
                                        CornerRadius="35" 
                                        Margin="0,0,260,0" 
                                        />
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

                <ImageButton  
                            Clicked="Settings"
                            Source="settings.png"
                            Grid.Row="0"
                            Grid.Column="2"
                            BorderColor="#2b3c3c" 
                            BorderWidth="0" 
                            BackgroundColor="#34A4EB" 
                            CornerRadius="35" 
                            HorizontalOptions="End" 
                            WidthRequest="70" 
                            HeightRequest="70" 
                            Margin="0,10, 10, 0" 
                            VerticalOptions="Start"/>
                <ImageButton 
                            Clicked="CreateNote"
                            Source="add.png"
                            Grid.Row="1"
                            Grid.Column="2"
                            BorderColor="#2b3c3c" 
                            BorderWidth="0" 
                            BackgroundColor="#34A4EB" 
                            CornerRadius="35" 
                            HorizontalOptions="End" 
                            WidthRequest="70" 
                            HeightRequest="70" 
                            Margin="0,0,10,10" 
                            Padding="2,0,0,0"/>
            </Grid>
        </StackLayout>
    </ScrollView>
</VerticalStackLayout>

C#代码 #

public partial class MainPage : ContentPage
{ 
    private ObservableCollection<Note> notes = new ObservableCollection<Note>();
    public ObservableCollection<Note> Notes 
    {
        get { return notes; }
        set { notes = value; }
    }
    public MainPage()   
    {
        InitializeComponent();

        notes.Add(new Note(1, "My Note1", "I'm ugly"));
        notes.Add(new Note(2, "My Note2", "I'm short"));
        notes.Add(new Note(3, "My Note3", "I'm smart"));
        notes.Add(new Note(4, "My Note4", "I'm smart"));
        this.BindingContext= Notes;
        listview.ItemsSource= Notes;
    }

    private async void CreateNote(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//CreateNote");
    }

    private async void Settings(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//Settings");
    }

    private void ToDoSolved(object sender, EventArgs e)
    {
        Button button= (Button) sender ;
        
        var id = (int)button.BindingContext;
         
        var item = Notes.SingleOrDefault(x => x.Id == id);
        if (item != null) 
        {
            Notes.Remove(item);
            Console.WriteLine(id);
        }
    }

    async void onNoteSelected(object sender, EventArgs e)
    {
        Button button= (Button) sender ;
        var id = (int)button.BindingContext;
    }
}

解决方案 #

1. 移除外层嵌套的ScrollView #

ListView本身自带滚动功能，外层嵌套ScrollView会导致布局计算异常，删除元素后无法正确重绘所有行。修改后的根布局：

<VerticalStackLayout>
    <StackLayout>
        <!-- 原有内部内容 -->
    </StackLayout>
</VerticalStackLayout>

2. 修正Grid布局的列定义 #

当前ImageButton使用Grid.Column="2"，但Grid仅定义了2列，导致布局溢出。调整Grid列数为3列：

<Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition />
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

3. 优化ViewCell内的按钮布局 #

避免硬编码Margin导致元素偏移，改用Grid列定位删除按钮：

<Grid BackgroundColor="#24D4A3">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Button BackgroundColor="#DEABF5"
            Text="{Binding Title}"  
            Clicked="onNoteSelected"
            BorderWidth="2"
            TextColor="Black"
            FontSize="28"
            Margin="20"
            CornerRadius="100"
            WidthRequest="350"
            HeightRequest="70"
            HorizontalOptions="Center"
            VerticalOptions="Start"/>

    <Button
        BindingContext="{Binding Id}"
        Clicked="ToDoSolved" 
        BorderWidth="2"
        BorderColor="Black"
        BackgroundColor="White"
        WidthRequest="45"
        HeightRequest="45"
        CornerRadius="35" 
        Margin="0,0,20,0" 
        Grid.Column="1"/>
</Grid>

4. 简化绑定逻辑 #

无需同时设置BindingContext和ItemsSource，直接给ListView绑定ItemsSource即可：

public MainPage()   
{
    InitializeComponent();

    notes.Add(new Note(1, "My Note1", "I'm ugly"));
    notes.Add(new Note(2, "My Note2", "I'm short"));
    notes.Add(new Note(3, "My Note3", "I'm smart"));
    notes.Add(new Note(4, "My Note4", "I'm smart"));
    
    listview.ItemsSource = Notes;
}

内容的提问来源于stack exchange，提问作者Der Illuminate HD