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

Question

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

\n

我的屏幕

\n

 Scaffold(scaffoldState = scaffoldState) {\n    Column(Modifier.padding(16.dp)) {\n\n        BottomDrawerSample()\n\n        OutlinedTextField(value = text,\n            onValueChange = { text = it },\n            label = { Text(text = "Title") },\n            singleLine = true)\n\n        OutlinedTextField(value = text,\n            onValueChange = { text = it },\n            label = { Text(text = "Brand") },\n            singleLine = true)\n     }\n   }\n

\n

底部抽屉

\n

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

\n

Answer 1

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

\n

考虑下面的例子：

\n

\nimport androidx.compose.foundation.background\nimport androidx.compose.foundation.layout.Column\nimport androidx.compose.foundation.layout.Row\nimport androidx.compose.foundation.layout.Spacer\nimport androidx.compose.foundation.layout.fillMaxSize\nimport androidx.compose.foundation.layout.fillMaxWidth\nimport androidx.compose.foundation.layout.height\nimport androidx.compose.foundation.layout.padding\nimport androidx.compose.foundation.lazy.LazyColumn\nimport androidx.compose.foundation.selection.toggleable\nimport androidx.compose.material.BottomDrawer\nimport androidx.compose.material.BottomDrawerValue\nimport androidx.compose.material.Button\nimport androidx.compose.material.Checkbox\nimport androidx.compose.material.ExperimentalMaterialApi\nimport androidx.compose.material.Icon\nimport androidx.compose.material.ListItem\nimport androidx.compose.material.OutlinedTextField\nimport androidx.compose.material.Scaffold\nimport androidx.compose.material.Text\nimport androidx.compose.material.icons.Icons\nimport androidx.compose.material.icons.filled.Favorite\nimport androidx.compose.material.rememberBottomDrawerState\nimport androidx.compose.runtime.Composable\nimport androidx.compose.runtime.getValue\nimport androidx.compose.runtime.mutableStateOf\nimport androidx.compose.runtime.remember\nimport androidx.compose.runtime.rememberCoroutineScope\nimport androidx.compose.runtime.setValue\nimport androidx.compose.ui.Alignment\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.graphics.Color\nimport androidx.compose.ui.unit.dp\nimport kotlinx.coroutines.launch\n\n@Composable\nfun Tear() {\n    BottomDrawerSample()\n}\n\n\n@Composable\n@OptIn(ExperimentalMaterialApi::class)\nfun BottomDrawerSample() {\n    val (gesturesEnabled, toggleGesturesEnabled) = remember { mutableStateOf(true) }\n    val scope = rememberCoroutineScope()\n    Column {\n        Row(\n            modifier = Modifier\n                .fillMaxWidth()\n                .toggleable(\n                    value = gesturesEnabled,\n                    onValueChange = toggleGesturesEnabled\n                )\n                .background(Color.Red)\n        ) {\n            Checkbox(gesturesEnabled, null)\n            Text(text = if (gesturesEnabled) "Gestures Enabled" else "Gestures Disabled")\n        }\n        val drawerState = rememberBottomDrawerState(BottomDrawerValue.Closed)\n        BottomDrawer(\n            gesturesEnabled = gesturesEnabled,\n            drawerState = drawerState,\n            drawerContent = {\n                Button(\n                    modifier = Modifier\n                        .align(Alignment.CenterHorizontally)\n                        .padding(top = 16.dp),\n                    onClick = { scope.launch { drawerState.close() } },\n                    content = { Text("Close Drawer") }\n                )\n                LazyColumn {\n                    items(25) {\n                        ListItem(\n                            text = { Text("Item $it") },\n                            icon = {\n                                Icon(\n                                    Icons.Default.Favorite,\n                                    contentDescription = "Localized description"\n                                )\n                            }\n                        )\n                    }\n                }\n            },\n            content = {\n                Scaffold { padding ->\n                    var text by remember {\n                        mutableStateOf("")\n                    }\n                    Column(Modifier.padding(16.dp)) {\n                        Column(\n                            modifier = Modifier\n                                .fillMaxSize()\n                                .padding(16.dp),\n                            horizontalAlignment = Alignment.CenterHorizontally\n                        ) {\n                            val openText = if (gesturesEnabled) "\xe2\x96\xb2\xe2\x96\xb2\xe2\x96\xb2 Pull up \xe2\x96\xb2\xe2\x96\xb2\xe2\x96\xb2" else "Click the button!"\n                            Text(text = if (drawerState.isClosed) openText else "\xe2\x96\xbc\xe2\x96\xbc\xe2\x96\xbc Drag down \xe2\x96\xbc\xe2\x96\xbc\xe2\x96\xbc")\n                            Spacer(Modifier.height(20.dp))\n                            Button(onClick = { scope.launch { drawerState.open() } }) {\n                                Text("Click to open")\n                            }\n                            OutlinedTextField(\n                                value = text,\n                                onValueChange = {\n                                    text = it\n                                },\n                                label = { Text(text = "Title") },\n                                singleLine = true\n                            )\n\n                            OutlinedTextField(\n                                value = text,\n                                onValueChange = { text = it },\n                                label = { Text(text = "Brand") },\n                                singleLine = true\n                            )\n                        }\n                    }\n                }\n            }\n        )\n    }\n}\n

\n

\n\n\n\n\n\n\n\n\n\n