Android Jetpack Compose中ConstraintLayout嵌套LazyColumn布局异常如何解决

你这个布局异常的核心原因是LazyColumn没有添加正确的ConstraintLayout约束，既没有和顶部的TopAppBar做位置锚定，也没有限制自身高度范围，导致直接和顶部标签栏重叠，内容溢出也不会触发滚动。

需做2处修改即可恢复预期效果 #

• 给LazyColumn添加constrainAs约束，将顶部绑定到TopAppBar的底部，左右和底部绑定到ConstraintLayout父布局的对应边界
• 给LazyColumn添加高度配置Dimension.fillToConstraints，在上下边界都被约束时，该配置会让组件自动填充上下约束之间的所有可用空间，既不会和顶部标签栏重叠，也不会超出底部边界，同时能让LazyColumn正常触发滚动

修改后核心代码 #

@Composable
fun MenuDetailList(
    loading: Boolean,
    type: String,
    items: List<Any>,
    page: Int,
    onChangeScrollPosition: (Int) -> Unit,
    onTriggerNextPage: () -> Unit,
    onCallCacheDialog: (Int) -> Unit
) {
    val configuration = LocalConfiguration.current
    val screenHeight = configuration.screenHeightDp.dp

    Box(
        modifier = Modifier
            .background(color = MaterialTheme.colors.surface)
    ) {
        if (loading && items.isEmpty()) {
            LoadingShimmer(imageHeight = screenHeight)
        }else if (items.isEmpty()) {
            NothingHere()
        }else {
            ConstraintLayout(
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = Color.White)
            ) {
                val (label, list) = createRefs()
                TopAppBar(
                    modifier = Modifier
                        .constrainAs(label) {
                            top.linkTo(parent.top)
                            start.linkTo(parent.start)
                            end.linkTo(parent.end)
                        }
                ) {
                    MenuDetailLabel()
                }
                LazyColumn(
                    modifier = Modifier
                        // 新增约束配置
                        .constrainAs(list) {
                            top.linkTo(label.bottom)
                            start.linkTo(parent.start)
                            end.linkTo(parent.end)
                            bottom.linkTo(parent.bottom)
                            // 高度适配剩余可用空间
                            height = Dimension.fillToConstraints
                        }
                        .background(color = Color.Blue)
                ) {
                    itemsIndexed(
                        items = items
                    ) { index, detail ->
                        onChangeScrollPosition(index)
                        if ((index + 1) >= (page * PAGE_SIZE) && !loading) {
                            onTriggerNextPage()
                        }
                        when(type) {
                            "purchase" -> {
                                PurchaseCard(
                                    purchase = detail as Purchase,
                                    onClick = onCallCacheDialog
                                )
                            }
                        }
                    }
                }
            }
        }
    }
}

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