浮动按钮随底片 Jetpack Compose 一起上升

Question

I don't understand why the FloatingButton is going up with the BottomSheet .

I tried to change the sheetElevation which is higher than the elevation of the FloatingButton , but the issue remains. That's because the code inside BottomSheetScaffoldStack says to move the FloatingButton up along with the BottomSheet . Is there any way to avoid that?

Here is the code of the BottomSheetScaffold :

BottomSheetScaffold(
  scaffoldState = bottomSheetScaffoldState,
  topBar = { TopBar(
    areButtonShowed = true,
    title = topBarTitle,
    onBackPressed = { BendRouter.navigateTo(onBackDestination) }
  ) },
  floatingActionButtonPosition = FabPosition.Center,
  floatingActionButton = {
    ExtendedFloatingButton(
      text = context.getString(R.string.start),
      onClick = {}, // TODO
      modifier = Modifier
        .fillMaxWidth()
        .height(45.dp)
        .padding(
          start = 24.dp,
          end = 24.dp
        ),
      backgroundColor = PureWhite
    )
    
    Spacer(modifier = Modifier.height(150.dp))
  },
  sheetBackgroundColor = PureWhite,
  sheetPeekHeight = 0.dp,
  sheetElevation = 70.dp,
  sheetShape = RoundedCornerShape(50.dp),
  sheetContent = {
    openStretchDetails?.let { stretch ->
      BottomSheetView(stretch = stretch)
    }
  },
  content = { RoutinePageView(viewModel) }
)

And ExtendedFloatingButton :

@Composable
fun ExtendedFloatingButton(
  text: String,
  @DrawableRes icon: Int? = null,
  onClick: () -> Unit,
  modifier: Modifier = Modifier,
  elevation: Dp = 12.dp,
  backgroundColor: Color
) {
  ExtendedFloatingActionButton(
    text = {
      Text(
        text = text.uppercase(),
        color = Gray,
        fontSize = 18.sp,
        maxLines = 1,
        fontWeight = FontWeight.Bold,
        letterSpacing = .5.sp
      )
    },
    onClick = onClick,
    icon = {
      icon?.let {
        Icon(
          painter = painterResource(id = it),
          contentDescription = ""
        )
      }
    },
    modifier = modifier,
    elevation = FloatingActionButtonDefaults.elevation(elevation),
    backgroundColor = backgroundColor
  )
}

Answer 1

SOLVED! The BottomSheetScaffold has a default behavior that you can see by clicking on it while pressing CTRL. Looking at BottomSheetScaffoldStack inside the BottomSheetScaffold.kt class you'll see how the FloatingButton is moved along with the BottomSheet .

To solve this problem I used ModalBottomSheetLayout instead of BottomSheetScaffold .

ModalBottomSheetLayout(
  sheetState = bottomState,
  sheetContent = {
    Box(Modifier.defaultMinSize(minHeight = 1.dp)) {
      openStretchDetails?.let { stretch ->
        BottomSheetView(stretch = stretch)
        coroutineScope.launch {
          bottomState.animateTo(ModalBottomSheetValue.Expanded)
        }
      }
    }
  },
  sheetBackgroundColor = PureWhite,
  sheetElevation = 16.dp,
  sheetShape = RoundedCornerShape(50.dp),
) {
  Scaffold(
    topBar = { TopBar(
      areButtonShowed = true,
      title = topBarTitle,
      onBackPressed = { BendRouter.navigateTo(onBackDestination) }
    ) },
    floatingActionButtonPosition = FabPosition.Center,
    floatingActionButton = {
      ExtendedFloatingButton(
        text = context.getString(R.string.start),
        onClick = {}, // TODO
        modifier = Modifier
          .fillMaxWidth()
          .height(45.dp)
          .padding(
            start = 24.dp,
            end = 24.dp
          ),
        backgroundColor = PureWhite
      )

      Spacer(modifier = Modifier.height(150.dp))
    },
    content = { RoutinePageView(viewModel) }
  )
}

Add this on the top:

  val bottomState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    confirmStateChange = { it != ModalBottomSheetValue.HalfExpanded }
  )
  val coroutineScope = rememberCoroutineScope()