android jetpack compose 中带有 ConstraintLayout 的 LazyColumn

Posted 2023-04-19

【中文标题】android jetpack compose 中带有 ConstraintLayout 的 LazyColumn

【英文标题】：LazyColumn with ConstraintLayout in android jetpack compose

【发布时间】：2021-12-28 22:43:37

【问题描述】：

我将在每列的顶部放置一个标签，在底部放置一个LazyСolumn。如下。

但是，当我填写的时候，却出现了意想不到的画面：

还有什么我需要设置的吗？这是我的代码

@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
                        .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
                                )
                            
                        
                    
                
            
        
    

【问题讨论】：

ConstraintLayout 在这里是多余的。只需使用Column，并将weight(1f) 修饰符添加到LazyColumn。

@PhilipDukhov 谢谢，我只是使用约束布局，它使屏幕成为我所需要的

【参考方案1】：

您忘记了 LazyColumn 的 constrainAs：

LazyColumn(
    modifier = Modifier
        .background(color = Color.Blue)
        .constrainAs(list) 
            top.linkTo(label.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
            bottom.linkTo(parent.bottom)
        
)

【讨论】：

感谢您的回答，但它无法解决我的问题。惰性列填满整个屏幕

好吧，您错过了 constrainAs 并添加它并没有帮助的事实表明您还有更多问题。您应该发布一个显示所有内容的小型演示应用程序。