MAUI中ScrollView适配屏幕失败且无法横向滚动问题求助

问题场景 #

有一个包含Grid1的ContentView，Grid1第0行放置了Entry组件，第1行放置名为Grid2的Grid。Grid2内的数据在WinUI环境下会超出视图范围，且无原生滚动选项。给Grid2外层添加ScrollView后，Grid2不再超出视图，但被强制压缩到仅占用Entry对应的200列宽，且滚动操作仍然失效。

相关列定义代码：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="200" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

完整XAML代码：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="DiME.Controls.ReliabilityIncidentContentView">

<Grid x:Name="Grid1">
    <Grid.RowDefinitions>
        <RowDefinition Height="60"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Entry Placeholder="Search Text here" 
        TextColor="AliceBlue"
        TextChanged="Entry_TextedChanged"></Entry>
    <ScrollView Grid.Row="1" Grid.ColumnSpan="2" Orientation="Both">
         <Grid  x:Name="Grid2" Grid.Column="0" ColumnSpacing="1" BackgroundColor="{DynamicResource Black}"
    VerticalOptions="Start">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <!--...many defs ...-->
            </Grid.ColumnDefinitions>

            <!--..labels content...-->
            <CollectionView Grid.Row="1">                        
                <!--...content..-->
            </CollectionView>
        </Grid>
    </ScrollView>
</Grid>

效果问题 #

• 未添加ScrollView时：CollectionView和Grid2无法自适应尺寸，内容超出屏幕右侧，无滚动条无法查看超出部分
• 添加ScrollView后：Grid2被压缩至200像素宽度，内容挤压变形，滚动操作无法移动内容

解决步骤 #

1. 移除Grid2上错误的布局属性 #

Grid2是ScrollView的直接子元素，不属于Grid1的列布局，代码中Grid.Column="0"属性会强制Grid2限制在Grid1的第0列（200宽），直接移除该属性即可解除宽度限制。

2. 确保Grid2能触发ScrollView滚动 #

ScrollView仅在子元素尺寸超过自身视口时才会激活滚动，需要让Grid2的宽度不受ScrollView视口约束：

• 保持Grid2的HorizontalOptions="Start"属性，避免其被拉伸填充ScrollView
• 给Grid2设置MinWidth属性（如MinWidth="800"），强制其宽度超过视口宽度，触发横向滚动
• 或确保Grid2内部列的总宽度之和大于ScrollView的视口宽度

3. 解决滚动冲突问题 #

如果CollectionView本身带有纵向滚动，ScrollView设置Orientation="Both"会导致滚动事件冲突：

• 若仅需要横向滚动，将ScrollView的Orientation改为Horizontal，纵向滚动交由CollectionView原生处理
• 若确实需要双向滚动，将CollectionView的VerticalScrollBarVisibility设为Never，避免滚动事件互相干扰

修正后的核心代码片段 #

<ScrollView Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal">
     <Grid  x:Name="Grid2" ColumnSpacing="1" BackgroundColor="{DynamicResource Black}"
            VerticalOptions="Start" MinWidth="800">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!--...many defs ...-->
        </Grid.ColumnDefinitions>

        <!--..labels content...-->
        <CollectionView Grid.Row="1" VerticalScrollBarVisibility="Default">                        
            <!--...content..-->
        </CollectionView>
    </Grid>
</ScrollView>

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