You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MAUI页面添加ListView后无法整体滚动的问题求助

解决MAUI页面整体滚动与ListView滚动冲突问题

你的问题核心是可滚动控件(ListView)与外层ScrollView的滚动事件冲突,加上原有Grid布局中ListView行设置为Height="*",导致ListView占据了剩余所有空间,外层ScrollView没有可滚动的内容高度,所以页面无法整体滚动。

以下是具体解决步骤:

方案1:页面整体滚动(ListView随页面滚动,自身不独立滚动)

适合希望整个页面(表单+ListView)作为一个整体滚动的场景:

  • 用ScrollView包裹原有的顶层Grid
  • 将ListView所在的Grid行定义从Height="*"改为Height="Auto",让ListView高度自适应内容
  • 此时ListView会随页面整体滚动,自身不再出现独立滚动条

修改后的核心代码片段:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="C971.CoursePage"
             Title="CoursePage">
    <!-- TitleView 保持不变 -->
    <NavigationPage.TitleView>
        <StackLayout VerticalOptions="Center">
            <Label Text="Configure Course" TextColor="White" HorizontalTextAlignment="Center" FontSize="Title" Margin="0, 0, 75, 0" />
        </StackLayout>
    </NavigationPage.TitleView>
    
    <!-- 用ScrollView包裹全部内容 -->
    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <!-- 关键修改:将*改为Auto -->
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <!-- 以下表单、按钮、统计区域代码保持不变 -->
            
            <!-- Assessment List -->
            <ListView x:Name="assessmentListView" Grid.Row="6" HasUnevenRows="True">
                <!-- 模板内容保持不变 -->
            </ListView>
        </Grid>
    </ScrollView>
</ContentPage>

方案2:页面可滚动到ListView区域,ListView保持独立滚动

如果希望页面能滚动到底部ListView区域,同时ListView自身仍可独立滚动:

  • 同样用ScrollView包裹顶层Grid
  • 将ListView所在行高度设为Auto,给ListView添加HeightRequest(比如300,可根据设备屏幕调整)
  • 保留ListView的HasUnevenRows="True",确保内部内容可独立滚动

修改后的ListView代码:

<ListView x:Name="assessmentListView" Grid.Row="6" HasUnevenRows="True" HeightRequest="300">
    <!-- 模板内容保持不变 -->
</ListView>

为什么之前的尝试无效?

  • 直接用ScrollView包裹但未修改ListView行高度:ListView的Height="*"会让它占据所有剩余屏幕空间,ScrollView总高度等于屏幕高度,没有滚动的必要
  • ListView作为可滚动控件,会优先捕获触摸滚动事件,导致外层ScrollView无法响应滚动

内容的提问来源于stack exchange,提问作者MrTravelingBard

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.18 06:24:51