Xamarin.Forms网格中钢琴按键按钮点击重叠问题求助

我正在开发一款Xamarin.Forms应用，使用Grid实现了类似钢琴键盘的布局，效果如下：

对应的XAML代码如下：

<Grid ColumnSpacing="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="120" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="auto" />
    </Grid.ColumnDefinitions>
    <Button
        Grid.RowSpan="2"
        Grid.Column="0"
        BackgroundColor="White"
        Text="C"
        TextColor="Black"
        WidthRequest="45" />
    <Button
        Grid.RowSpan="2"
        Grid.Column="1"
        BackgroundColor="White"
        Text="D"
        TextColor="Black"
        WidthRequest="45" />
    <Button
        Grid.RowSpan="2"
        Grid.Column="2"
        BackgroundColor="White"
        Text="E"
        TextColor="Black"
        WidthRequest="45" />
    <Button
        Grid.RowSpan="2"
        Grid.Column="3"
        BackgroundColor="White"
        Text="F"
        TextColor="Black"
        WidthRequest="45" />
    <Button
        Grid.RowSpan="2"
        Grid.Column="4"
        BackgroundColor="White"
        Text="G"
        TextColor="Black"
        WidthRequest="45" />
    <Button
        Grid.RowSpan="2"
        Grid.Column="5"
        BackgroundColor="White"
        Text="A"
        TextColor="Black"
        WidthRequest="45" />
    <Button
        Grid.RowSpan="2"
        Grid.Column="6"
        BackgroundColor="White"
        Text="B"
        TextColor="Black"
        WidthRequest="45" />

    <Button
        Grid.Column="0"
        Grid.ColumnSpan="2"
        BackgroundColor="Black"
        HorizontalOptions="Center"
        Text="C#"
        TextColor="White"
        WidthRequest="35" />
    <Button
        Grid.Column="1"
        Grid.ColumnSpan="2"
        BackgroundColor="Black"
        HorizontalOptions="Center"
        Text="D#"
        TextColor="White"
        WidthRequest="35" />
    <Button
        Grid.Column="3"
        Grid.ColumnSpan="2"
        BackgroundColor="Black"
        HorizontalOptions="Center"
        Text="F#"
        TextColor="White"
        WidthRequest="35" />
    <Button
        Grid.Column="4"
        Grid.ColumnSpan="2"
        BackgroundColor="Black"
        HorizontalOptions="Center"
        Text="G#"
        TextColor="White"
        WidthRequest="35" />
    <Button
        Grid.Column="5"
        Grid.ColumnSpan="2"
        BackgroundColor="Black"
        HorizontalOptions="Center"
        Text="A#"
        TextColor="White"
        WidthRequest="35" />
</Grid>

目前遇到的问题是：点击白键按钮（例如“A”键）时，会出现按钮重叠的情况，效果如下：

一、修复按钮重叠问题 #

问题根源在于黑键的跨列布局和层级设置不合理，修改方案如下：

修改后的XAML代码 #

<Grid ColumnSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="120" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="45" />
        <ColumnDefinition Width="45" />
        <ColumnDefinition Width="45" />
        <ColumnDefinition Width="45" />
        <ColumnDefinition Width="45" />
        <ColumnDefinition Width="45" />
        <ColumnDefinition Width="45" />
    </Grid.ColumnDefinitions>

    <!-- 白键：自动填充列宽，跨两行 -->
    <Button Grid.RowSpan="2" Grid.Column="0" BackgroundColor="White" Text="C" TextColor="Black" />
    <Button Grid.RowSpan="2" Grid.Column="1" BackgroundColor="White" Text="D" TextColor="Black" />
    <Button Grid.RowSpan="2" Grid.Column="2" BackgroundColor="White" Text="E" TextColor="Black" />
    <Button Grid.RowSpan="2" Grid.Column="3" BackgroundColor="White" Text="F" TextColor="Black" />
    <Button Grid.RowSpan="2" Grid.Column="4" BackgroundColor="White" Text="G" TextColor="Black" />
    <Button Grid.RowSpan="2" Grid.Column="5" BackgroundColor="White" Text="A" TextColor="Black" />
    <Button Grid.RowSpan="2" Grid.Column="6" BackgroundColor="White" Text="B" TextColor="Black" />

    <!-- 黑键：仅占第一行，通过Margin偏移到白键中间，设置更高层级 -->
    <Button Grid.Row="0" Grid.Column="0" BackgroundColor="Black" Text="C#" TextColor="White" 
            WidthRequest="35" HorizontalOptions="End" Margin="0,0,-17.5,0" ZIndex="1" />
    <Button Grid.Row="0" Grid.Column="1" BackgroundColor="Black" Text="D#" TextColor="White" 
            WidthRequest="35" HorizontalOptions="End" Margin="0,0,-17.5,0" ZIndex="1" />
    <Button Grid.Row="0" Grid.Column="3" BackgroundColor="Black" Text="F#" TextColor="White" 
            WidthRequest="35" HorizontalOptions="End" Margin="0,0,-17.5,0" ZIndex="1" />
    <Button Grid.Row="0" Grid.Column="4" BackgroundColor="Black" Text="G#" TextColor="White" 
            WidthRequest="35" HorizontalOptions="End" Margin="0,0,-17.5,0" ZIndex="1" />
    <Button Grid.Row="0" Grid.Column="5" BackgroundColor="Black" Text="A#" TextColor="White" 
            WidthRequest="35" HorizontalOptions="End" Margin="0,0,-17.5,0" ZIndex="1" />
</Grid>

关键修改点说明 #

1. 固定列宽与间距：将列宽度设为固定45（与原白键WidthRequest一致），ColumnSpacing设为0，避免间隙干扰布局
2. 黑键布局调整：黑键仅占第一行（Grid.Row="0"），不跨列，通过负Margin向右偏移黑键宽度的一半（17.5），让黑键精准落在两个白键中间
3. 层级控制：给黑键设置ZIndex="1"，确保黑键在白键上方，交互时不会被白键遮挡
4. 简化白键设置：去掉白键的WidthRequest，按钮自动填充列宽，避免重复设置

二、容器方案推荐 #

Grid是实现钢琴键盘布局的最佳容器，它能直观控制行列位置、层级关系，且布局逻辑清晰。如果需要更灵活的场景，可考虑：

• AbsoluteLayout：支持精确坐标定位，适合需要自定义键盘比例的场景，但需手动计算每个键的位置，维护成本较高
• FlexLayout：适合自适应不同屏幕尺寸的布局，可通过比例分配空间，但黑键的偏移布局实现不如Grid直观

内容的提问来源于stack exchange，提问作者Rodica-Mihaela