0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Jetpack Composeで簡単な画面遷移を行う

Posted at

単純なコンポーザブル関数が用いられている2画面間の遷移(のようなもの)をする方法の一つです。
build.gradle(:app)に以下のような依存関係を追加してください。

build.gradle(:app)
// いろんなやつ

dependencies {
// いろんなやつ
    implementation "androidx.navigation:navigation-compose:2.4.0-alpha09"
}

注意
compileSdkVersion が 30以下だと後の処理でエラーが出る可能性があります。

今、以下のような FirstScreenSecondScreenを移動する場合を考えます。

@Composable
fun FirstScreen(navController: NavController){
    Column {
        Text(text = "1つ目の画面")
        Button(onClick = { navController.navigate("secondScreen") }) {
            Text(text = "次の画面へ")
        }
    }
}

@Composable
fun SecondScreen(){
    LazyColumn {
        items(10){
            Text(text = "2つ目の画面")
        }
    }
}

次にsetContent内で、

setContent {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "firstScreen"){
        composable("firstScreen"){ FirstScreen(navController = navController)}
        composable("secondScreen"){ SecondScreen()}
    }
}

このように書けば一つ目の画面でボタンを押すことで二つ目の画面に遷移したような処理をさせることができます。
ダウンロード.gif

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?