Jetpack Compose：ModalBottomSheet 动画不流畅

Question

我正在开发 Jetpack Compose 项目，并使用 Material3 中的 ModalBottomSheet 在单击 FloatingActionButton 时显示底部工作表。但是，我遇到了工作表出现或消失时动画效果不流畅的问题。动画似乎滞后或不如预期流畅。

这是我正在做的事情的总结：

我有一个主屏幕可组合项，其中工作表可见性由布尔状态控制。 当状态为 true 时，将显示自定义底部工作表 (MyBottomSheet)。 底部工作表包含一个文本字段，我试图在该工作表出现时自动聚焦于它。 ModalBottomSheet 使用 RememberModalBottomSheetState 来管理其状态。 尽管遵循标准实现，但动画并不流畅。对于可能导致此问题的原因或如何提高动画的流畅度的任何建议，我将不胜感激。

MyTextField.kt

@Composable
fun MyTextField(modifier: Modifier = Modifier) {
var text by remember { mutableStateOf("") }
val focusRequester = remember { FocusRequester() }

TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Label") },
    modifier = modifier
        .fillMaxWidth()
        .focusRequester(focusRequester)
)

LaunchedEffect(Unit) {
    focusRequester.requestFocus()
}
}

MyBottomSheet.kt

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyBottomSheet(modifier: Modifier, onDismiss: () -> Unit) {
val modalBottomSheetState = rememberModalBottomSheetState()
val coroutineScope = rememberCoroutineScope()

LaunchedEffect(modalBottomSheetState.isVisible) {
    if (modalBottomSheetState.isVisible) {
        coroutineScope.launch {
            modalBottomSheetState.show()
        }
    }
}

ModalBottomSheet(
    onDismissRequest = { onDismiss() },
    sheetState = modalBottomSheetState,
    dragHandle = { BottomSheetDefaults.DragHandle() },
    modifier = modifier,
    content = {
        MyTextField()
    }
)
}

主屏幕.kt

@Preview(showBackground = true)
@Composable
fun MainScreen() {
var showSheet by remember { mutableStateOf(false) }

if (showSheet) {
    MyBottomSheet(modifier = Modifier) {
        showSheet = false
    }
}
Box(
    modifier = Modifier
        .padding(all = 8.dp)
        .fillMaxSize()
) {
    MyFloatingActionButton(
        onClick = {
            showSheet = true

        },
        modifier = Modifier
            .align(Alignment.BottomEnd)
            .padding(bottom = 80.dp)
            .padding(end = 10.dp)
    )
}
}

Answer 1

我不确定这些更改是否会解决问题，因为您没有提供完整的示例来测试。

由于您已经使用状态变量控制底部工作表的可见性，因此您也不需要以编程方式执行此操作。您可以删除或注释掉这部分代码，如下所示：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyBottomSheet(modifier: Modifier, onDismiss: () -> Unit) {
    val modalBottomSheetState = rememberModalBottomSheetState()
//    val coroutineScope = rememberCoroutineScope()
//
//    LaunchedEffect(modalBottomSheetState.isVisible) {
//        if (modalBottomSheetState.isVisible) {
//            coroutineScope.launch {
//                modalBottomSheetState.show()
//            }
//        }
//    }

    ModalBottomSheet(
        onDismissRequest = { onDismiss() },
        sheetState = modalBottomSheetState,
        modifier = modifier,
        content = {
            MyTextField()
        }
    )
}

另一个可以尝试的选项是删除文本字段上的自动焦点。这可能会导致动画问题。

我希望这有助于解决问题。