Jetpack Compose中Icon旁Text组件渲染异常问题求助

问题原因 #

你错误地使用stringResource()处理numberOfItems这个普通Int数字。stringResource()的作用是根据字符串资源ID（如R.string.xxx）获取对应字符串，而你传入的普通数字58会被当成资源ID去查找，最终显示的是资源ID对应的内容（或ID本身），而非预期的数字58。

修复方案 #

直接将numberOfItems转换为字符串即可，无需调用stringResource()：

修改CourseCard中对应的Text代码：

Text(
    text = course.numberOfItems.toString(),
    style = MaterialTheme.typography.labelMedium,
    modifier = Modifier
        .padding(start = 8.dp)
)

也可以用字符串模板写法：

Text(
    text = "${course.numberOfItems}",
    style = MaterialTheme.typography.labelMedium,
    modifier = Modifier
        .padding(start = 8.dp)
)

完整修复后的CourseCard代码 #

@Composable
fun CourseCard(course: Course, modifier: Modifier = Modifier) {
    Card(modifier = modifier) {
        Box {
            Row {
                Image(
                    painter = painterResource(course.imageResourceId),
                    contentDescription = stringResource(course.stringResourceId),
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(68.dp, 68.dp)
                        .aspectRatio(0.5f)
                )
                Column {
                    Text(
                        text = stringResource(course.stringResourceId),
                        style = MaterialTheme.typography.bodyMedium,
                        modifier = Modifier
                            .padding(top = 16.dp, start = 16.dp, end = 16.dp, bottom = 8.dp)
                    )
                    Row {
                        Icon(
                            painter = painterResource(R.drawable.ic_grain),
                            contentDescription = null,
                            modifier = Modifier
                                .padding(start = 16.dp)
                        )
                        Text(
                            text = course.numberOfItems.toString(),
                            style = MaterialTheme.typography.labelMedium,
                            modifier = Modifier
                                .padding(start = 8.dp)
                        )
                    }
                }
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Alexandru Gheorghe