I have this drawer I learned to make on youtube

I want to add the drawer to my app which has multiple screens and some of them don't need the drawer so I implemented navigation with screens , and some of the screens need to also have the drawer ontop of them wrap them.

this is the code of the drawer

val scaffoldState = rememberScaffoldState()
                val scope = rememberCoroutineScope()
                Scaffold(
                    drawerGesturesEnabled = scaffoldState.drawerState.isOpen,
                    scaffoldState = scaffoldState, topBar = {
                    AppBar(onNavigationIconClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }

                    })
                }, drawerContent = {
                    DrawerHeader()
                    DrawerBody(items = listOf(
                        MenuItem(
                            id = "home",
                            title = "Home",
                            contentDescription = "Go to home screen",
                            icon = Icons.Default.Home
                        ),
                        MenuItem(
                            id = "settings",
                            title = "Settings",
                            contentDescription = "Go to Settings screen",
                            icon = Icons.Default.Settings
                        ),
                        MenuItem(
                            id = "help",
                            title = "Help",
                            contentDescription = "Go to help screen",
                            icon = Icons.Default.Info
                        ),
                    ), onItemClick = {
                        println("Clicked on ${it.title}")

                        when (it.id) {
                            "home" -> {
                                println("Clicked on ${it.title}")
                            }
                            "settings" -> {
                                println("Clicked on ${it.title}")
                            }
                            "help" -> {
                                println("Clicked on ${it.title}")
                            }
                        }
                    })

                }) {

                    Text(text = "Hello World")

                }

the Text = Hellow world is where I want to pass my parameter of the screen which I don't know how to do it. I want to add a parameter that takes a composable function and runs it inside

and I followed this navigation video on how to navigate in kotlin

CodePudding user response：

I can't compile your code and I'm not sure if this will solve your issue, but based on this

… I want to add a parameter that takes a composable function and runs it inside

You can use this as a reference. Consider this composable that takes any composable and runs it inside

@Composable
fun AnyComposable(
    anyComposable: @Composable () -> Unit
) {
    anyComposable()
}

And another composable that uses the composable above and passes any other composable to it like this

@Composable
fun MyScreen() {

    // big red Box composable
    val composable1 = @Composable {
        Box (
            modifier = Modifier
                .size(200.dp)
                .background(Color.Red)
        )
    }

    // small blue Box composable
    val composable2 = @Composable {
        Box(
            modifier = Modifier
                .size(80.dp)
                .background(Color.Blue)
        )
    }

    // small green rectangular Box composable
    val composable3 = @Composable {
        Box(
            modifier = Modifier
                .size(width = 100.dp, height = 30.dp)
                .background(Color.Green)
        )
    }

    var dynamicComposable by remember { mutableStateOf<@Composable () -> Unit> (@Composable { composable1() }) }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Button(onClick = {
                dynamicComposable = composable1
            }) {
                Text("Comp 1")
            }

            Button(onClick = {
                dynamicComposable = composable2
            }) {
                Text("Comp 2")
            }

            Button(onClick = {
                dynamicComposable = composable3
            }) {
                Text("Comp 3")
            }
        }

        AnyComposable {
            dynamicComposable()
        }
    }
}

and the output:

CodePudding user response：

Or if in case the receiving composable has, lets say a Column, and you want to set-up the argument composables with Alignment beforehand, you can consider this one.

Same composable reciever that accepts any composables but the expected layout is Column.

@Composable
fun AnyComposable(
    anyComposable: @Composable () -> Unit
) {
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        anyComposable()
    }
}

@Composable
fun MyScreen() {

    // big red box at Start of Column
    val composable1 : @Composable ColumnScope.() -> Unit = @Composable {
        Box (
            modifier = Modifier
                .align(Alignment.Start)
                .size(200.dp)
                .background(Color.Red)
        )
    }

    // small blue box at Center of Column
    val composable2 : @Composable ColumnScope.() -> Unit = @Composable {
        Box(
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .size(80.dp)
                .background(Color.Blue)
        )
    }

    // small green rectangle at End of Colummn
    val composable3 : @Composable ColumnScope.() -> Unit = @Composable {
        Box(
            modifier = Modifier
                .align(Alignment.End)
                .size(width = 100.dp, height = 30.dp)
                .background(Color.Green)
        )
    }

    var dynamicComposable by remember { mutableStateOf<@Composable ColumnScope.() -> Unit> (@Composable { composable1() }) }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Button(onClick = {
                dynamicComposable = composable1
            }) {
                Text("Comp 1")
            }

            Button(onClick = {
                dynamicComposable = composable2
            }) {
                Text("Comp 2")
            }

            Button(onClick = {
                dynamicComposable = composable3
            }) {
                Text("Comp 3")
            }
        }

        AnyComposable {
            dynamicComposable()
        }
    }
}

Output: