android compose ModalBottomSheet 底部动作条使用

在此示例中，请注意以下事项：

showBottomSheet 用于控制应用是否显示底部动作条。
sheetState 是 SheetState 的一个实例，其中 skipPartiallyExpanded 为 false。
ModalBottomSheet 采用一个修饰符，以确保其在完全展开时填充屏幕。
ModalBottomSheet 将 sheetState 作为其 sheetState 参数的值。
- 因此，工作表在首次打开时仅部分显示。然后，用户可以拖动或滑动该底部动作条，以将其全屏显示或将其关闭。
onDismissRequest lambda 用于控制用户尝试关闭底部动作条时会发生什么情况。在本例中，它只会移除工作表。

复制代码

package com.wn.androidcomposedemo1.basegoogle

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme

/**
 * Author : wn
 * Email : maoning20080808@163.com
 * Date : 2026/6/21 21:36
 * Description : 底部动作条
 */
class ModalBottomSheetActivity : ComponentActivity(){

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

        setContent {
            AndroidComposeDemo1Theme() {
                Surface(
                    modifier = Modifier.fillMaxWidth(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    PartialBottomSheet()
                }
            }
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Preview
    @Composable
    fun PartialBottomSheet(){
        var showBottomSheet by remember { mutableStateOf(false) }
        val sheetState = rememberModalBottomSheetState (skipPartiallyExpanded = false)

        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                showBottomSheet = true
            }){
                Text("显示底部动作条")
            }

            if(showBottomSheet){
                ModalBottomSheet(
                    modifier = Modifier.fillMaxHeight(),
                    sheetState = sheetState,
                    onDismissRequest = {showBottomSheet = false}
                ) {
                    Text("上滑打开，下滑消失",
                        modifier = Modifier.padding(16.dp))
                }
            }
        }
    }
}

android compose ModalBottomSheet 底部动作条 使用

android compose ModalBottomSheet 底部动作条使用