Clicking on item 1 opens Screen1,
Clicking on item 2 opens Screen1,
Clicking on item 3 opens Screen1,

点击项目1打开屏幕1，点击项目2打开屏幕1，点击项目3打开屏幕1，

Instead the folowing should happed:

相反，应该发生以下情况：

Clicking on item 1 should open Screen1,
Clicking on item 2 should open Screen2,
Clicking on item 3 should open Screen3,

点击项目1应打开屏幕1，点击项目2应打开屏幕2，点击项目3应打开屏幕3，

Where am i going wrong.

我到底哪里错了。

Data Item:
data class DataItem(val text: String, val imageResId: Int)

数据项：数据类DataItem(val文本：字符串，val ImageResID：int)

List of data item:
val dataItems = listOf( DataItem("Item 1", R.drawable.concrete), DataItem("Item 2", R.drawable.plaster), DataItem("Item 3", R.drawable.blocks) )

数据项列表：val dataItems = listOf（DataItem（“Item 1”，R.drawable.concrete），DataItem（“Item 2”，R.drawable. plasty），DataItem（“Item 3”，R.drawable.blocks））

Screen 1
@Composable fun Screen1(navController: NavController, dataItem: DataItem) { Column( modifier = Modifier .fillMaxSize() .padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Text(text = "Screen 1") Spacer(modifier = Modifier.height(16.dp)) Image( painter = painterResource(id = dataItem.imageResId), contentDescription = null, modifier = Modifier .size(200.dp) .clip(shape = MaterialTheme.shapes.medium) .background(MaterialTheme.colorScheme.primary) ) Spacer(modifier = Modifier.height(16.dp)) Text(text = dataItem.text) } }

Screen 1@Composable Fun Screen1(导航控制器：NavController，DataItem：DataItem){Column(Modify=Modify.ill MaxSize().pding(16.dp)，HorontalAlign=Alignment.CenterHorizontally，verticalArrangement=Arrangement.Center){Text(Text=“Screen 1”)Spacer(Modify=Modifier.Height(16.dp))Image(Painter=painterResource(id=dataItem.ImageResID)，ContentDescription=NULL，修改器=修改器.大小(200.dp).剪辑(Shape=材质主题.shapes.Medium).background(MaterialTheme.colorScheme.primary))间隔符(修改器=修改器.高度(16.dp))文本(Text=数据项.Text)}}

Screen 2
@Composable fun Screen2(navController: NavController, dataItem: DataItem) { Column( modifier = Modifier .fillMaxSize() .padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Text(text = "Screen 2") Spacer(modifier = Modifier.height(16.dp)) Image( painter = painterResource(id = dataItem.imageResId), contentDescription = null, modifier = Modifier .size(200.dp) .clip(shape = MaterialTheme.shapes.medium) .background(MaterialTheme.colorScheme.primary) ) Spacer(modifier = Modifier.height(16.dp)) Text(text = dataItem.text) } }

Screen 2@Composable Fun Screen2(导航控制器：NavController，DataItem：DataItem){Column(Modify=Modify.ill MaxSize().pding(16.dp)，HorontalAlign=Alignment.CenterHorizontally，verticalArrangement=Arrangement.Center){Text(Text=“Screen 2”)Spacer(Modify=Modifier.Height(16.dp))Image(Painter=painterResource(id=dataItem.ImageResID)，ContentDescription=NULL，修改器=修改器.大小(200.dp).剪辑(Shape=材质主题.shapes.Medium).background(MaterialTheme.colorScheme.primary))间隔符(修改器=修改器.高度(16.dp))文本(Text=数据项.Text)}}

Screen 3
@Composable fun Screen3(navController: NavController, dataItem: DataItem) { Column( modifier = Modifier .fillMaxSize() .padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Text(text = "Screen 3") Spacer(modifier = Modifier.height(16.dp)) Image( painter = painterResource(id = dataItem.imageResId), contentDescription = null, modifier = Modifier .size(200.dp) .clip(shape = MaterialTheme.shapes.medium) .background(MaterialTheme.colorScheme.primary) ) Spacer(modifier = Modifier.height(16.dp)) Text(text = dataItem.text) } }

Screen 3@Composable Fun Screen3(导航控制器：NavController，DataItem：DataItem){Column(Modify=Modify.ill MaxSize().pding(16.dp)，HorontalAlign=Alignment.CenterHorizontally，verticalArrangement=Arrangement.Center){Text(Text=“Screen 3”)Spacer(Modify=Modifier.Height(16.dp))Image(Painter=painterResource(id=dataItem.ImageResID)，ContentDescription=NULL，修改器=修改器.大小(200.dp).剪辑(Shape=材质主题.shapes.Medium).background(MaterialTheme.colorScheme.primary))间隔符(修改器=修改器.高度(16.dp))文本(Text=数据项.Text)}}

Data List Screen, This screen will be displayed on the main screen
@Composable fun DataList(navController: NavController) { LazyColumn { items(dataItems) { item -> Box( modifier = Modifier .fillMaxWidth() .clickable { navController.navigate("screen1/${dataItems.indexOf(item)}") } ) { Row( modifier = Modifier .fillMaxWidth() .padding(16.dp), verticalAlignment = Alignment.CenterVertically ) { Image( painter = painterResource(id = item.imageResId), contentDescription = null, modifier = Modifier .size(64.dp) .clip(shape = MaterialTheme.shapes.medium) .background(MaterialTheme.colorScheme.primary) ) Spacer(modifier = Modifier.width(16.dp)) Text(text = item.text) } } } } }

数据列表屏幕，此屏幕将显示在主屏幕上@Composable Fun DataList(导航控制器：导航控制器){LazyColumn{Items(DataItems){Item->Box(Modify=Modify.fulMaxWidth().Clickable{navController.navigate(“screen1/${dataItems.indexOf(item)}”)}){Row(Modify=Modify.填充MaxWidth().pding(16.dp)，VerticalAlign=Alignment.Center){Image(Painter=画图资源(id=item.ImageResID)，ContentDescription=NULL，修改器=修改器.大小(64.dp).剪辑(Shape=材质主题.shapes.Medium).background(MaterialTheme.colorScheme.primary))间隔符(修改器=修改器.宽度(16.dp))文本(Text=项目.文本)}}}

`@Composable
fun MyApp() {
val navController = rememberNavController()

`@Composable fun MyApp（）{ val navController = rememberNavController（）

NavHost(navController, startDestination = "dataList") {
    composable("dataList") {
        DataList(navController = navController)
    }
    composable(
        route = "screen1/{index}",
        arguments = listOf(navArgument("index") { type = NavType.IntType })
    ) { backStackEntry ->
        val index = backStackEntry.arguments?.getInt("index")
        val dataItem = if (index != null && index < dataItems.size) dataItems[index] else dataItems[0]
        Screen1(navController = navController, dataItem = dataItem)
    }
    composable(
        route = "screen2/{index}",
        arguments = listOf(navArgument("index") { type = NavType.IntType })
    ) { backStackEntry ->
        val index = backStackEntry.arguments?.getInt("index")
        val dataItem = if (index != null && index < dataItems.size) dataItems[index] else dataItems[0]
        Screen2(navController = navController, dataItem = dataItem)
    }
    composable(
        route = "screen3/{index}",
        arguments = listOf(navArgument("index") { type = NavType.IntType })
    ) { backStackEntry ->
        val index = backStackEntry.arguments?.getInt("index")
        val dataItem = if (index != null && index < dataItems.size) dataItems[index] else dataItems[0]
        Screen3(navController = navController, dataItem = dataItem)
    }
}

}`

)`

Each list item should open the screen corresponding to it.

每个列表项都应打开与其对应的屏幕。

In the Data List Screen u have the following line

在Data List(数据列表)屏幕中，u具有以下行

navController.navigate("screen1/${dataItems.indexOf(item)}")

instead of hardcoded screen1 u should pass the index (or id) of the screen, like

您应该传递屏幕的索引(或id)，而不是硬编码的creen1，如

navController.navigate("screen${index}/${dataItems.indexOf(item)}")