繁体   English   中英

更改惰性列表中可组合的每张卡片的背景颜色 - Jetpack Compose,Android

[英]Change the color of the background for each card composable in a lazy list - Jetpack Compose, Android

我正在制作一个应用程序,它基本上允许用户搜索卡片组合列表,每个卡片组合都有一个标题和正文。 我的问题是关于将每张卡的背景颜色更改为与我创建的 colors 列表不同的颜色。 我不知何故需要遍历 colors 列表并每次传递不同的颜色,但我不确定我是如何做到的。 这是一些代码:

LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .background(color = matte_black)
        ) {
            val list = if (searching) searchResults else allReadings
            list.value.let { list ->
                items(list.size) { i ->
                    val reading = list[i]
                    ReadingItem(reading, **TODO("Add Color")**)
                }
            }


        }

和可组合的 ReadingItem:

fun ReadingItem(
    reading: ReadingData,
    **color : Color**
) {
    val context = LocalContext.current
    val resources = context.resources
    val displayMetrics = resources.displayMetrics
    val screenWidth = displayMetrics.widthPixels / displayMetrics.density
    val spacing = 16.dp
    val scroll = rememberScrollState()

    Card(
        shape = RoundedCornerShape(4.dp),
        backgroundColor = color, TODO("This is where i would like the color to iterate through the list")
        modifier = Modifier.padding(16.dp)
    ) {
        Column(
            modifier = Modifier.width(screenWidth.dp - (spacing * 2)),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.Start
        ) {
            Text(
                text = reading.title,
                modifier = Modifier.padding(8.dp),
                textAlign = TextAlign.Start,
                style = TextStyle(
                    color = milk_white,
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold
                )
            )
            //Spacer(modifier = Modifier.padding(4.dp))
            Text(
                text = reading.reading,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .padding(8.dp)
                    .height(100.dp)
                    .verticalScroll(
                        state = scroll),
                style = TextStyle(
                    color = milk_white,
                    fontSize = 16.sp
                )
            )
        }
    }
}

最后是 colors 的列表:

fun getColors() : List<Color> {
    return listOf(
        flame_red, orange, ucla_gold, green, tropaz, calypso, plum
    )
}

如果有人有任何建议,将不胜感激! 谢谢

这应该给出一个基本的想法。

代码

@Composable
fun ColourCards() {
    val colors = listOf(Color.Blue, Color.Green, Color.Magenta, Color.Gray, Color.Cyan)
    LazyColumn {
        items(40) {
            Box(
                Modifier
                    .fillMaxWidth()
                    .padding(
                        horizontal = 16.dp,
                        vertical = 4.dp,
                    )
                    .background(colors[it % colors.size])
                    .height(80.dp),
            )
        }
    }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM