如何使用 for 循环使行可滚动 | Jetpack 组合

Question

我正在使用 Jetpack Compose 制作一个项目。我想像 Instagram 一样显示评论。有一个包含注释的数组。

这是用于显示评论的代码：

            val i : Int
            for(i in 1..user.count) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(10.dp),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    Row(
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Image1(
                            painter = painterResource(id = user.pp),
                            contentDescription = "PP",
                            modifier = Modifier
                                .clip(CircleShape)
                                .size(50.dp)

                        )
                        Spacer(modifier = Modifier.width(10.dp))
                        Column() {
                            Row() {
                                Text(text = user.name, color = Color.Black, fontSize = 20.sp)
                                Spacer(modifier = Modifier.width(10.dp))
                            }
                            Spacer(modifier = Modifier.width(10.dp))
                            Text(text = "Public", color = Color.DarkGray, fontSize = 13.sp)
                        }

                    }
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            painter = painterResource(id = R.drawable.ic_baseline_more_vert_24),
                            contentDescription = "More"
                        )
                    }

                }
                Row() {
                    Spacer(modifier = Modifier.width(10.dp))
                    Text(
                        text = user.c[i-1],
                        color = Color.Black,
                        fontSize = 16.sp,
                        modifier = Modifier.padding(end = 10.dp)
                    )
                }
                Spacer(modifier = Modifier.height(10.dp))
                Row() {
                    var isClicked by remember {
                        mutableStateOf(false)
                    }
                    Spacer(modifier = Modifier.width(10.dp))
                    Icon(
                        painter = painterResource(
                            id =
                            if (!isClicked) R.drawable.like_in_comments else R.drawable.like
                        ),
                        contentDescription = "Like",
                        tint = Color.Blue,
                        modifier = Modifier
                            .size(25.dp)
                            .clickable { isClicked = !isClicked }
                    )
                    Spacer(modifier = Modifier.width(10.dp))
                    Text(
                        text = "Like",
                        color = Color.DarkGray,
                        fontSize = 16.sp,
                    )
                }
                Spacer(modifier = Modifier.height(10.dp))
                Divider()
            }

我想让它可滚动。我可以使用 LazyRow。当我使用它时，我会遇到一些错误。我该如何实施？请帮忙。

Answer 1

您可以通过为其提供滚动状态来使其普通Row 可滚动Modifier.horizontalScroll()，如下所示

val scrollState = rememberScrollState()

Row (modifier = Modifier.horizontalScroll(scrollState)) {
         ... 
}

LazyRow但是对于没有 unique 的简单key，您不需要通过循环构造（例如 a for-loop）迭代每个项目，您只需简单地调用items并传递列表即可。

val itemList = listOf("Item1", "Item2")
    
LazyRow {
    items(itemList) { item ->
        // your composable here
    }
}

对于LazyRow具有唯一键的（假设您有一个带有“ id”属性的类）

val people = listOf(Person(1, "person1"), Person(2, "person2"))

LazyRow {
    items(items = people, key = { item -> person.id }) { person->
        // your composable here
    }
}