Jetpack Compose中LazyRow阴影用Modifier.fillMaxHeight()不显示如何解决？

解决方案 #

问题根源是未指定高度时，外层容器的测量逻辑存在循环依赖：阴影的fillMaxHeight依赖父容器高度，而父容器默认wrap content的情况下，高度需要先由所有子元素决定，阴影高度为0导致父容器高度仅等于LazyRow内容高度，但阴影无法拿到最终的父容器高度渲染。

你只需要给外层容器加上固有高度约束即可，修改代码如下：

@ExperimentalAnimationApi
@Composable
fun LazyRowWithShadows(
        modifier: Modifier = Modifier,
        contentPadding: PaddingValues = PaddingValues(0.dp),
        shadowColor: Color = Color.Black,
        shadowAlphaStart: Float = 0f,
        shadowAlphaEnd: Float = 0.3f,
        shadowWidth: Dp = 32.dp,
        content: LazyListScope.() -> Unit
) {
    val listState = rememberLazyListState()

    val showStartShadow by remember {
        derivedStateOf {
            listState.firstVisibleItemScrollOffset > 0 || listState.firstVisibleItemIndex > 0
        }
    }

    val showEndShadow by remember {
        derivedStateOf {
            val lastItemIfVisible = listState.layoutInfo.visibleItemsInfo.maxByOrNull { it.index }?.takeIf { it.index == listState.layoutInfo.totalItemsCount - 1 }
            if (lastItemIfVisible != null) {
                val lastItemEndX = lastItemIfVisible.offset + lastItemIfVisible.size
                lastItemEndX > listState.layoutInfo.viewportEndOffset
            } else {
                true
            }
        }
    }

    // 仅修改外层Box的modifier，添加height(IntrinsicSize.Min)约束
    Box(modifier = modifier.height(IntrinsicSize.Min)) {
        LazyRow(
                state = listState,
                contentPadding = contentPadding,
                content = content)

        // 左侧滚动阴影，保持fillMaxHeight不变
        AnimatedVisibility(visible = showStartShadow, modifier = Modifier.align(Alignment.CenterStart)) {
            Box(modifier = Modifier
                    .fillMaxHeight()
                    .width(shadowWidth)
                    .background(brush = Brush.horizontalGradient(colors = listOf(shadowColor.copy(alpha = shadowAlphaEnd), shadowColor.copy(alpha = shadowAlphaStart))))
            )
        }
        // 右侧滚动阴影同理
        AnimatedVisibility(visible = showEndShadow, modifier = Modifier.align(Alignment.CenterEnd)) {
            Box(modifier = Modifier
                    .fillMaxHeight()
                    .width(shadowWidth)
                    .background(brush = Brush.horizontalGradient(colors = listOf(shadowColor.copy(alpha = shadowAlphaStart), shadowColor.copy(alpha = shadowAlphaEnd))))
            )
        }
    }
}

原理解释 #

height(IntrinsicSize.Min)会让外层Box的高度强制匹配子元素的最小固有高度，LazyRow的最小固有高度就是其内部内容的实际高度，所以外层容器高度会自动适配LazyRow的高度，此时阴影的fillMaxHeight就能拿到正确的高度值进行填充，不需要调用方手动指定组件高度。

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