add transition screen with using navigation component

Author: b4tchkn

app/src/main/java/com/example/androiddevchallenge/MainActivity.kt

@@ -28,6 +28,7 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.navArgument
 import androidx.navigation.compose.rememberNavController
+import com.example.androiddevchallenge.ui.detail.DetailScreen
 import com.example.androiddevchallenge.ui.list.ListScreen
 import com.example.androiddevchallenge.ui.theme.MyTheme
 
@@ -51,8 +52,9 @@ fun MyApp() {
  ListScreen(navController = navController)
  }
  composable(
- "detail/?dog={dog}",
+ "detail",
  ) {
+ DetailScreen(navController = navController)
  }
  }
 }

app/src/main/java/com/example/androiddevchallenge/ui/detail/DetailScreen.kt

@@ -0,0 +1,25 @@
+package com.example.androiddevchallenge.ui.detail
+
+import androidx.compose.foundation.clickable
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.navigation.NavController
+import androidx.navigation.compose.navigate
+import com.example.androiddevchallenge.R
+
+
+@Composable
+fun DetailScreen(navController: NavController) {
+ Scaffold(
+ topBar = {
+ TopAppBar(title = { Text(text = stringResource(id = R.string.detail_title)) })
+ },
+ content = {
+ Text(text = "詳細画面です", Modifier.clickable { navController.navigate("list") })
+ }
+ )
+}

app/src/main/java/com/example/androiddevchallenge/ui/list/ListScreen.kt

@@ -9,6 +9,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.navigation.NavController
+import androidx.navigation.compose.navigate
 import androidx.navigation.compose.rememberNavController
 import com.example.androiddevchallenge.R
 import com.example.androiddevchallenge.ui.theme.MyTheme
@@ -26,7 +27,9 @@ fun ListScreen(navController: NavController) {
  content = {
  LazyColumn {
  items(dogs) {
- ListItem(dog = it, onItemClick = { /*TODO*/ })
+ ListItem(dog = it, onItemClick = {
+ navController.navigate("detail")
+ })
  }
  }
  },

app/src/main/res/values/strings.xml

@@ -11,4 +11,5 @@
  -->
  <string name="app_name">AndroidDevChallenge</string>
  <string name="list_title">リスト</string>
+ <string name="detail_title">詳細</string>
 </resources>