如何使用 for 循环使行可滚动 | Jetpack 撰写

Question

I am making a project with Jetpack Compose. I want to display comments like there are in Instagram. There is an array that contains comments.

This is a code used to display comments:

            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()
            }

I want to make it scrollable. I can use LazyRow. When I use it, I get some errors. How do I implement it? Please help.

Answer 1

You can make an ordinary Row scrollable by supplying its Modifier.horizontalScroll() with a scroll state like the following

val scrollState = rememberScrollState()

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

But for a simple LazyRow without having a unique key , you don't need to iterate each item via a loop construct (eg a for-loop ), you just have to simply call items and pass the list.

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

For a LazyRow with a unique key (assuming you have a class with an " id " attribute)

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

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