android compose ModalBottomSheet 使用

android compose ModalBottomSheet 使用, ModalBottomSheet从屏幕底部弹出一个可交互的面板

/**
 * Author : wn
 * Email : maoning20080809@163.com
 * Date : 2026/1/3 22:55
 * Description : ModalBottomSheet从屏幕底部弹出一个可交互的面板
 */
class ModalBottomSheetActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            testModalBottomSheet()
        }

    }

    /**
     * 当 showBottomSheet 状态改变时（点击关闭按钮设为 false）
     * 整个 testModalBottomSheet 函数会重新执行（重组）
     */
    @OptIn(ExperimentalMaterial3Api::class)
    @Preview
    @Composable
    private fun testModalBottomSheet(){
        var bottomSheetState = rememberModalBottomSheetState()
        var showBottomSheet by remember { mutableStateOf(false) }

        Button(onClick = {
            showBottomSheet = true
        }) {
            Text(text = "显示底部窗口")
        }
        Toast.makeText(this, "显示", Toast.LENGTH_LONG).show()
        if(showBottomSheet){
            ModalBottomSheet(
                onDismissRequest = {
                    showBottomSheet = false
                },
                sheetState =  bottomSheetState
            ) {
                //弹窗内容
                Column(modifier = Modifier.fillMaxWidth().navigationBarsPadding().padding(56.dp)){
                    Text(text = "标题", style = MaterialTheme.typography.headlineSmall)
                    Spacer(modifier = Modifier.height(16.dp))
                    Text(text = "这是底部弹出的内容", style = MaterialTheme.typography.bodyMedium)
                    Spacer(modifier = Modifier.height(24.dp))
                    Button(onClick = {
                        showBottomSheet = false
                    }, modifier = Modifier.fillMaxWidth()) {
                        Text("关闭")
                    }
                }
            }
        }
    }
}