使用 bottomsheetscaffold 中的 bottom sheet 调整内容高度答案

【问题标题】：adjust content height with bottom sheet in bottomsheetscaffold使用 bottomsheetscaffold 中的 bottom sheet 调整内容高度
【发布时间】：2022-12-22 05:13:58
【问题描述】：

我想相对于 bottomsheetscoffold 中的 bottomsheet 动态更改内容的高度，如下所示：

到目前为止，这是我尝试过的： `


val bottomSheetState = rememberBottomSheetState(initialValue =BottomSheetValue.Expanded )

val bottomSheetScaffoldState= rememberBottomSheetScaffoldState(
        bottomSheetState = bottomSheetState)

val heightPixels= LocalContext.current.resources.displayMetrics.heightPixels

BottomSheetScaffold(
modifier = Modifier.fillMaxSize()
sheetPeekHeight = 68.dp,
scaffoldState = bottomSheetScaffoldState,
sheetContent = {
    /*
    sheet content
     */
}) {
    Box(modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight(((bottomSheetState.offset.value)
                / (heightPixels)).let { if (it == 0f) 1f else it })
    ) {
        /*
        content
         */
    }
}

但它依赖于以像素为单位的系统高度，每次底部工作表的高度发生变化时，其内容的框都会重新组合

【问题讨论】：

对于与底部工作表偏移量相同的大小，如何向内容容器添加底部填充？

标签： android kotlin android-jetpack-compose bottom-sheet compose-recomposition

【解决方案1】：

我设法设置 Modifier.fillMaxHeight() 以使用脚手架状态的 fraction 值，如下所示：

val bottomSheetState = rememberBottomSheetState(
    initialValue = BottomSheetValue.Expanded
)

val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
    bottomSheetState = bottomSheetState
)

BottomSheetScaffold(
    modifier = Modifier.fillMaxSize(),
    sheetPeekHeight = 68.dp,
    scaffoldState = bottomSheetScaffoldState,
    sheetContent = {
        /*
        sheet content
         */
    }) {
    val fraction = 1f - bottomSheetScaffoldState.currentFraction
    Box(
        modifier = Modifier
            .padding(bottom = 68.dp)
            .fillMaxHeight(fraction)
    ) {
        /*
        content
         */
    }
}

currentFraction是对其值的一个小调整，因为拖动动画的进度总是从0到1，无论是从Collapsed到Expanded还是从Expanded到Collapsed状态：

@OptIn(ExperimentalMaterialApi::class)
val BottomSheetScaffoldState.currentFraction: Float
get() {
    val fraction = bottomSheetState.progress.fraction
    val targetValue = bottomSheetState.targetValue
    val currentValue = bottomSheetState.currentValue

    return when {
        currentValue == BottomSheetValue.Collapsed && targetValue == BottomSheetValue.Collapsed -> 0f
        currentValue == BottomSheetValue.Expanded && targetValue == BottomSheetValue.Expanded -> 1f
        currentValue == BottomSheetValue.Collapsed && targetValue == BottomSheetValue.Expanded -> fraction
        else -> 1f - fraction
    }
}

这样做的问题是它在展开或折叠工作表时会导致某种闪烁，这并不理想。

【讨论】：