在.NET MAUI中实现底部导航栏：无法达成设计的深度效果

要实现带顶部阴影和中间圆形切口的底部导航栏，你需要调整布局结构，用分层设计来实现背景的切口和阴影，同时保留悬浮按钮的效果。以下是修改后的完整代码：

<Grid VerticalOptions="End" Margin="0,0,0,10">
    <!-- 底层：带阴影和圆形切口的导航栏背景 -->
    <Border 
        BackgroundColor="#FFFFFF"
        StrokeThickness="0"
        Margin="16,0,16,0"
        HeightRequest="70"
        VerticalOptions="End">
        <!-- 添加顶部阴影效果 -->
        <Border.Shadow>
            <Shadow 
                Brush="#80000000" 
                Offset="0,-4" 
                Radius="8" 
                Opacity="0.5"/>
        </Border.Shadow>
        <!-- 裁剪出中间的圆形切口 -->
        <Border.Clip>
            <GeometryGroup FillRule="EvenOdd">
                <!-- 基础矩形背景 -->
                <RectangleGeometry Rect="0,0,1000,70"/>
                <!-- 中间圆形缺口，调整坐标和半径适配布局 -->
                <EllipseGeometry Center="500,-25" RadiusX="35" RadiusY="35"/>
            </GeometryGroup>
        </Border.Clip>
    </Border>

    <!-- 上层：导航项与悬浮按钮 -->
    <Grid>
        <!-- 导航项容器 -->
        <HorizontalStackLayout 
            VerticalOptions="End" 
            HeightRequest="70"
            Padding="24,0,24,16"
            Spacing="48">
            <!-- Home 导航项 -->
            <Grid RowDefinitions="22,15" HorizontalOptions="Center">
                <ImageButton 
                    Source="homeicon.svg"
                    WidthRequest="20"
                    HeightRequest="22"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Grid.Row="0"/>
                <Label 
                    Grid.Row="1" 
                    Text="Home"
                    FontFamily="WorkSansRegular"
                    FontSize="12"
                    HorizontalOptions="Center"/>
            </Grid>

            <!-- Wallet 导航项 -->
            <Grid RowDefinitions="22,15" HorizontalOptions="Center">
                <ImageButton 
                    Source="wallet.svg"
                    WidthRequest="20"
                    HeightRequest="22"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Grid.Row="0"/>
                <Label 
                    Grid.Row="1" 
                    Text="Wallet"
                    FontFamily="WorkSansRegular"
                    FontSize="12"
                    HorizontalOptions="Center"/>
            </Grid>

            <!-- 空白占位，对应中间悬浮按钮位置 -->
            <View WidthRequest="70"/>

            <!-- Activity 导航项 -->
            <Grid RowDefinitions="22,15" HorizontalOptions="Center">
                <ImageButton 
                    Source="activityicon.svg"
                    WidthRequest="20"
                    HeightRequest="22"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Grid.Row="0"/>
                <Label 
                    Grid.Row="1" 
                    Text="Activity"
                    FontFamily="WorkSansRegular"
                    FontSize="12"
                    HorizontalOptions="Center"/>
            </Grid>

            <!-- Profile 导航项 -->
            <Grid RowDefinitions="22,15" HorizontalOptions="Center">
                <ImageButton 
                    Source="profileicon.svg"
                    WidthRequest="20"
                    HeightRequest="22"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Grid.Row="0"/>
                <Label 
                    Grid.Row="1" 
                    Text="Profile"
                    FontFamily="WorkSansRegular"
                    FontSize="12"
                    HorizontalOptions="Center"/>
            </Grid>
        </HorizontalStackLayout>

        <!-- 中间悬浮按钮 -->
        <ImageButton 
            Source="centericon.svg"
            WidthRequest="60"
            HeightRequest="62"
            HorizontalOptions="Center"
            VerticalOptions="Start"
            Margin="0,-30,0,0">
            <!-- 给悬浮按钮添加阴影增强立体感 -->
            <ImageButton.Shadow>
                <Shadow 
                    Brush="#80000000" 
                    Offset="0,4" 
                    Radius="8" 
                    Opacity="0.5"/>
            </ImageButton.Shadow>
        </ImageButton>
    </Grid>
</Grid>

关键实现说明 #

• 圆形切口：通过Border.Clip结合GeometryGroup，用矩形背景和反向椭圆实现中间缺口，FillRule="EvenOdd"确保椭圆区域被裁剪。
• 顶部阴影：利用Border.Shadow属性设置阴影的偏移、半径和透明度，模拟导航栏的悬浮深度。
• 布局分层：外层Grid将背景和导航内容分层，悬浮按钮放在最上层，通过负Margin实现向上悬浮效果。
• 导航项对齐：在导航项容器中加入空白View占位，确保左右项对称分布，避开中间按钮位置。

你可以根据设计稿调整以下参数适配需求：

• 阴影的颜色、偏移量、半径值
• 椭圆的中心坐标和半径尺寸
• 导航项的间距、内边距
• 悬浮按钮的尺寸和Margin值

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