https://kotlinlang.org logo
#compose
Title
# compose
t

Travis Griggs

03/06/2023, 7:43 PM
I'm having an issue with ModalBottomSheet, which I'm hoping is just a learning curve gotcha of some sort. I'm presenting list of options to choose from (shown in image). The channel list is usually about that long, but there is a degenerate case where it becomes longer than what the screen can show. So I put the an inner column around the number choices and added
modifier = Modifer.verticalScroll(rememberScrollState())
. Two issues arise when I do this: 1. If I drag down on the drag bar, the sheet dismisses properly, but if I drag down on the scrollable part of the list, it will scroll if it needs to scroll, or swipe the menu down, but it never actually dismisses it. It's just gone and the UI won't respond to anything anymore 2. If the list is short enough, the CANCEL button will be shown at the bottom, but if it's longer, it dissapears. Even if I scroll the list to the bottom. I want that part on screen always just like the prompt at the top. I'll drop the whole code in thread. I am using `
Copy code
androidx.compose.material3:material3:1.1.0-alpha06
(alpha07 creates an unholy storm of build errors I don't understand) Is there something I need to do differently to get this to work? Or is it a "bug/feature" of this new/evolving ModalBottomSheet?
Copy code
if (showChannelList) {
         val closeList = { showChannelList = false }
         ModalBottomSheet(
            onDismissRequest = closeList,
            sheetState = rememberSheetState(skipHalfExpanded = true)
         ) {
            Text(
               text = "Change Channel",
               modifier = Modifier.fillMaxWidth(),
               color = colorResource(id = R.color.instruction_gray),
               fontSize = 10.sp,
               textAlign = TextAlign.Center
            )
            Column(
               modifier = Modifier
                  .padding(horizontal = 16.dp)
//                .verticalScroll(rememberScrollState())
            ) {
               (hub.channelBounds)?.filter { candidate -> candidate != hub.channel }
                  ?.forEach { candidate ->
                     TextButton(
                        onClick = {
                           targetChannel = candidate
                           closeList()
                        }, modifier = Modifier.fillMaxWidth()
                     ) {
                        Text(text = "${candidate}")
                     }
                  }
            }
            Button(
               onClick = closeList,
               modifier = Modifier.fillMaxWidth().padding(16.dp),
               shape = RoundedCornerShape(percent = 50),
               colors = ButtonDefaults.buttonColors(containerColor = colorResource(id = R.color.close_red))
            ) { Text(text = "Cancel") }
         }
      }
12 Views