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

【问题标题】：How to make Row Scrollable with for loop | Jetpack Compose如何使用 for 循环使行可滚动 | Jetpack 撰写
【发布时间】：2022-12-10 21:56:38
【问题描述】：

我正在使用 Jetpack Compose 制作一个项目。我想像在 Instagram 中那样显示 cmets。有一个包含 cmets 的数组。

这是用于显示cmets的代码：

            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。当我使用它时，我会遇到一些错误。我该如何实施？请帮忙。

【问题讨论】：

标签： android kotlin android-jetpack-compose android-jetpack scrollable

【解决方案1】：

你可以做一个普通的Row可滚动通过为其 Modifier.horizontalScroll() 提供如下滚动状态

val scrollState = rememberScrollState()

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

但是对于没有唯一key的简单LazyRow，您不需要通过循环构造（例如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
    }
}

【讨论】：