bottomSheet软键盘弹出问题


核心问题

bottomSheet弹出之后,点击内部的EditText,软键盘弹出时,bottomSheet会被顶起来,但是顶起来的高度不对,
遮挡了editText下方的组件。

解决思路

  1. 观看源码发现 BottomSheet已经适配了软键盘弹出的问题。
        ModalBottomSheetDialog(
        properties = properties,
        onDismissRequest = {
            if (sheetState.currentValue == Expanded && sheetState.hasPartiallyExpandedState) {
                // Smoothly animate away predictive back transformations since we are not fully
                // dismissing. We don't need to do this in the else below because we want to
                // preserve the predictive back transformations (scale) during the hide animation.
                scope.launch { predictiveBackProgress.animateTo(0f) }
                scope.launch { sheetState.partialExpand() }
            } else { // Is expanded without collapsed state or is collapsed.
                scope.launch { sheetState.hide() }.invokeOnCompletion { onDismissRequest() }
            }
        },
        predictiveBackProgress = predictiveBackProgress,
    ) {
        //这里已经加入了imePadding
        Box(modifier = Modifier.fillMaxSize().imePadding().semantics { isTraversalGroup = true }) {
            Scrim(
                color = scrimColor,
                onDismissRequest = animateToDismiss,
                visible = sheetState.targetValue != Hidden,
            )
            ModalBottomSheetContent(
                predictiveBackProgress,
                scope,
                animateToDismiss,
                settleToDismiss,
                modifier,
                sheetState,
                sheetMaxWidth,
                shape,
                containerColor,
                contentColor,
                tonalElevation,
                dragHandle,
                contentWindowInsets,
                content
            )
        }
    }
  2. 但是在使用的时候,偏移的高度并不是整个键盘的高度
          val newAnchors = DraggableAnchors {
        Hidden at fullHeight
        if (
            sheetSize.height > (fullHeight / 2) && !sheetState.skipPartiallyExpanded
        ) {
            // 如果sheetSize.height大于fullHeight / 2  就把 partiallyExpanded 设置为 fullHeight / 2
            PartiallyExpanded at fullHeight / 2f
        }
        if (sheetSize.height != 0) {
            Expanded at max(0f, fullHeight - sheetSize.height)
        }
    }
    
  3. 解决办法
    我们并不需要这个部分展开的状态限制
        val bottomSheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = true
    )

文章作者: Lao Wu
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Lao Wu !
评论
  目录