ClickableText 可组合项作为列表的元素，并在惰性列中使用它们，列出所有客户，单击时导航到其他屏幕

Question

我想在惰性列中显示客户姓名列表，所以我创建了一个列表变量并在其中使用了 clicableText 可组合项，以便可以单击每个项目，然后我想在惰性列中使用它来显示并且可以垂直滚动，但我在这里逻辑不好，下面是我的代码，我只是评论了我的做法

fun allCustomers(navController: NavController)
{
  val customerLists = listOf(
        ClickableText(text = AnnotatedString("Customer1"),
            onClick = {}),
        ClickableText(text = AnnotatedString("Customer2"),
            onClick = {}),
        ClickableText(text = AnnotatedString("Customer3"),
            onClick = {}),
        ClickableText(text = AnnotatedString("Customer4"),
            onClick = {}),
        ClickableText(text = AnnotatedString("Customer5"),
            onClick = {}),
        ClickableText(text = AnnotatedString("Customer6"),
            onClick = {}),
        ClickableText(text = AnnotatedString("Customer7"),
            onClick = {}),
        ClickableText(text = AnnotatedString("Customer8"),
            onClick = {}),
        ClickableText(text = AnnotatedString("Customer9"),
            onClick = {}),
        ClickableText(text = AnnotatedString("Customer10"),
            onClick = {}),
        )
 LazyColumn(modifier = Modifier.fillMaxHeight(),
                           contentPadding = PaddingValues(5.dp)
                       )
                       {
//                           items(1){cus->
//                               customerLists
//                           }
                         items(1, itemContent = {
                             customerLists.forEachIndexed {
                                 index, item ->
                                 customerLists
//                                 Text(text = item,
//                                     color = Color(0xFFFCA4FF),
//                                     fontWeight = FontWeight.Bold,
//                                     fontSize = 24.sp,
//                                     lineHeight = 120.sp)
                             }
                         } )
                       }}

我试图显示客户列表，但是

   Text(text = item,
                                     color = Color(0xFFFCA4FF),
                                     fontWeight = FontWeight.Bold,
                                     fontSize = 24.sp,
                                     lineHeight = 120.sp)

lazy 列中不接受上述代码

Answer 1

可组合项必须在使用它们的地方构造。您的列表应仅包含构建可组合项所需的基本数据，然后在您的 LazyColumn 中完成该操作：

@Composable
fun allCustomers(navController: NavController) {
    val customerLists = listOf(
        AnnotatedString("Customer1"),
        AnnotatedString("Customer2"),
        AnnotatedString("Customer3"),
        AnnotatedString("Customer4"),
        AnnotatedString("Customer5"),
        AnnotatedString("Customer6"),
        AnnotatedString("Customer7"),
        AnnotatedString("Customer8"),
        AnnotatedString("Customer9"),
        AnnotatedString("Customer10"),
    )

    LazyColumn(
        modifier = Modifier.fillMaxHeight(),
        contentPadding = PaddingValues(5.dp),
    ) {
        items(customerLists) { customer ->
            ClickableText(text = customer) {
                println("$customer, character clicked: $it")
            }
        }
    }
}