The title won't minimize dialog in JetPack Compose BottomSheetDialog with rememberNestedScrollInteropConnection

Question

I have BottomDialog Fragment which consists only of Composable (Row(title) and LazyColumn). The first issue I faced was when you scroll your list down and then you try to scroll up list won't scroll and the dialog starts to minimize. This is solved with

modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection())

But now user can't minimize a dialog when he tries to do it by touching a title. And there is my question, How to solve this?

Minimum reproducible code

During creating this example I found that I can maximize dialog when touching the title, also I can start moving the action going to the top with my finger (to start to expand it) and then move the finger to the bottom of the screen, in this way the dialog will be dismissed, but still can't minimize it in a non-tricky way.

ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                Theme {
                    Column(modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection())) {
                        Row {
                            Text(
                                modifier = Modifier
                                    .padding(16.dp)
                                    .fillMaxWidth(),
                                text = "Title"
                            )
                        }
                        LazyColumn(
                            Modifier
                                .weight(1f)
                                .fillMaxWidth()
                        ) {
                            items(100) {
                                Text(
                                    text = "Item $it",
                                    modifier = Modifier
                                        .padding(16.dp)
                                        .fillMaxWidth(),
                                )
                            }
                        }
                    }
                }
            }
        }

Please do not propose BottomSheetScaffold. Because I want to create a standardized bottom dialog. And to use it I will need just pass a list of items and a Compose function for one item. IMO BottomSheetScaffold shouldn't be released at all, cause it was designed "not well". Just imagine earlier before Jetpack Compose you write your code around the bottom dialog, nice layering. No.

score 1 · Accepted Answer · answered Feb 25 '23 at 12:03

1

The documentation mentions:

To resolve this, make sure you also set scrollable modifiers to these types of nested composables.

modifier = Modifier.verticalScroll(rememberScrollState())

Placing this on the header will fix it.

answered Feb 25 '23 at 12:03

Edward van Raak

4,841
3
24
38

For me this only works well if the inner list is scrolle all the way to the top, otherwise it results in really buggy behavior – StarterPack Mar 24 '23 at 16:57

score 0 · Answer 2 · answered Feb 17 '23 at 11:04

0

As a temp decision. I just think of LazyColumn works properly so I need to wrap my header to the LazyColumn.

So I created this function. And Just pass here any Composable

@Composable
fun TrickyLazyColumn(content: @Composable () -> Unit) {
    LazyColumn {
        items(
            items = listOf(1),
            itemContent = {
                content.invoke()
            })
    }
}

answered Feb 17 '23 at 11:04

Joao

374
3
16

Worked for me, but surely this is not intended? I'm wondering myself what part of the `LazyColumn` is actually fixing the behavior. Maybe a certain modifier could also fix it rather than wrapping the entire composable? – Edward van Raak Feb 23 '23 at 15:33
So what I discovered was that `modifier = Modifier.verticalScroll(rememberScrollState())` on the header also worked for me? Can you confirm if that also works for you? I think this also makes sense considering the documentation mentions: "To resolve this, make sure you also set scrollable modifiers to these types of nested composables. You can refer to the previous section on Nested scrolling for more detailed information" – Edward van Raak Feb 23 '23 at 15:42
1

It works like a charm. I thought about verticalScroll but I've tried to wrap the whole dialog with it and received some crash, so I skipped this version. Thanks for advising! Add your decision as an answer, I will mark it as a correct answer – Joao Feb 24 '23 at 11:38

The title won't minimize dialog in JetPack Compose BottomSheetDialog with rememberNestedScrollInteropConnection

2 Answers2

Linked