Jetpack Compose可组合项参数传递与使用方法求助

我是Jetpack Compose新手，此前使用XML+Kotlin开发应用，现计划迁移至Jetpack Compose。原项目中，一个Activity内的多个CardView被点击时，会向单个Fragment传递特定key，Fragment根据该key展示对应信息。目前我已掌握导航相关操作，但不知如何在Compose中实现根据参数动态更改图片与文本的功能。我尝试使用when语句根据参数赋值资源ID，但编写的Compose代码无法正常运行。

XML实现代码 #

class BaseFragment : Fragment() {
    internal lateinit var view: View
    private lateinit var imgMain : ImageView
    private lateinit var txtIngredients : TextView
    private lateinit var txtMaking : TextView
    private lateinit var txtBeCareful : TextView

    @Suppress("UNREACHABLE_CODE")
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        view = inflater.inflate(R.layout.base_fragment, container, false)
        setupViews()
        return view
    }    

    private fun setupViews() {
        imgMain = view.findViewById(R.id.img_BaseFragment_mainImg)
        txtIngredients = view.findViewById(R.id.txt_BaseFragment_ingredients)
        txtMaking = view.findViewById(R.id.txt_BaseFragment_making)
        txtBeCareful = view.findViewById(R.id.txt_BaseFragment_beCareFullText)

        this.arguments?.let {
            when (it.getString("itemTitle", "")) {
                "mas1" -> {
                    makeContent(R.drawable.mas1, 
                        R.string.mas1,
                        R.string.mas1_making, 
                        R.string.mas1_text)
                }
                "mas2" -> {
                    makeContent(R.drawable.mas2, 
                        R.string.mas2,
                        R.string.mas2_making, 
                        R.string.mas2_text)
                }
                "mas3" -> {
                    makeContent(R.drawable.mas3, 
                        R.string.mas3,
                        R.string.mas3_making, 
                        R.string.mas3_text)
                }
            }
        }
    }

    private fun makeContent(imgCont : Int, txtIngredientsCont : Int, 
        txtMakingCont : Int, txtBeCarCont : Int ){
        imgMain.setImageResource(imgCont)
        txtIngredients.setText(txtIngredientsCont)
        txtMaking.setText(txtMakingCont)
        txtBeCareful.setText(txtBeCarCont)
    }
}

错误的Compose代码 #

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun FinalShowScreen(itemTitle: String? = null, navController: 
NavController) {


    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(3.dp)
            .verticalScroll(rememberScrollState())

    ) {


var imageId: Int 
var textIngredientsId: Int 
   
var textMakingId: Int
var textBeCarefulId: Int

when (maskArg) {
    "mas1" -> {
        imageId = R.drawable.mas1
        textIngredientsId = R.string.mas1
        textMakingId = R.string.mas1making
        textBeCarefulId = R.string.mas1_text
    }
     "mas2" -> {
        imageId = R.drawable.mas2
        textIngredientsId = R.string.mas2
        textMakingId = R.string.mas2making
        textBeCarefulId = R.string.mas2_text
    }

    "mas3" -> {
        imageId = R.drawable.mas3
        textIngredientsId = R.string.mas3
        textMakingId = R.string.mas3making
        textBeCarefulId = R.string.mas3_text
    }
        Image(
            painter = painterResource(id = 
                imageId),
            contentDescription = "",
            modifier = Modifier
                .padding(bottom = 8.dp)
                .height(200.dp)
                .fillMaxSize()
        )

        Text(
            text = stringResource(id = textIngredientsId),
            style = typography.h1,
            color = MaterialTheme.colors.primary,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .padding(8.dp)
        )

        Text(
            text = stringResource(id = 
                textMakingId),
            style = typography.h2,
            color = MaterialTheme.colors.primaryVariant,
            textAlign = TextAlign.Start,
            modifier = Modifier
                .padding(start = 8.dp, end = 8.dp, bottom = 15.dp, 
                   top = 8.dp)
       )
        Text(
            text = stringResource(id = 
                textBeCarefulId),
            style = typography.h2,
            color = MaterialTheme.colors.primaryVariant,
            textAlign = TextAlign.Start,
            modifier = Modifier
            .padding(8.dp)
         )

    }
}

请问该如何修正Compose代码，实现根据传递的参数动态更新图片与文本？

你的Compose代码存在几个关键问题，修正后即可正常运行：

错误点说明 #

1. 变量未初始化：声明的imageId等变量无默认值，若参数不匹配任何when分支，会导致变量未初始化，触发编译错误。
2. 变量名不匹配：代码中使用了未定义的maskArg，实际应该用函数参数itemTitle。
3. UI结构错误：Image和Text组件写在when分支内部，导致只有匹配分支才会渲染UI，逻辑应该是先确定资源ID，再统一渲染UI。
4. 资源ID不一致：XML中使用R.string.mas1_making，但Compose代码写成了R.string.mas1making，需保证资源名称完全匹配。

修正后的代码 #

@Composable
fun FinalShowScreen(itemTitle: String? = null, navController: NavController) {
    // 根据参数确定资源ID，设置默认分支避免未初始化问题
    val contentResources = when (itemTitle) {
        "mas1" -> ContentResources(
            R.drawable.mas1,
            R.string.mas1,
            R.string.mas1_making,
            R.string.mas1_text
        )
        "mas2" -> ContentResources(
            R.drawable.mas2,
            R.string.mas2,
            R.string.mas2_making,
            R.string.mas2_text
        )
        "mas3" -> ContentResources(
            R.drawable.mas3,
            R.string.mas3,
            R.string.mas3_making,
            R.string.mas3_text
        )
        // 默认分支，替换为你项目中的默认资源
        else -> ContentResources(
            R.drawable.default_image,
            R.string.default_ingredients,
            R.string.default_making,
            R.string.default_careful
        )
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(3.dp)
            .verticalScroll(rememberScrollState())
    ) {
        Image(
            painter = painterResource(id = contentResources.imageRes),
            contentDescription = "Main content image", // 补充有意义的无障碍描述
            modifier = Modifier
                .padding(bottom = 8.dp)
                .height(200.dp)
                .fillMaxWidth() // 使用fillMaxWidth更适配布局
        )

        Text(
            text = stringResource(id = contentResources.ingredientsRes),
            style = MaterialTheme.typography.h1,
            color = MaterialTheme.colors.primary,
            textAlign = TextAlign.Center,
            modifier = Modifier.padding(8.dp)
        )

        Text(
            text = stringResource(id = contentResources.makingRes),
            style = MaterialTheme.typography.h2,
            color = MaterialTheme.colors.primaryVariant,
            textAlign = TextAlign.Start,
            modifier = Modifier.padding(start = 8.dp, end = 8.dp, top = 8.dp, bottom = 15.dp)
        )

        Text(
            text = stringResource(id = contentResources.carefulRes),
            style = MaterialTheme.typography.h2,
            color = MaterialTheme.colors.primaryVariant,
            textAlign = TextAlign.Start,
            modifier = Modifier.padding(8.dp)
        )
    }
}

// 封装资源数据类，让代码更清晰
data class ContentResources(
    val imageRes: Int,
    val ingredientsRes: Int,
    val makingRes: Int,
    val carefulRes: Int
)

额外优化提示 #

1. 空值处理：若itemTitle可能为空，可在when分支中单独处理null情况，或给参数设置合理默认值。
2. 无障碍支持：始终给Image设置有意义的contentDescription，提升应用的无障碍体验。
3. 主题一致性：直接使用MaterialTheme.typography获取文字样式，确保与应用主题统一。

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