C# MAUI中ListView重叠问题及全页面滚动方案咨询

问题现象 #

开发C# MAUI应用时，布局分为输入区（Picker+Entry）、计算按钮、输出区（两个绑定Duct类的ListView）。Windows平台显示正常，但Android平台出现ListView重叠，滚动时输出内容全部丢失。

Duct类定义：

public class Duct
{
    public int? dimension { get; set; }
    public double crossSection { get; set; }
    public double? airSpeed { get; set; }
}

原布局核心问题：外层VerticalStackLayout嵌套两个ListView，Android平台上ListView的高度计算异常导致布局重叠；局部滚动与页面滚动冲突引发内容丢失。

解决方案：实现全页面滚动 #

核心思路：用ScrollView包裹整个页面内容，同时将ListView替换为MAUI推荐的CollectionView（更高效，高度计算更稳定），实现全页面统一滚动。

修改后的完整XAML代码 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="EngineeringCalculator.VentilationCalculations"
             Title="Rectangle duct to round">
    <!-- 全页面滚动容器 -->
    <ScrollView>
        <VerticalStackLayout>
            <!-- 矩形风管尺寸选择区 -->
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Picker Grid.Row="0" x:Name="XPicker" Title="Select X dimension"/>
                <Picker Grid.Row="1" x:Name="YPicker" Title="Select Y dimension"/>
            </Grid>
            <!-- 风量输入区 -->
            <Grid Padding="10" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Entry Grid.Row="0" Grid.Column="0" x:Name="AirEntry"
                       Placeholder="Enter air flow in m3/h" Keyboard="Numeric"/>
                <Label Grid.Row="0" Grid.Column="1" Text="m³/h" FontAttributes="Bold" HorizontalOptions="Center" VerticalOptions="Center"/>
            </Grid>
            <!-- 计算按钮 -->
            <Button 
                    x:Name="CounterBtn"
                    Text="Recalculate"
                    SemanticProperties.Hint="Recalculate rectangle duct to round"
                    Clicked="OnGetEquivalentChannels"
                    HorizontalOptions="Center" />
            
            <!-- 替换ListView为CollectionView：输入风管信息列表 -->
            <CollectionView x:Name="RectangleDuct" Background="Transparent" Margin="0,10,0,0">
                <CollectionView.Header>
                    <Grid Padding="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Label Grid.Row="0" Grid.ColumnSpan="3" Text="Input rectangle duct informations" FontAttributes="Bold" Background="Gray"/>
                        <Label Grid.Row="1" Grid.Column="0" Text="Dimension" FontAttributes="Bold" />
                        <Label Grid.Row="1" Grid.Column="1" Text="Cross Section" FontAttributes="Bold" />
                        <Label Grid.Row="1" Grid.Column="2" Text="Air speed" FontAttributes="Bold" />
                    </Grid>
                </CollectionView.Header>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0"
                                   Text="{Binding dimension, StringFormat='{0} &#x2205;'}"
                            />
                            <Label
                                   Grid.Column="1"
                                   Text="{Binding crossSection, StringFormat='{0} m²'}"
                            />
                            <Label
                                   Grid.Column="2"
                                   Text="{Binding airSpeed, StringFormat='{0} m/s'}"
                            />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
            
            <!-- 替换ListView为CollectionView：等效圆形风管列表 -->
            <CollectionView  x:Name="RecalculatedDucts" Background="Transparent" Margin="0,10,0,20">
                <CollectionView.Header>
                    <Grid Padding="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Label x:Name="RecalculateSummary" Grid.Row="0" Grid.ColumnSpan="3" Text="Equal round ducts" FontAttributes="Bold" Background="Gray"/>
                        <Label Grid.Row="1" Grid.Column="0" Text="Dimension" FontAttributes="Bold" />
                        <Label Grid.Row="1" Grid.Column="1" Text="Cross Section" FontAttributes="Bold" />
                        <Label Grid.Row="1" Grid.Column="2" Text="Air speed" FontAttributes="Bold" />
                    </Grid>
                </CollectionView.Header>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0"
                                   Text="{Binding dimension, StringFormat='{0} &#x2205;'}"
                            />
                            <Label
                                   Grid.Column="1"
                                   Text="{Binding crossSection, StringFormat='{0} m²'}"
                            />
                            <Label
                                   Grid.Column="2"
                                   Text="{Binding airSpeed, StringFormat='{0} m/s'}"
                            />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

关键修改说明 #

1. 全页面滚动：外层添加ScrollView，统一管理整个页面的滚动逻辑，避免局部滚动冲突
2. 替换列表控件：用CollectionView替代ListView，Android平台下高度计算更稳定，不会出现重叠；同时无需ViewCell，简化布局结构
3. 布局优化：给CollectionView添加Margin增加列表间距，表头Label设置Grid.ColumnSpan="3"确保标题横跨所有列，提升视觉规整度

内容的提问来源于stack exchange，提问作者PawelKinczyk