Closed varpihovsky closed 1 year ago
It would be great if this could be fixed. Currently running into this issue and have not found a solution so far.
I tried to use a Column
with verticalScroll
modifier, but unfortunately that does not work either due to https://github.com/JetBrains/compose-jb/issues/976.
I tried to use a
Column
withverticalScroll
modifier, but unfortunately that does not work either due to #976.
Just use offset
modifier to compensate indentation. It doesn't look good but at least it's possible to use
Putting scrollable content inside an AlertDialog
is actually not a supported use-case. This is the case in Android too: https://issuetracker.google.com/issues/217151230#comment7
We do have plans to add a non-opinionated, "clean" dialog widget where you could put any content, and you can follow that effort here: https://github.com/JetBrains/compose-jb/issues/933
In the meanwhile, you could use this basic implementation that uses Popup
:
import androidx.compose.foundation.LocalScrollbarStyle
import androidx.compose.foundation.VerticalScrollbar
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollbarAdapter
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.KeyEventType
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.type
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.*
import androidx.compose.ui.window.*
import kotlinx.coroutines.*
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun PopupDialog(
onDismissRequest: () -> Unit,
content: @Composable () -> Unit
) {
Popup(
popupPositionProvider = object : PopupPositionProvider {
override fun calculatePosition(
anchorBounds: IntRect,
windowSize: IntSize,
layoutDirection: LayoutDirection,
popupContentSize: IntSize
): IntOffset = IntOffset.Zero
},
focusable = true,
onDismissRequest = onDismissRequest,
onKeyEvent = {
if ((it.type == KeyEventType.KeyDown) && (it.key == Key.Escape)) {
onDismissRequest()
true
} else {
false
}
},
) {
val scrimColor = Color.Black.copy(alpha = 0.32f)
Box(
modifier = Modifier
.fillMaxSize()
.background(scrimColor)
.pointerInput(onDismissRequest) {
detectTapGestures(onPress = { onDismissRequest() })
},
contentAlignment = Alignment.Center
) {
Surface(Modifier.pointerInput(onDismissRequest) {
detectTapGestures(onPress = {
// Workaround to disable clicks on Surface background https://github.com/JetBrains/compose-jb/issues/2581
})
}, elevation = 24.dp) {
content()
}
}
}
}
fun main() = singleWindowApplication(
state = WindowState(width = 640.dp, height = 480.dp)
) {
var dialogVisible by remember { mutableStateOf(true) }
if (dialogVisible){
PopupDialog(
onDismissRequest = { dialogVisible = false },
) {
Box(
modifier = Modifier.size(300.dp, 200.dp)
) {
val state = rememberLazyListState()
LazyColumn(
modifier = Modifier.padding(end = LocalScrollbarStyle.current.thickness),
state = state,
) {
items(500) { index ->
Text(
text = "Row $index",
modifier = Modifier.padding(16.dp).fillMaxWidth(),
)
}
}
VerticalScrollbar(
modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight(),
adapter = rememberScrollbarAdapter(scrollState = state),
)
}
}
}
}
Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.
Compose 1.0.0-alpha3, Linux. Executing following code:
Causes following exception: