MAUI中Grid.Row属性不生效仅Grid.Column生效的原因排查

核心问题 #

你嵌套了两层Grid，外层Grid定义了RowDefinitions，但实际承载VerticalStackLayout的是内层Grid，而内层Grid仅设置了ColumnDefinitions，没有定义RowDefinitions。

Grid的Grid.Row和Grid.Column属性是作用于直接父级Grid的，内层Grid没有行定义，所以设置Grid.Row不会产生任何布局效果；而Grid.Column因为内层Grid有对应的列定义，所以能正常生效。

修正后的代码 #

将多余的外层Grid移除，把行、列定义合并到同一个Grid中即可：

<Grid RowDefinitions="100,200,300" ColumnDefinitions="100,200,300">
    <VerticalStackLayout
        Grid.Row="1" Grid.Column="1"
        Spacing="5"
        Padding="10,10"
        VerticalOptions="Center">
        <Label
            x:Name="Kitchen"
            Text="Kitchen"
            TextColor="Black"
            FontSize="20"   
            Padding="30,0"
            VerticalOptions="Center"/>

        <HorizontalStackLayout
            Spacing="5"
            Padding="0,0"
            VerticalOptions="Center">

            <Button
                HeightRequest="40"
                WidthRequest="60"
                Text="OFF"
                BackgroundColor="Gray"
                HorizontalOptions="Center"
                Clicked="OnCounterClicked"/>

            <Button
                HeightRequest="40"
                WidthRequest="60"
                Text="ON"
                BackgroundColor="Green"
                HorizontalOptions="Center" 
                Clicked="OnCounterClicked"/>
        </HorizontalStackLayout>
    </VerticalStackLayout>
        
    <VerticalStackLayout
        Grid.Row="2" Grid.Column="2"
        Spacing="5"
        Padding="10,10"
        VerticalOptions="Center">
        <Label
            x:Name="WorkRoom"
            Text="WorkRoom"
            TextColor="Black"
            FontSize="20"   
            Padding="30,0"
            VerticalOptions="Center"/>

        <HorizontalStackLayout
            Spacing="5"
            Padding="0,0"
            VerticalOptions="Center">

            <Button
                HeightRequest="40"
                WidthRequest="60"
                Text="OFF"
                BackgroundColor="Gray"
                HorizontalOptions="Center"
                Clicked="OnCounterClicked"/>

            <Button
                BindingContext="WorkRoom"
                HeightRequest="40"
                WidthRequest="60"
                Text="ON"
                BackgroundColor="Green"
                HorizontalOptions="Center" 
                Clicked="OnCounterClicked"/>
        </HorizontalStackLayout>
    </VerticalStackLayout>
</Grid>

修正说明 #

• 移除了无意义的外层Grid，将RowDefinitions和ColumnDefinitions统一配置在承载子元素的Grid上
• 现在两个VerticalStackLayout的Grid.Row和Grid.Column属性都会作用于带有完整行、列定义的父Grid，布局会按预期显示

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