android - 如何删除 Jetpack Compose 中底部工作表占用的空间

Question

我有几个文本字段和按钮，用于打开底部抽屉。如何删除底部栏占用的空白空间我不想要空白空间，以便我的文本字段靠近我的按钮。我尝试使用修改器，但降低高度后，底部栏在屏幕中可见。是否可以删除多余的空间

我的屏幕

 Scaffold(scaffoldState = scaffoldState) {
    Column(Modifier.padding(16.dp)) {

        BottomDrawerSample()

        OutlinedTextField(value = text,
            onValueChange = { text = it },
            label = { Text(text = "Title") },
            singleLine = true)

        OutlinedTextField(value = text,
            onValueChange = { text = it },
            label = { Text(text = "Brand") },
            singleLine = true)
     }
   }

底部抽屉

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun BottomDrawerSample() {
val (gesturesEnabled, toggleGesturesEnabled) = remember { mutableStateOf(true) }
val scope = rememberCoroutineScope()
Column {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .toggleable(
                value = gesturesEnabled,
                onValueChange = toggleGesturesEnabled
            )
    ) {
        Checkbox(gesturesEnabled, null)
        Text(text = if (gesturesEnabled) "Gestures Enabled" else "Gestures Disabled")
    }
    val drawerState = rememberBottomDrawerState(BottomDrawerValue.Closed)
    BottomDrawer(
        gesturesEnabled = gesturesEnabled,
        drawerState = drawerState,
        drawerContent = {
            Button(
                modifier = Modifier
                    .align(Alignment.CenterHorizontally)
                    .padding(top = 16.dp),
                onClick = { scope.launch { drawerState.close() } },
                content = { Text("Close Drawer") }
            )
            LazyColumn {
                items(25) {
                    ListItem(
                        text = { Text("Item $it") },
                        icon = {
                            Icon(
                                Icons.Default.Favorite,
                                contentDescription = "Localized description"
                            )
                        }
                    )
                }
            }
        },
        content = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                val openText = if (gesturesEnabled) "▲▲▲ Pull up ▲▲▲" else "Click the button!"
                Text(text = if (drawerState.isClosed) openText else "▼▼▼ Drag down ▼▼▼")
                Spacer(Modifier.height(20.dp))
                Button(onClick = { scope.launch { drawerState.open() } }) {
                    Text("Click to open")
                }
            }
        }
    )
}
}

Answer 1

您应该将脚手架放在 BottomDrawer 的内容参数内。

考虑下面的例子:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material.BottomDrawer
import androidx.compose.material.BottomDrawerValue
import androidx.compose.material.Button
import androidx.compose.material.Checkbox
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.ListItem
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.rememberBottomDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@Composable
fun Tear() {
    BottomDrawerSample()
}


@Composable
@OptIn(ExperimentalMaterialApi::class)
fun BottomDrawerSample() {
    val (gesturesEnabled, toggleGesturesEnabled) = remember { mutableStateOf(true) }
    val scope = rememberCoroutineScope()
    Column {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .toggleable(
                    value = gesturesEnabled,
                    onValueChange = toggleGesturesEnabled
                )
                .background(Color.Red)
        ) {
            Checkbox(gesturesEnabled, null)
            Text(text = if (gesturesEnabled) "Gestures Enabled" else "Gestures Disabled")
        }
        val drawerState = rememberBottomDrawerState(BottomDrawerValue.Closed)
        BottomDrawer(
            gesturesEnabled = gesturesEnabled,
            drawerState = drawerState,
            drawerContent = {
                Button(
                    modifier = Modifier
                        .align(Alignment.CenterHorizontally)
                        .padding(top = 16.dp),
                    onClick = { scope.launch { drawerState.close() } },
                    content = { Text("Close Drawer") }
                )
                LazyColumn {
                    items(25) {
                        ListItem(
                            text = { Text("Item $it") },
                            icon = {
                                Icon(
                                    Icons.Default.Favorite,
                                    contentDescription = "Localized description"
                                )
                            }
                        )
                    }
                }
            },
            content = {
                Scaffold { padding ->
                    var text by remember {
                        mutableStateOf("")
                    }
                    Column(Modifier.padding(16.dp)) {
                        Column(
                            modifier = Modifier
                                .fillMaxSize()
                                .padding(16.dp),
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            val openText = if (gesturesEnabled) "▲▲▲ Pull up ▲▲▲" else "Click the button!"
                            Text(text = if (drawerState.isClosed) openText else "▼▼▼ Drag down ▼▼▼")
                            Spacer(Modifier.height(20.dp))
                            Button(onClick = { scope.launch { drawerState.open() } }) {
                                Text("Click to open")
                            }
                            OutlinedTextField(
                                value = text,
                                onValueChange = {
                                    text = it
                                },
                                label = { Text(text = "Title") },
                                singleLine = true
                            )

                            OutlinedTextField(
                                value = text,
                                onValueChange = { text = it },
                                label = { Text(text = "Brand") },
                                singleLine = true
                            )
                        }
                    }
                }
            }
        )
    }
}

<表类=“s-表”><标题>