? ? ? ? ? 這一節主要了解一下Compose中的ModalBottomSheetLayout，在Jetpack Compose開發中，ModalBottomSheetLayout是Material Design組件庫中用于實現模態底部面板的核心組件，其核心作用是通過聲明式API管理底部面板的顯示、隱藏及交互邏輯。

API
ModalBottomSheetLayout：作為容器使用，管理底部sheet的狀態和行為
sheetState：控制底部sheet的狀態（展開、折疊、隱藏）
sheetShape：定義底部sheet的形狀（通常使用圓角）
sheetElevation：控制底部sheet的陰影效果
sheetContent：底部sheet的內容區域
scrimColor：背景遮罩層的顏色

場景:
1 表單輸入/選擇,用戶需要從多個選項中選擇或填寫簡單表單（如添加備注）。
2 詳情展示,點擊列表項后，底部彈窗展示詳細信息
3 操作菜單,提供一組操作按鈕（如分享、刪除、編輯）。

栗子:

app下gradle添加依賴

  implementation "androidx.compose.material:material:1.4.3"

import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dpimport kotlinx.coroutines.launch
import androidx.compose.material.ModalBottomSheetLayout@Composable
fun FormModalBottomSheet() {val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)val scope = rememberCoroutineScope()var name by remember { mutableStateOf("") }var email by remember { mutableStateOf("") }var submitted by remember { mutableStateOf(false) }ModalBottomSheetLayout(sheetState = sheetState,sheetContent = {Column(modifier = Modifier.fillMaxWidth().padding(16.dp).padding(bottom = 40.dp)) {Text(text = "請填寫信息",style = MaterialTheme.typography.h5,modifier = Modifier.padding(bottom = 16.dp))OutlinedTextField(value = name,onValueChange = { name = it },label = { Text("姓名") },modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp))OutlinedTextField(value = email,onValueChange = { email = it },label = { Text("郵箱") },modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp))Row(modifier = Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.End) {Button(onClick = { scope.launch { sheetState.hide() } },modifier = Modifier.padding(end = 8.dp)) {Text("取消")}Button(onClick = {submitted = truescope.launch { sheetState.hide() }}) {Text("提交")}}}}) {Column(modifier = Modifier.fillMaxSize(),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally) {Button(onClick = { scope.launch { sheetState.show() } }) {Text("打開表單")}if (submitted && name.isNotEmpty() && email.isNotEmpty()) {Spacer(modifier = Modifier.height(16.dp))Card(elevation = 4.dp,modifier = Modifier.padding(16.dp)) {Column(modifier = Modifier.padding(16.dp)) {Text("提交成功", style = MaterialTheme.typography.h6)Spacer(modifier = Modifier.height(8.dp))Text("姓名: $name")Text("郵箱: $email")}}}}}
}

import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch@OptIn(ExperimentalMaterialApi::class)
@Composable
fun CategoryModalBottomSheet() {val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)val scope = rememberCoroutineScope()val categories = listOf("水果", "蔬菜", "零食", "飲料")// 商品數據val products = mapOf("水果" to listOf("蘋果", "香蕉", "橙子", "草莓", "葡萄", "西瓜", "芒果"),"蔬菜" to listOf("胡蘿卜", "西紅柿", "黃瓜", "土豆", "西蘭花", "洋蔥", "生菜"),"零食" to listOf("薯片", "巧克力", "餅干", "堅果", "糖果", "牛肉干", "果凍"),"飲料" to listOf("可樂", "雪碧", "果汁", "茶飲料", "咖啡", "牛奶", "礦泉水"))var selectedCategory by remember { mutableStateOf(categories.first()) }var selectedProduct by remember { mutableStateOf<String?>(null) }ModalBottomSheetLayout(sheetState = sheetState,sheetShape = MaterialTheme.shapes.large,sheetContent = {Column(modifier = Modifier.fillMaxWidth().padding(bottom = 30.dp)) {Box(modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp).wrapContentSize(Alignment.Center)) {Box(modifier = Modifier.width(32.dp).height(4.dp).clip(MaterialTheme.shapes.small).background(Color.Gray.copy(alpha = 0.3f)))}ScrollableTabRow(selectedTabIndex = categories.indexOf(selectedCategory),backgroundColor = Color.Transparent,edgePadding = 0.dp) {categories.forEachIndexed { index, category ->Tab(selected = selectedCategory == category,onClick = { selectedCategory = category },text = {Text(text = category,fontWeight = if (selectedCategory == category) FontWeight.Bold else FontWeight.Normal)},modifier = Modifier.padding(horizontal = 8.dp))}}// 商品列表LazyColumn(modifier = Modifier.fillMaxWidth().height(300.dp).padding(horizontal = 16.dp, vertical = 8.dp)) {items(products[selectedCategory] ?: emptyList()) { product ->ProductItem(product = product,isSelected = selectedProduct == product,onClick = {selectedProduct = productscope.launch { sheetState.hide() }})}}}}){Scaffold(topBar = {TopAppBar(title = { Text("商品選擇器") },backgroundColor = MaterialTheme.colors.primary)},content = { padding ->Box(modifier = Modifier.fillMaxSize().padding(padding),contentAlignment = Alignment.Center) {Column(horizontalAlignment = Alignment.CenterHorizontally) {Button(onClick = { scope.launch { sheetState.show() } },modifier = Modifier.padding(16.dp)) {Text("選擇商品")}if (selectedProduct != null) {Card(modifier = Modifier.padding(16.dp).fillMaxWidth().wrapContentHeight(),elevation = 4.dp) {Column(modifier = Modifier.padding(16.dp),horizontalAlignment = Alignment.CenterHorizontally) {Text(text = "已選擇商品",fontSize = 16.sp,fontWeight = FontWeight.Bold,modifier = Modifier.padding(bottom = 8.dp))Text(text = selectedProduct!!,fontSize = 24.sp,fontWeight = FontWeight.Bold,color = MaterialTheme.colors.primary)Spacer(modifier = Modifier.height(16.dp))Button(onClick = { selectedProduct = null },colors = ButtonDefaults.buttonColors(backgroundColor = Color.LightGray)) {Text("清除選擇")}}}}}}})}
}@Composablefun ProductItem(product: String,isSelected: Boolean,onClick: () -> Unit) {Box(modifier = Modifier.fillMaxWidth().height(56.dp).clickable(onClick = onClick).padding(vertical = 8.dp),contentAlignment = Alignment.CenterStart) {Row(verticalAlignment = Alignment.CenterVertically,modifier = Modifier.fillMaxSize()) {Text(text = product,fontSize = 16.sp,modifier = Modifier.weight(1f))if (isSelected) {Icon(painter = painterResource(id = android.R.drawable.checkbox_on_background),contentDescription = "已選擇",tint = MaterialTheme.colors.primary)}}Divider(color = Color.LightGray.copy(alpha = 0.5f),modifier = Modifier.fillMaxWidth().height(0.5.dp).align(Alignment.BottomCenter))}}

注意:
1 狀態管理,使用rememberModalBottomSheetState()控制彈窗的展開/折疊狀態。
2 避免彈窗內容過多，必要時分頁或滾動。
3 性能優化,復雜內容使用LazyColumn或LazyRow 避免卡頓。避免在彈窗內加載大量數據，可預加載或分頁。