如何移除Compose垂直滚动Column的水平过度滚动效果？

方案一：通过自定义滚动行为限制过度滚动方向 #

你可以通过自定义ScrollBehavior，明确指定仅允许垂直方向的过度滚动，以此屏蔽无效的水平过度滚动触发：

val scrollState = rememberScrollState()
val scrollBehavior = rememberScrollBehavior(
    state = scrollState,
    overscrollEffect = rememberOverscrollEffect(
        orientation = Orientation.Vertical
    )
)

Column(modifier = Modifier
    .fillMaxSize()
    .verticalScroll(scrollBehavior)
) {
    SearchBar(toSearch = toSearch)
    Divider(dp = 8)
    DefaultListItems(
        toPastPurchases = toPastPurchases,
        toListsAndFavorites = toListsAndFavorites,
        toCollection = toDepartment,
        toRecipe = toRecipe,
        exploreViewModel = viewModel
    )
    // 其他子组件
}

方案二：直接禁用水平滚动能力 #

如果是系统误检测到水平滚动事件，可给Column添加禁用状态的水平滚动修饰符，阻断水平方向的滚动响应：

Column(modifier = Modifier
    .fillMaxSize()
    .horizontalScroll(rememberScrollState(), enabled = false)
    .verticalScroll(rememberScrollState())
) {
    SearchBar(toSearch = toSearch)
    Divider(dp = 8)
    DefaultListItems(
        toPastPurchases = toPastPurchases,
        toListsAndFavorites = toListsAndFavorites,
        toCollection = toDepartment,
        toRecipe = toRecipe,
        exploreViewModel = viewModel
    )
    // 其他子组件
}

额外排查建议 #

先检查SearchBar、DefaultListItems等子组件是否存在超出Column水平宽度的内容，比如未设置fillMaxWidth()的组件、固定宽度过大的元素，这类内容也会触发系统的水平过度滚动检测。确保所有子组件的宽度被约束在Column的范围内。

内容的提问来源于stack exchange，提问作者Fantasma Plasma