滚动视图中比例网格行中的 Maui Listview

Question

我在网格比例行中使用列表视图，它的其他元素在自动行中。因为我希望我的列表视图占据屏幕的其余部分。到目前为止一切正常。

但是，当我想在外面使用滚动视图时，列表视图会占据整个屏幕，而其他元素不可见。

我希望列表视图在滚动视图中显示相同。在这里我必须使用滚动视图，因为我在网格中动态添加更多元素（标签、按钮等）。过了一会儿，当列表视图的高度到达末尾时，滚动视图应该开始了。 我尝试了一切但失败了

非常感谢迄今为止提供帮助的人。

示例代码

<?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="MauiApp4.MainPage">
    <ScrollView VerticalOptions="Fill">
        <Grid HorizontalOptions="Fill" VerticalOptions="Fill">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label Grid.Row="1"
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <ListView x:Name="listView" 
                          Grid.Row="2" 
                          VerticalOptions="Fill"
                          ItemsSource="{Binding Monkeys}"
                          MinimumHeightRequest="200">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.ContextActions>
                                <MenuItem Text="Favorite"
                                      IconImageSource="favorite.png"
                                      Command="{Binding Source={x:Reference listView}, Path=BindingContext.FavoriteCommand}"
                                      CommandParameter="{Binding}" />
                                <MenuItem Text="Delete" 
                                      IconImageSource="delete.png"
                                      Command="{Binding Source={x:Reference listView}, Path=BindingContext.DeleteCommand}"
                                      CommandParameter="{Binding}" />
                            </ViewCell.ContextActions>

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

            <Label Grid.Row="3"
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button Grid.Row="4"
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        </Grid>
    </ScrollView>
</ContentPage>

Answer 1

您希望“列表视图占据屏幕的其余部分”，同时，您将此网格包装在 ScrollView 中，从而消除了限制。

不要将您的 Vertical ListView 包装在 Vertical ScrollView 中。或者，如果你这样做，请确保 ListView 的高度是有限的。

否则，您将在完全展开的 ListView 上滚动。

Answer 2

您的 ScrollView 处于错误的级别，并且不应将 ListView 嵌套在 ScrollView 内，因此最好完全忽略 ScrollView，因为 ListView 自己提供滚动功能：

<Grid RowDefinitons="auto, auto, *, auto, auto">
    <!-- leaving out irrelevant bits -->

    <ListView Grid.Row="2">
        <!-- leaving out irrelevant bits -->
    </ListView>
    
    <Label />
    <Button />
</Grid>

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scrollview