android - 为什么在 Jetpack Compose 项目中不显示列表项目图像？

Question

我正在尝试学习 jetpack compose，并且我有带有名称和图像的列表项，我的项目工作正常并且列表名称没有问题，但是模拟器中没有显示用户图像。我不知道我错过了什么。有什么解决办法吗？

型号:

   data class Data(
    var name: String,
    var image: String)

屏幕:

@Composable
fun DataScreen() {

    val listOfData = listOf(
        Data("name1", "image1"),
        Data("name2", "image2"),
        Data("name3",  "image3"),)

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)

    ) {

        LazyColumn(
            modifier = Modifier
        ) {

            items(listOfData.size) { index ->
                DataListItem(listOfData[index])
            }}}}
     

项目:

@Composable
fun DataListItem(data: Data) {

    val context = LocalContext.current
    val painter = rememberImagePainter(
        data = data.image
    )
    Column(
        modifier = Modifier.padding(5.dp)
    ) {

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(5.dp)
              
        ) {
     
            Image(
                painter = painter,
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(32.dp)
                    .clip(CircleShape))
            
                Text(
                    text = data.name,
                    fontSize = 12.sp,
              
                )}}}
      

Answer 1

我所看到的只是您的图像的字符串。画家无法仅通过字符串来显示图像。您也不需要对画家使用状态管理，因为您已将画家包含在保留状态的数据对象中:

这段代码已经过测试:

data class Data(
    var name: String,
    var painter: Painter
)

@Composable
fun DataScreen() {

    val listOfData = listOf(
        Data("name1", painterResource(R.drawable.cat_1)),
        Data("name2", painterResource(R.drawable.cat_2))
    )

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)

    ) {

        LazyColumn(
            modifier = Modifier.fillMaxSize()
        ) {

            items(listOfData.size) { index ->
                DataListItem(listOfData[index])
            }
        }
    }
}

@Composable
fun DataListItem(data: Data) {
    
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp)
    ) {

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(5.dp)

        ) {

            Image(
                painter = data.painter,
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(32.dp)
                    .clip(CircleShape)
            )

            Text(
                text = data.name,
                fontSize = 12.sp,

                )
        }
    }
}