为什么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,
              
                )}}}
      

- user10991969

---

我看到你已经为图像设置了字符串，但是你从哪里加载实际的图像呢？ - Tonnie

@Tonnie，我从res/drawable中加载。 - user10991969

Answer 1

我看到的只是您图像的字符串。一个画家无法仅从字符串中显示图像。由于您已将画家包含在保留状态的Data对象中，因此您也不需要为画家使用状态管理：

这段代码已经过测试：

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,

                )
        }
    }
}

- Johann