仿IOS风格BottomSheet关闭效果：滑动到顶部，再次滑动才关闭
1. 背景说明
上篇文章，虽然解决了Android Compose列表滑动导致BottomSheet异常消失的问题，但是产品要求我们实现仿IOS的BottomSheet效果 : 滑动到顶部，再次滑动才关闭。那需要怎么做呢 ? 这篇文章，我们就来实现该功能。
1.1 问题描述
在Android开发中，使用Material3的ModalBottomSheet组件时，默认存在一个滑动冲突问题：当BottomSheet内部包含可滚动列表（如LazyColumn/LazyVerticalGrid）时，即使列表已经滑动到顶部，继续向下滑动手势会直接关闭BottomSheet。这种行为与iOS平台的BottomSheet交互体验存在明显差异。
1.2 iOS风格的期望效果
产品要求实现和iOS一样效果的底部弹框滑动效果：当列表滚动到顶部后，再次向下滑动才会关闭弹框。而默认的Android ModalBottomSheet当列表滑动到顶部时，接着滑动，会继续滑动ModalBottomSheet，将ModalBottomSheet折叠。
1.3 使用版本
这里我使用的是Compose-bom2026.01.00版本
kotlin
implementation("androidx.compose:compose-bom:2026.01.00")1.4 当前代码的问题演示
错误实现代码（ErrorDemoPage.kt）：
kotlin
@Composable
fun ErrorDemoPage(innerPadding: PaddingValues) {
Box(modifier = Modifier.padding(innerPadding)) {
var isOpenDialog by remember { mutableStateOf(false) }
Button(onClick = {
isOpenDialog = !isOpenDialog
}) {
Text("show")
}
ProblematicBottomSheet(isOpenDialog, {
isOpenDialog = false
})
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun ProblematicBottomSheet(openDialog: Boolean, onDismissRequest: () -> Unit) {
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val gridState = rememberLazyGridState()
if (openDialog) {
ModalBottomSheet(
sheetState = sheetState,
onDismissRequest = onDismissRequest,
shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
dragHandle = null
) {
Column(
modifier = Modifier.heightIn(max = 600.dp)
) {
// 标题栏
Box(
modifier = Modifier
.fillMaxWidth()
.height(60.dp),
contentAlignment = Alignment.Center
) {
Text(
text = "有问题的BottomSheet",
fontSize = 18.sp,
fontWeight = FontWeight.Bold
)
}
// 直接使用LazyVerticalGrid，未处理滑动冲突
LazyVerticalGrid(
columns = GridCells.Fixed(4),
state = gridState,
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
item(span = { GridItemSpan(4) }) {
Text("Header")
}
// 列表内容
items(40) {
Box(
modifier = Modifier
.size(80.dp)
.background(Color.LightGray, RoundedCornerShape(8.dp)),
contentAlignment = Alignment.Center
) {
Text(text = "Item $it", color = Color.Black)
}
}
item(span = { GridItemSpan(4) }) {
Text("Footer")
}
}
}
}
}
}在上述代码中，ModalBottomSheet的sheetGesturesEnabled属性使用了默认值true，这意味着只要用户在BottomSheet上执行向下滑动手势，无论内部列表是否处于顶部，都会触发BottomSheet的关闭操作。
2. 解决方案：仿IOS风格BottomSheet关闭效果
2.1 核心思路
要实现iOS风格的BottomSheet关闭效果，我们需要解决滑动冲突问题，关键在于：
- 准确判断列表是否处于顶部状态
- 控制BottomSheet的手势响应时机
- 实现"滑动到顶部，再次滑动才关闭"的交互逻辑
2.2 关键实现代码
修复后的代码（Demo2Page.kt）：
kotlin
@Composable
fun Demo2Page(innerPadding: PaddingValues) {
Box(modifier = Modifier.padding(innerPadding)) {
var isOpenDialog by remember { mutableStateOf(false) }
Button(onClick = {
isOpenDialog = !isOpenDialog
}) {
Text("show")
}
ProblematicBottomSheet(isOpenDialog, {
isOpenDialog = false
})
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun ProblematicBottomSheet(openDialog: Boolean, onDismissRequest: () -> Unit) {
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val gridState = rememberLazyGridState()
var isAtTopWhenDown by remember { mutableStateOf(false) }
if (openDialog) {
ModalBottomSheet(
sheetState = sheetState,
sheetGesturesEnabled = isAtTopWhenDown || !gridState.isScrollInProgress,
onDismissRequest = onDismissRequest,
shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
dragHandle = null
) {
CompositionLocalProvider(
LocalOverscrollFactory provides null // 关键：提供 null 来禁用效果
) {
Column(
modifier = Modifier.heightIn(max = 600.dp)
) {
// 标题栏
Box(
modifier = Modifier
.fillMaxWidth()
.height(60.dp),
contentAlignment = Alignment.Center
) {
Text(
text = "解决问题2的BottomSheet",
fontSize = 18.sp,
fontWeight = FontWeight.Bold
)
}
LazyVerticalGrid(
columns = GridCells.Fixed(4),
state = gridState,
modifier = Modifier.fillMaxWidth().pointerInput(Unit) {
awaitEachGesture {
awaitFirstDown()
val isAtTop = gridState.firstVisibleItemIndex == 0 &&
gridState.firstVisibleItemScrollOffset == 0
isAtTopWhenDown = isAtTop
}
},
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
item(span = { GridItemSpan(4) }) {
Text("Header")
}
// 列表内容
items(40) {
Box(
modifier = Modifier
.size(80.dp)
.background(Color.LightGray, RoundedCornerShape(8.dp)),
contentAlignment = Alignment.Center
) {
Text(text = "Item $it", color = Color.Black)
}
}
item(span = { GridItemSpan(4) }) {
Text("Footer")
}
}
}
}
}
}
}2.3 实现原理详解
2.3.1 状态变量设计
gridState：用于跟踪LazyVerticalGrid的滚动状态isAtTopWhenDown：布尔值，记录用户按下手指时列表是否处于顶部状态
2.3.2 核心逻辑解析
-
判断列表顶部状态：
kotlinval isAtTop = gridState.firstVisibleItemIndex == 0 && gridState.firstVisibleItemScrollOffset == 0通过检查
firstVisibleItemIndex（第一个可见项索引）和firstVisibleItemScrollOffset（第一个可见项的滚动偏移量），可以准确判断列表是否处于顶部状态。 -
手势监听与状态更新：
kotlinmodifier = Modifier.fillMaxWidth().pointerInput(Unit) { awaitEachGesture { awaitFirstDown() val isAtTop = gridState.firstVisibleItemIndex == 0 && gridState.firstVisibleItemScrollOffset == 0 isAtTopWhenDown = isAtTop } }使用
pointerInput修饰符监听手势事件，在用户按下手指（awaitFirstDown()）时，检查并更新列表的顶部状态。 -
控制BottomSheet手势启用条件：
kotlinsheetGesturesEnabled = isAtTopWhenDown || !gridState.isScrollInProgress这是实现iOS风格关闭效果的核心代码，它的含义是：
- 当列表处于顶部状态（
isAtTopWhenDown为true）时，允许BottomSheet响应滑动关闭手势 - 当列表正在滚动（
gridState.isScrollInProgress为true）时，禁用BottomSheet的滑动关闭手势 - 只有当列表处于顶部状态且不再滚动时，才能通过向下滑动关闭BottomSheet
- 当列表处于顶部状态（
-
禁用过度滚动效果：
kotlinCompositionLocalProvider( LocalOverscrollFactory provides null ) { // BottomSheet内容 }通过提供
null的LocalOverscrollFactory，禁用了Android默认的过度滚动效果，使BottomSheet在顶部状态下的滑动体验更接近iOS。
3. 小结
本文通过一个实际案例，详细介绍了如何解决Android ModalBottomSheet与内部可滚动列表的滑动冲突问题，并实现了类似iOS风格的关闭效果。核心解决方案是通过精确控制sheetGesturesEnabled属性的条件，结合列表滚动状态的判断，实现了"滑动到顶部，再次滑动才关闭"的交互逻辑。
这种实现方式不仅提升了用户体验，也展示了Jetpack Compose中状态管理和手势处理的强大能力。希望本文能对Android开发者在实现BottomSheet交互效果时有所帮助。