MAUI中Android平台BottomSheetDialog背景透明设置问题

核心解决步骤 #

1. 添加Android自定义主题 #

在Android项目的Resources/values/styles.xml中添加以下主题配置，覆盖BottomSheetDialog的默认样式：

<style name="TransparentBottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/TransparentBottomSheet</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

<style name="TransparentBottomSheet" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
    <item name="behavior_peekHeight">0dp</item>
</style>

2. 修改平台特定类代码 #

更新ShowBottomSheet方法，添加背景透明处理、顶部区域移除逻辑：

using Android.Graphics.Drawables;
using Android.Views;
using Com.Google.Android.Material.BottomSheet;
using Microsoft.Maui.Platform;

public void ShowBottomSheet(Page page, IView bottomSheetContent, bool dimDismiss)
{
    // 使用自定义透明主题初始化BottomSheetDialog
    var bottomSheetDialog = new BottomSheetDialog(MainActivity.Current, Resource.Style.TransparentBottomSheetDialog);
    var mauiContext = page.Handler?.MauiContext ?? throw new Exception("MauiContext is null");
    var view = bottomSheetContent.ToContainerView(mauiContext);

    bottomSheetDialog.SetContentView(view);

    // 获取BottomSheet核心布局，移除顶部多余区域
    var bottomSheetLayout = bottomSheetDialog.FindViewById<FrameLayout>(Com.Google.Android.Material.R.Id.Design_bottom_sheet);
    if (bottomSheetLayout != null)
    {
        bottomSheetLayout.SetPadding(0, 0, 0, 0); // 清除默认顶部padding
        var behavior = BottomSheetBehavior.From(bottomSheetLayout);
        behavior.SkipCollapsed = true; // 跳过折叠状态，直接展开
        behavior.State = BottomSheetBehavior.StateExpanded; // 设置初始展开状态
    }

    // 配置窗口背景与遮罩
    var window = bottomSheetDialog.Window;
    if (window != null)
    {
        window.SetBackgroundDrawable(new ColorDrawable(Android.Graphics.Color.Transparent));
        // 根据参数控制遮罩透明度，不需要遮罩则设为0
        window.SetDimAmount(dimDismiss ? 0.5f : 0f);
    }

    bottomSheetDialog.Show();
}

3. 确认MAUI内容页配置 #

确保你的bottomSheetContent对应的ContentPage已设置透明背景：

var bottomSheetPage = new ContentPage
{
    BackgroundColor = Colors.Transparent,
    // 其他内容配置
};

关键逻辑说明 #

• 自定义主题：通过TransparentBottomSheetDialog主题覆盖默认的BottomSheet背景样式，避免白色底色和默认圆角。
• BottomSheetBehavior配置：SkipCollapsed跳过折叠状态，直接展开；清除布局padding移除顶部默认空白区域。
• 窗口设置：直接设置Window背景为透明，同时通过SetDimAmount控制遮罩显示。

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