A simple compose navigation implementation

Home   »   A simple compose navigation implementation

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.navigation.NavHostController
import androidx.navigation.NavType
import androidx.navigation.compose.*
import MainDestinations.CHILDSCREEN
import MainDestinations.CHILD_TITLE_KEY
import MainDestinations.MAINSCREEN

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            navComposeApp()
        }
    }
}

@Composable
fun MainScreen(actions: MainActions) {

    Button(onClick = { actions.childScreen("From Home") }) {
        Text("Home")
    }
}

@Composable
fun ChildScreen(string: String?, actions: MainActions) {

    Button(onClick = actions.mainScreen) {
        Text(string ?: "Failed to parse string")
    }
}

@Composable
fun navComposeApp() {
    val navController = rememberNavController()
    val actions = remember(navController) { MainActions(navController) }
    MaterialTheme() {
        NavHost(
            navController = navController,
            startDestination = MAINSCREEN
        ) {
            composable(MAINSCREEN) {
                MainScreen(actions)
            }
            composable(
                "$CHILDSCREEN/{$CHILD_TITLE_KEY}",
                arguments = listOf(
                    navArgument(CHILD_TITLE_KEY) {
                        type = NavType.StringType
                    }
                )
            ) { backStackEntry ->
                val arguments = requireNotNull(backStackEntry.arguments)
                ChildScreen(arguments.getString(CHILD_TITLE_KEY), actions)
            }
        }
    }
}

object MainDestinations {
    const val MAINSCREEN = "mainscreen"
    const val CHILDSCREEN = "childscreen"
    const val CHILD_TITLE_KEY = "childscreen_titletkey"
}

class MainActions(private val navController: NavHostController) {
    val mainScreen: () -> Unit = {
        navController.navigate(MAINSCREEN)
    }
    fun childScreen(title: String) {
        navController.navigate("$CHILDSCREEN/$title")
    }
    val upPress: () -> Unit = {
        navController.navigateUp()
    }
}

dependencias 
//Navigation
    implementation "androidx.navigation:navigation-compose:1.0.0-alpha10"
//Basic
    implementation "androidx.compose.ui:ui:1.0.0-beta05"
    implementation "androidx.compose.material:material:1.0.0-beta05"
    implementation "androidx.compose.ui:ui-tooling:1.0.0-beta05"
    implementation 'androidx.activity:activity-compose:1.3.0-alpha07'
//This last one is kind of important if you want to use setContent instead of inflating an XML layout
    implementation 'androidx.appcompat:appcompat:1.3.0-rc01'
}

Leave a Reply

Your email address will not be published. Required fields are marked *