Ensure that all the ModalBottomSheet can scroll.

This commit is contained in:
Benoit Marty 2026-04-27 10:23:56 +02:00
parent bf57223d05
commit 09ff3294d5
21 changed files with 88 additions and 22 deletions

View file

@ -14,6 +14,8 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
@ -38,11 +40,13 @@ fun SimpleModalBottomSheet(
onDismissRequest = onDismiss,
modifier = modifier,
sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
scrollable = false,
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
.padding(16.dp)
.verticalScroll(rememberScrollState()),
) {
Text(
title,

View file

@ -10,10 +10,13 @@ package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
@ -42,10 +45,15 @@ import io.element.android.libraries.designsystem.preview.sheetStateForPreview
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch
/**
* For parameter [scrollable], set it to true if the content of the sheet does not already contain a scrollable component, such as a LazyColumn,
* to avoid nested scroll issues. In this case, the content will be wrapped in a Column with verticalScroll.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ModalBottomSheet(
onDismissRequest: () -> Unit,
scrollable: Boolean,
modifier: Modifier = Modifier,
sheetState: SheetState = rememberModalBottomSheetState(),
shape: Shape = BottomSheetDefaults.ExpandedShape,
@ -79,8 +87,17 @@ fun ModalBottomSheet(
scrimColor = scrimColor,
dragHandle = dragHandle,
contentWindowInsets = contentWindowInsets,
content = content,
)
) {
if (scrollable) {
Column(
modifier = Modifier.verticalScroll(rememberScrollState()),
) {
content()
}
} else {
content()
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@ -112,6 +129,7 @@ private fun ContentToPreview() {
) {
ModalBottomSheet(
onDismissRequest = {},
scrollable = false,
) {
Text(
text = "Sheet Content",