Anonymous
Как отключить эффект BottomSheetScaffold Bounce/Jump, когда лист полностью развернут
Сообщение
Anonymous » 28 ноя 2024, 02:03
Я использую BottomSheetScaffold в одном из своих проектов и просто помещаю некоторый контент на нижний лист, но когда я смахиваю вверх по развернутому листу, лист подпрыгивает/подпрыгивает, открывая содержимое фона.
Есть ли способ удалить этот эффект в BottomSheetScaffold? Когда оно развернуто, пролистывание не должно отскакивать от нижнего листа.
Визуальное представление прилагается ниже:
Код, о котором идет речь (не обращайте внимания на пользовательские значения темы):
Код: Выделить всё
val scaffoldState = rememberBottomSheetScaffoldState()
var currentSheetStat by remember { mutableStateOf(SheetContent.BookingRide) }
var sheetPeekHeight by remember {
mutableStateOf(420.dp)
}
BottomSheetScaffold(
scaffoldState = scaffoldState,
modifier = Modifier.fillMaxSize(),
sheetPeekHeight = sheetPeekHeight,
sheetShadowElevation = 0.dp,
sheetTonalElevation = 0.dp,
containerColor = Color.Transparent,
sheetContent = {
Column {
Column(
Modifier
.padding(
start = BnTheme.gaps.component,
end = BnTheme.gaps.component,
bottom = BnTheme.gaps.component
)
.fillMaxWidth())
{
Row(verticalAlignment = Alignment.CenterVertically) {
if(currentSheetStat == SheetContent.RideStarted) {
BnPebbleMedium(pebbleText = stringResource(id = commonR.string.sos),
hasLeadingIcon = true, leadingIcon = painterResource(id = commonR.drawable.ic_alert_badge),
leadingIconTint = BnTheme.colors.error, pebbleTextColor = BnTheme.colors.error,
pebbleContainer = BnTheme.colors.surfaceContainer)
}
Spacer(modifier = Modifier.weight(1f))
Card(
shape = RoundedCornerShape(100),
colors = CardDefaults.cardColors(
containerColor = BnTheme.colors.surfaceContainer
),
modifier = Modifier
.size(48.dp)
) {
Column(horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxSize()) {
Icon(
painter = painterResource(id = commonR.drawable.ic_locate),
contentDescription = null, Modifier.size(24.dp),
tint = shades_dark_blue_0
)
}
}
}
}
Card(
Modifier
.fillMaxWidth()
.background(Color.Transparent),
shape = RoundedCornerShape(topStart = BnTheme.cornerRadius.crL, topEnd = BnTheme.cornerRadius.crL),
colors = CardDefaults.cardColors(
containerColor = BnTheme.colors.surfaceContainer
),
elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
) {
AnimatedContent(
targetState = currentSheetStat,
label = "",
) {
Crossfade(targetState = it, label = "bottom sheet animation") {
when(it) {
SheetContent.BookingRide -> {
//not important
}
SheetContent.ConfirmPickupLocation -> {
//not important
}
SheetContent.SendingRequest -> {
sheetPeekHeight = 220.dp
SheetContentSendingRequest{
currentSheetStat = SheetContent.NavigatorArrival
}
}
SheetContent.NavigatorArrival -> {
// not important
}
SheetContent.RideStarted -> {
//not important
}
}
}
}
}
}
},
sheetContainerColor = Color.Transparent,
sheetDragHandle = {
HorizontalDivider(thickness = 0.dp,
color = Color.Transparent)
}
) {
Box(modifier = Modifier.fillMaxSize()) {
ScreenContent() // the background map implementation
}
}
А это содержимое листа
Код: Выделить всё
@Composable
fun SheetContentSendingRequest( onRideRequestSent : () -> Unit ) {
Column(modifier = Modifier
.fillMaxWidth()
.padding(
horizontal = BnTheme.gaps.component,
vertical = BnTheme.gaps.element
))
{
SheetDragHandle()
Spacer(modifier = Modifier.height(BnTheme.gaps.component))
Column (
Modifier
.padding(vertical = BnTheme.gaps.element)
.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally){
BnText(
text = stringResource(id = commonR.string.sent_ride_request),
style = BnTheme.typography.titleSmallSemiBold,
color = BnTheme.colors.bodyPrimary
)
Row {
Row {
BnText(
text = stringResource(commonR.string.you_will_reach_destination_by),
style = BnTheme.typography.bodyMediumMedium,
color = BnTheme.colors.bodySecondary
)
Spacer(modifier = Modifier.height(BnTheme.gaps.mini))
BnText(
text = "11:11 AM",
style = BnTheme.typography.bodyMediumMedium,
color = BnTheme.colors.link
)
}
}
}
Spacer(modifier = Modifier.height(BnTheme.gaps.component))
Row {
LinearProgressIndicator(
progress = 1f,
trackColor = BnTheme.colors.primaryButtonOff,
color = BnTheme.colors.primaryButtonOn,
modifier = Modifier
.weight(1f)
.padding(horizontal = 12.dp)
.clip(RoundedCornerShape(100))
)
LinearProgressIndicator(
progress = 0f,
trackColor = BnTheme.colors.primaryButtonOff,
color = BnTheme.colors.primaryButtonOn,
modifier = Modifier
.weight(1f)
.padding(horizontal = 12.dp)
.clip(RoundedCornerShape(100))
)
LinearProgressIndicator(
progress = 0f,
trackColor = BnTheme.colors.primaryButtonOff,
color = BnTheme.colors.primaryButtonOn,
modifier = Modifier
.weight(1f)
.padding(horizontal = 12.dp)
.clip(RoundedCornerShape(100))
)
LinearProgressIndicator(
progress = 0f,
trackColor = BnTheme.colors.primaryButtonOff,
color = BnTheme.colors.primaryButtonOn,
modifier = Modifier
.weight(1f)
.padding(horizontal = 12.dp)
.clip(RoundedCornerShape(100))
)
}
Spacer(modifier = Modifier.height(BnTheme.gaps.component))
Icon(painter = painterResource(id = commonR.drawable.vector_shared_ride), contentDescription = null,
tint = Color.Unspecified, modifier = Modifier
.height(124.dp)
.align(Alignment.CenterHorizontally)
.noRippleClickable { onRideRequestSent() })
Spacer(modifier = Modifier.height(BnTheme.gaps.component))
}
}
Подробнее здесь:
https://stackoverflow.com/questions/779 ... ll-expande
1732748585
Anonymous
Я использую BottomSheetScaffold в одном из своих проектов и просто помещаю некоторый контент на нижний лист, но когда я смахиваю вверх по развернутому листу, лист подпрыгивает/подпрыгивает, открывая содержимое фона. Есть ли способ удалить этот эффект в BottomSheetScaffold? Когда оно развернуто, пролистывание не должно отскакивать от нижнего листа. Визуальное представление прилагается ниже: [img]https://i.sstatic.net/YPdd6.gif[/img] Код, о котором идет речь (не обращайте внимания на пользовательские значения темы): [code]val scaffoldState = rememberBottomSheetScaffoldState() var currentSheetStat by remember { mutableStateOf(SheetContent.BookingRide) } var sheetPeekHeight by remember { mutableStateOf(420.dp) } BottomSheetScaffold( scaffoldState = scaffoldState, modifier = Modifier.fillMaxSize(), sheetPeekHeight = sheetPeekHeight, sheetShadowElevation = 0.dp, sheetTonalElevation = 0.dp, containerColor = Color.Transparent, sheetContent = { Column { Column( Modifier .padding( start = BnTheme.gaps.component, end = BnTheme.gaps.component, bottom = BnTheme.gaps.component ) .fillMaxWidth()) { Row(verticalAlignment = Alignment.CenterVertically) { if(currentSheetStat == SheetContent.RideStarted) { BnPebbleMedium(pebbleText = stringResource(id = commonR.string.sos), hasLeadingIcon = true, leadingIcon = painterResource(id = commonR.drawable.ic_alert_badge), leadingIconTint = BnTheme.colors.error, pebbleTextColor = BnTheme.colors.error, pebbleContainer = BnTheme.colors.surfaceContainer) } Spacer(modifier = Modifier.weight(1f)) Card( shape = RoundedCornerShape(100), colors = CardDefaults.cardColors( containerColor = BnTheme.colors.surfaceContainer ), modifier = Modifier .size(48.dp) ) { Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center, modifier = Modifier.fillMaxSize()) { Icon( painter = painterResource(id = commonR.drawable.ic_locate), contentDescription = null, Modifier.size(24.dp), tint = shades_dark_blue_0 ) } } } } Card( Modifier .fillMaxWidth() .background(Color.Transparent), shape = RoundedCornerShape(topStart = BnTheme.cornerRadius.crL, topEnd = BnTheme.cornerRadius.crL), colors = CardDefaults.cardColors( containerColor = BnTheme.colors.surfaceContainer ), elevation = CardDefaults.cardElevation(defaultElevation = 2.dp) ) { AnimatedContent( targetState = currentSheetStat, label = "", ) { Crossfade(targetState = it, label = "bottom sheet animation") { when(it) { SheetContent.BookingRide -> { //not important } SheetContent.ConfirmPickupLocation -> { //not important } SheetContent.SendingRequest -> { sheetPeekHeight = 220.dp SheetContentSendingRequest{ currentSheetStat = SheetContent.NavigatorArrival } } SheetContent.NavigatorArrival -> { // not important } SheetContent.RideStarted -> { //not important } } } } } } }, sheetContainerColor = Color.Transparent, sheetDragHandle = { HorizontalDivider(thickness = 0.dp, color = Color.Transparent) } ) { Box(modifier = Modifier.fillMaxSize()) { ScreenContent() // the background map implementation } } [/code] А это содержимое листа [code]@Composable fun SheetContentSendingRequest( onRideRequestSent : () -> Unit ) { Column(modifier = Modifier .fillMaxWidth() .padding( horizontal = BnTheme.gaps.component, vertical = BnTheme.gaps.element )) { SheetDragHandle() Spacer(modifier = Modifier.height(BnTheme.gaps.component)) Column ( Modifier .padding(vertical = BnTheme.gaps.element) .fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally){ BnText( text = stringResource(id = commonR.string.sent_ride_request), style = BnTheme.typography.titleSmallSemiBold, color = BnTheme.colors.bodyPrimary ) Row { Row { BnText( text = stringResource(commonR.string.you_will_reach_destination_by), style = BnTheme.typography.bodyMediumMedium, color = BnTheme.colors.bodySecondary ) Spacer(modifier = Modifier.height(BnTheme.gaps.mini)) BnText( text = "11:11 AM", style = BnTheme.typography.bodyMediumMedium, color = BnTheme.colors.link ) } } } Spacer(modifier = Modifier.height(BnTheme.gaps.component)) Row { LinearProgressIndicator( progress = 1f, trackColor = BnTheme.colors.primaryButtonOff, color = BnTheme.colors.primaryButtonOn, modifier = Modifier .weight(1f) .padding(horizontal = 12.dp) .clip(RoundedCornerShape(100)) ) LinearProgressIndicator( progress = 0f, trackColor = BnTheme.colors.primaryButtonOff, color = BnTheme.colors.primaryButtonOn, modifier = Modifier .weight(1f) .padding(horizontal = 12.dp) .clip(RoundedCornerShape(100)) ) LinearProgressIndicator( progress = 0f, trackColor = BnTheme.colors.primaryButtonOff, color = BnTheme.colors.primaryButtonOn, modifier = Modifier .weight(1f) .padding(horizontal = 12.dp) .clip(RoundedCornerShape(100)) ) LinearProgressIndicator( progress = 0f, trackColor = BnTheme.colors.primaryButtonOff, color = BnTheme.colors.primaryButtonOn, modifier = Modifier .weight(1f) .padding(horizontal = 12.dp) .clip(RoundedCornerShape(100)) ) } Spacer(modifier = Modifier.height(BnTheme.gaps.component)) Icon(painter = painterResource(id = commonR.drawable.vector_shared_ride), contentDescription = null, tint = Color.Unspecified, modifier = Modifier .height(124.dp) .align(Alignment.CenterHorizontally) .noRippleClickable { onRideRequestSent() }) Spacer(modifier = Modifier.height(BnTheme.gaps.component)) } [/code] } Подробнее здесь: [url]https://stackoverflow.com/questions/77974570/how-to-disable-bottomsheetscaffold-bounce-jump-effect-when-sheet-is-full-expande[/url]