.NET Maui中ScrollView设为水平/双向时Grid星号列宽失效问题

在MAUI里，当ScrollView的Orientation设为Horizontal或Both时，内部Grid的Star列宽失效，本质是因为ScrollView在水平滚动模式下，默认不会给子元素提供固定的宽度约束——Grid的宽度会被拉伸到所有子项的总宽度，Star比例失去了计算基准（毕竟Star是基于父容器的可用空间来分配的）。而Xamarin.Forms在这部分的布局逻辑和MAUI有差异，所以之前的写法在MAUI里不生效。

解决这个问题的关键是给内部Grid指定一个明确的宽度基准，让它和外部Grid的宽度保持一致，这样Star列宽就能按比例分配，同时内容超出时ScrollView正常滚动。

具体实现示例 #

以下是调整后的XAML代码，核心是给内部Grid绑定WidthRequest到外部Grid的ActualWidth：

<Grid x:Name="OuterGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- 正常显示的Grid（列宽Star生效） -->
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Text="列1" BackgroundColor="LightBlue" Padding="10"/>
        <Label Grid.Column="1" Text="列2（2倍宽）" BackgroundColor="LightGreen" Padding="10"/>
        <Label Grid.Column="2" Text="列3" BackgroundColor="LightPink" Padding="10"/>
    </Grid>

    <!-- 可水平滚动的Grid（修复Star列宽） -->
    <ScrollView Grid.Row="1" Orientation="Horizontal" HorizontalScrollBarVisibility="Always">
        <!-- 绑定WidthRequest到外部Grid的实际宽度 -->
        <Grid WidthRequest="{Binding Source={x:Reference OuterGrid}, Path=ActualWidth}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/> <!-- 多一列触发滚动 -->
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Text="滚动列1" BackgroundColor="LightBlue" HeightRequest="60" Padding="10"/>
            <Label Grid.Column="1" Text="滚动列2（2倍宽）" BackgroundColor="LightGreen" HeightRequest="60" Padding="10"/>
            <Label Grid.Column="2" Text="滚动列3" BackgroundColor="LightPink" HeightRequest="60" Padding="10"/>
            <Label Grid.Column="3" Text="滚动列4" BackgroundColor="LightYellow" HeightRequest="60" Padding="10"/>
        </Grid>
    </ScrollView>
</Grid>

额外说明 #

• 如果外部Grid的宽度不是固定的（比如自适应页面宽度），绑定ActualWidth是最可靠的方式，它会实时获取外部Grid的实际渲染宽度。
• 也可以根据场景绑定到页面的ActualWidth（比如Source={x:Reference MainPage}），只要确保Grid有明确的宽度基准即可。
• 若需要同时支持垂直+水平滚动（Orientation="Both"），只需保持上述配置，Grid的高度可以用Star或Auto，超出时ScrollView会自动处理垂直滚动。

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