kotlin - Problems with Android Jetpack Navigation

Question

I have created an Empty Compose Activity template using Android Studio Canara 2020.03. Here is the code of the file " MainActivity. kt":

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
            setContent {
                ButtonPage()
            }
        }
}
@Composable
fun ButtonPage(){
    Button(onClick = {}){Text("Click to go next")}
}
@Composable 
fun TextPage(){
    Text("Second Page")
}

How do I modify the code so that when you click on this button, it draws only text? (That is, you need that when you click the button, the program draws other content by deleting this one first). Jetpack Compose version 1.0.0-alpha09, jdk version 15, android version 11 Thank you in advance

Answer 1

A simple solution would be to have a variable that dictates the current screen.

var showSecondScreen by remember { mutableStateOf(false) }
if (!showSecondScreen) {
  Button(onClick = {showSecondScreen = true}){Text("Click to go next")}
} else {
  Text("Second screen")
}

This doesn't have to be a boolean, you could declare var currentScreen by remember { mutableStateOf("homeScreen") } and use a when block for which screen to show.

@Composable fun MyApp(currentScreen: String) {
  when (currentScreen) {
    "homeScreen" -> HomeScreen()
    "secondScreen" -> SecondScreen()
  }
}

So you can think of it less as a transaction and more as a stateful navigation.

But you'll soon realize that this doesn't handle back navigation, so you'll need a navigation library like jetpack compose navigation, decompose, compose-router, etc. Here's more information on jetpack compose navigation.