09.駅選択画面の表示

   :
dependencies {
   :
  implementation(project(":core:navigation"))
  implementation(project(":feature:depart:navigation"))
   :
}

4行目

LocalNavControllerを使用するのでナビゲーションモジュールへの依存を追記します。

5行目

共有NavGraphの名称を使用するのでナビゲーションモジュールへの依存を追記します。

package jp.co.progress_llc.portal.feature.depart.station.navigation

import androidx.compose.runtime.remember
import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable
import jp.co.progress_llc.portal.core.navigation.LocalNavController
import jp.co.progress_llc.portal.feature.depart.ui.viewmodel.DepartRouteEditViewModel
import jp.co.progress_llc.portal.feature.depart.station.presentation.DepartStationScreen
import jp.co.progress_llc.portal.feature.depart.navigation.DepartNavGraphName

const val DEPART_STATION = "depart_station"

fun NavGraphBuilder.departStationNavGraph() {
  composable(DEPART_STATION) { backStackEntry ->
    val navController = LocalNavController.current
    val parentEntry = remember(backStackEntry) {
      navController.getBackStackEntry(DepartNavGraphName.DEPART_ROUTE_EDIT)
    }
    val viewModel: DepartRouteEditViewModel = hiltViewModel(parentEntry)
    DepartStationScreen(departRouteEditViewModel = viewModel)
  }
}

12行目、15行目

発車予定の駅選択画面のNavGraph名を定義しています。

14行目～21行目

DepartStationScreenをNavGraphに登録しています。

16行目～19行目

共有NavGraphスコープをBackStackから取得しています。

20行目

共有NavGraphスコープ内から型に一致するViewModelを取得しています。

   :
dependencies {
   :
  implementation(project(":core:navigation"))
  implementation(project(":feature:depart:ui"))
  implementation(project(":feature:depart:station"))
   :
}

4行目

LocalNavControllerを使用するのでナビゲーションモジュールへの依存を追記します。

5行目

共有ViewModelを使用するのでUIモジュールへの依存を追記します。

6行目

駅選択画面への依存を追記します。

   :
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
   :
import jp.co.progress_llc.portal.core.navigation.LocalNavController
import jp.co.progress_llc.portal.feature.depart.ui.viewmodel.DepartRouteEditViewModel
import jp.co.progress_llc.portal.feature.depart.ui.viewmodel.DepartRouteEditViewModelContract
import jp.co.progress_llc.portal.feature.depart.station.navigation.DEPART_STATION
   :
fun DepartRouteScreen() {
fun DepartRouteScreen(
  navController: NavController = LocalNavController.current,
  departRouteEditViewModel:
    DepartRouteEditViewModelContract = hiltViewModel<DepartRouteEditViewModel>()
) {
   :
          CustomOutlinedTextField(
            value = departureStation,
   :
            readOnly = true,
            onClick = {
              departRouteEditViewModel.stationType = FieldName.DEPARTURE
              navController.navigate(DEPART_STATION)
            },
   :
          CustomOutlinedTextField(
            value = viaStation,
   :
            readOnly = true,
            onClick = {
              departRouteEditViewModel.stationType = FieldName.VIA
              navController.navigate(DEPART_STATION)
            },
   :
          CustomOutlinedTextField(
            value = arrivalStation,
   :
            readOnly = true,
            onClick = {
              departRouteEditViewModel.stationType = FieldName.ARRIVAL
              navController.navigate(DEPART_STATION)
            },
   :
fun DepartRouteScreenPreview() {
  AppTheme {
　  DepartRouteScreen()
    val previewNavController: NavController = rememberNavController()
    DepartRouteScreen(
      navController = previewNavController,
      departRouteEditViewModel = object : DepartRouteEditViewModelContract {
        override var stationType = ""
        override var stationCode = ""
        override var stationName = ""
      }
    )
   :

2行目～4行目、6行目～8行目

必要なimportを追記します。

11行目～16行目

LocalNavControllerからNavControllerrを取得します。

共有ViewModelのインタフェースを引数にしています。

既定でDI(Hilt)で共有ViewModelを注入しています。

22行目～25行目、31行目～34行目、40行目～43行目

テキストボックスがクリックされたらときの処理を追記します。

共有ViewModelにクリックされたテキストボックスの駅の型を格納し、駅選択画面に遷移させます。

47行目～56行目

画面の引数が増えたのでプレビューも対応します。

package jp.co.progress_llc.portal.feature.depart.route.navigation

import androidx.compose.runtime.remember
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable
import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
import jp.co.progress_llc.portal.core.navigation.LocalNavController
import jp.co.progress_llc.portal.feature.depart.ui.viewmodel.DepartRouteEditViewModel
import jp.co.progress_llc.portal.feature.depart.navigation.DepartNavGraphName
import jp.co.progress_llc.portal.feature.depart.route.presentation.DepartRouteScreen

internal const val DEPART_ROUTE = "depart_route"

fun NavGraphBuilder.departRouteNavGraph() {
  composable(DEPART_ROUTE) { backStackEntry ->
    val navController = LocalNavController.current
    val parentEntry = remember(backStackEntry) {
      navController.getBackStackEntry(DepartNavGraphName.DEPART_ROUTE_EDIT)
    }
    val viewModel: DepartRouteEditViewModel = hiltViewModel(parentEntry)
    DepartRouteScreen(departRouteEditViewModel = viewModel)
  }
}

3行目～10行目

必要なimportを追記しています。

16行目～21行目

共有NavGraphのスコープから共有ViewModelを取得して、DepartRouteScreenに渡します。

   :
import jp.co.progress_llc.portal.feature.depart.station.navigation.departStationNavGraph
   :
fun NavGraphBuilder.departRouteEditNavGraph() {
   :
    departRouteNavGraph()
    departStationNavGraph()
   :

2行目

追記するNavGraphのimportを追記しています。

7行目

共有対象のNavGraphを追記しています。