可以采用以下代码示例中的方法来避免重组计数过多的问题。
在使用 ModalBottomSheetLayout 时,应该遵循以下几个步骤:
具体的代码实例如下所示:
@OptIn(androidx.compose.runtime.ExperimentalComposeApi::class)
@Composable
fun MyModalBottomSheet() {
val coroutineScope = rememberCoroutineScope()
// 异步加载 ModalBottomSheetContent
val modalBottomSheetContent = remember { mutableStateOf<@Composable () -> Unit> { } }
LaunchedEffect(Unit) {
modalBottomSheetContent.value = {
ModalBottomSheetContent {
Surface(elevation = 8.dp) {
Column(Modifier.padding(16.dp)) {
Text(text = "Hello World!")
}
}
}
}
}
// 使用 ModalBottomSheetScaffold 包装
ModalBottomSheetScaffold(
sheetContent = modalBottomSheetContent.value,
sheetShape = RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp),
sheetBehavior = ModalBottomSheetBehavior.Expand,
sheetBackgroundColor = MaterialTheme.colors.background,
sheetPeekHeight = 0.dp,
scaffoldState = rememberModalBottomSheetScaffoldState(),
coroutineScope = coroutineScope
) {
// 使用 rememberInfiniteTransition 创建 TransitionScope
val infiniteTransition = rememberInfiniteTransition()
val transitionState = infiniteTransition.animateFloat(
initialValue = 1f,
targetValue = 0f,
animationSpec = infiniteRepeatable(
animation = tween(
durationMillis = 1000,
easing = LinearEasing
)
)
)
Column(Modifier.fillMaxSize()) {
AnimatedLogo(
transitionState = transitionState,
modifier = Modifier.weight(1f)
)
Button(onClick = {
coroutineScope.launch {
scaffoldState.bottomSheetState.expand()
}
}) {
Text("Show Bottom Sheet")
}
}
}
}
@Composable
fun AnimatedLogo(
transitionState: Float,
modifier: Modifier = Modifier
) {
Box(
modifier
.graphicsLayer(
translationY = (-64).dp * transitionState