滚动到 MAUI ListView 标题顶部

Question

我想在我的 ListView 中添加一个“返回顶部”按钮。我可以使用 ListView 上的

ScrollTo()

函数滚动到一个项目（即第一个项目），但我似乎无法滚动到 ListView.Header 的顶部；或内容页顶部 - 更好。

我使用网格将按钮放置在屏幕右下角：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage ... Title="Index">

    <Grid x:Name="gridMain">

        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <ListView Grid.Row="0" x:Name="lvItems" VerticalOptions="Fill" 
                  BackgroundColor="White" 
                  SelectionMode="None" CachingStrategy="RetainElement" 
                  SeparatorVisibility="None"
                  HasUnevenRows="True" IsVisible="True">

            <ListView.Header>
                <VerticalStackLayout x:Name="vslListViewHeader">
                    ...
                </VerticalStackLayout>
            </ListView.Header>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        ...
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>

            <ListView.Footer>
                <VerticalStackLayout>
                    ...
                </VerticalStackLayout>
            </ListView.Footer>

        </ListView>

        <ImageButton Grid.Row="0" Source="arrow_up.png" 
                     HorizontalOptions="End" VerticalOptions="End" 
                     Padding="10" Margin="8" x:Name="imgbtnTop" 
                     Clicked="imgbtnTop_Clicked"></ImageButton>

    </Grid>

</ContentPage>

背后代码：

private void imgbtnTop_Clicked(object sender, EventArgs e)
{
    // items ref: ObservableCollection used as ListView ItemsSource
    lvItems.ScrollTo(items.FirstOrDefault(), ScrollToPosition.Start, true);
}

如果有其他方法可以做到这一点（例如使用导航或类似方法），那也可以。另外，我相信我读到此功能将在 v8.0.0 中可用，但目前我找不到该线程的参考。

Answer 1

您可以尝试将

ScrollToPosition

设置为

ScrollToPosition.End

。

根据你的代码，我创建了一个demo并实现了这个功能。 您需要在网格中为

ListView

和

Button

添加两行。

请参考以下代码：

   <Grid x:Name="gridMain" > 
       <Grid.RowDefinitions>
           <RowDefinition Height="80"></RowDefinition>
           <RowDefinition Height="*"></RowDefinition>
       </Grid.RowDefinitions>

       <ListView x:Name="listView" Grid.Row="1"
            ItemsSource="{Binding Animals}"
            IsGroupingEnabled="True"
            Scrolled="OnListViewScrolled">
           <ListView.ItemTemplate>
               <DataTemplate>
                   <ViewCell>
                       <Grid Padding="10">
                           <Grid.RowDefinitions>
                               <RowDefinition Height="Auto" />
                               <RowDefinition Height="Auto" />
                           </Grid.RowDefinitions>
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="Auto" />
                               <ColumnDefinition Width="Auto" />
                           </Grid.ColumnDefinitions>
                           <Image Grid.RowSpan="2" 
                             Source="{Binding ImageUrl}" 
                             Aspect="AspectFill"
                             HeightRequest="60" 
                             WidthRequest="60" />
                           <Label Grid.Column="1" 
                             Text="{Binding Name}" 
                             FontAttributes="Bold" />
                           <Label Grid.Row="1"
                             Grid.Column="1" 
                             Text="{Binding Location}"
                             FontAttributes="Italic" 
                             VerticalOptions="End" />
                       </Grid>
                   </ViewCell>
               </DataTemplate>
           </ListView.ItemTemplate>
       </ListView>

       <Button Grid.Row="0" 
                    HorizontalOptions="FillAndExpand" VerticalOptions="End" 
                    Padding="10" Margin="8" x:Name="imgbtnTop" 
                    Clicked="OnButtonClicked"></Button>

   </Grid>

方法

OnButtonClicked

void OnButtonClicked(object sender, EventArgs e) 
{
    GroupedAnimalsViewModel viewModel = BindingContext as GroupedAnimalsViewModel;
    AnimalGroup group = viewModel.Animals.FirstOrDefault(a => a.Name == "Bears");
    Animal monkey = group.FirstOrDefault(m => m.Name == "American Black Bear");
    listView.ScrollTo(monkey, group, ScrollToPosition.End, true);
}