如何在Jetpack Compose中实现自定义BottomSheet背景透明/半透明

我正在为项目自定义BottomSheet，希望在Jetpack Compose中实现背景透明/半透明效果。当前打开自定义BottomSheet时，无法设置对应区域背景以呈现透明/半透明状态，实际效果与预期不符。

问题代码（HomeFragment.kt） #

class HomeFragment(private val hideViewListener: HideViewListener) : Fragment() {

    private var _binding: HomeFragmentBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = HomeFragmentBinding.inflate(inflater, container, false)
        setupView()
        return binding.root
    }

    private fun setupView() {
        binding.composeView.apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                MainScreen(hideViewListener)
            }
        }

    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

@Composable
fun MainScreen(hideViewListener: HideViewListener) {
    var enable by remember { mutableStateOf(false) }
    Box(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 24.dp)
                .padding(horizontal = 24.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Welcome to bottom sheet playground!",
                modifier = Modifier.fillMaxWidth(),
                style = MaterialTheme.typography.h4,
                textAlign = TextAlign.Center,
                color = Color.White,
            )
            Spacer(modifier = Modifier.height(32.dp))
            repeat(5) {
                Button(
                    onClick = {
                        enable = !enable
                        hideViewListener.hideView(enable)
                    }
                ) {
                    Text(text = "Click to show bottom sheet $it")
                }
            }
        }
        if (enable) {
            Box(
                modifier = Modifier
                    .align(Alignment.BottomStart)
                    .fillMaxWidth()
                    .wrapContentHeight()
                    .background(Color.White)
            ) {
                Column {
                    repeat(10) {
                        Spacer(modifier = Modifier.height(10.dp))
                        Text(text = "Hi Bottom Sheet $it", color = Color.Black)
                    }
                }
            }
        }
    }
}

解决方案 #

修改MainScreen函数，通过添加半透明遮罩层、调整BottomSheet背景色来实现预期效果：

@Composable
fun MainScreen(hideViewListener: HideViewListener) {
    var enable by remember { mutableStateOf(false) }
    Box(modifier = Modifier.fillMaxSize()) {
        // 底层内容区域
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 24.dp)
                .padding(horizontal = 24.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Welcome to bottom sheet playground!",
                modifier = Modifier.fillMaxWidth(),
                style = MaterialTheme.typography.h4,
                textAlign = TextAlign.Center,
                color = Color.White,
            )
            Spacer(modifier = Modifier.height(32.dp))
            repeat(5) {
                Button(
                    onClick = {
                        enable = !enable
                        hideViewListener.hideView(enable)
                    }
                ) {
                    Text(text = "Click to show bottom sheet $it")
                }
            }
        }

        // 全屏半透明遮罩层：BottomSheet显示时生效
        if (enable) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Black.copy(alpha = 0.5f))
                    .clickable {
                        enable = false
                        hideViewListener.hideView(false)
                    }
            )
        }

        // 半透明BottomSheet
        if (enable) {
            Box(
                modifier = Modifier
                    .align(Alignment.BottomStart)
                    .fillMaxWidth()
                    .wrapContentHeight()
                    // 调整alpha值控制透明度，0为完全透明，1为完全不透明
                    .background(Color.White.copy(alpha = 0.9f))
            ) {
                Column(modifier = Modifier.padding(16.dp)) {
                    repeat(10) {
                        Spacer(modifier = Modifier.height(10.dp))
                        Text(text = "Hi Bottom Sheet $it", color = Color.Black)
                    }
                }
            }
        }
    }
}

关键修改说明 #

• 添加全屏半透明遮罩：用Color.Black.copy(alpha = 0.5f)创建深色半透明层，覆盖全屏，既可以让底层内容变暗突出BottomSheet，也可以绑定点击事件实现遮罩关闭BottomSheet的功能（可按需移除）。
• 修改BottomSheet背景透明度：将原纯白背景替换为Color.White.copy(alpha = 0.9f)，通过调整alpha值灵活控制透明程度。
• 调整布局层级：Compose按代码顺序堆叠布局，遮罩层写在底层内容之后、BottomSheet之前，确保BottomSheet显示在最上层。

如果宿主Fragment/Activity的根布局背景为不透明，需在对应主题中添加以下配置避免影响效果：

<item name="android:windowBackground">@android:color/transparent</item>

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