TwoPaneLayoutNav<\/code> with destinations that accept navigation arguments. \n<\/p>\n\n This new feature was originally suggested by two developers in our feedback forum<\/a>, so special thanks to @tscholze<\/a> and @Papes96<\/a> for staying involved in our developer community and helping improve the SDK for everyone.\n<\/p>\nAdd TwoPaneLayout to your project<\/h2>\n
\n To import the new version of TwoPaneLayout, follow these steps:\n<\/p>\n
\n- \n Make sure you have the
mavenCentral()<\/code> repository in your top-level build.gradle file:<\/p>\n allprojects {\r\n repositories {\r\n google()\r\n mavenCentral()\r\n }\r\n }<\/pre>\n<\/li>\n- \n Add dependencies to the module-level build.gradle file (current version may be different from what’s shown here):<\/p>\n
implementation \"com.microsoft.device.dualscreen:twopanelayout:1.0.1-alpha07\"<\/pre>\n<\/li>\n
- \n Also ensure the compileSdkVersion is set to API 33 and the targetSdkVersion is set to API 32 or newer in the module-level build.gradle file:<\/p>\n
android { \r\n compileSdkVersion 33\r\n \r\n defaultConfig { \r\n targetSdkVersion 32\r\n } \r\n }<\/pre>\n<\/li>\n - \n Build layout with TwoPaneLayoutNav and add destinations with arguments.\n<\/li>\n<\/ol>\n
Navigate with arguments<\/h2>\n
\n With this new update, you can continue using TwoPaneLayoutNav<\/code> in the same way as before, so there\u2019s no need for any migration steps! You can continue using the same constructor for TwoPaneLayoutNav<\/code>:\n<\/p>\n @Composable\r\n fun TwoPaneLayoutNav(\r\n modifier: Modifier = Modifier,\r\n navController: NavHostController,\r\n paneMode: TwoPaneMode = TwoPaneMode.TwoPane,\r\n singlePaneStartDestination: String,\r\n pane1StartDestination: String,\r\n pane2StartDestination: String,\r\n builder: NavGraphBuilder.() -> Unit\r\n )<\/pre>\n\n The main difference now is in the content you can pass to the NavGraphBuilder<\/code>. Previously, we only supported string literal routes for destinations, but now you can use TwoPaneLayoutNav<\/code> like you would a typical NavHost<\/code>, passing in arguments and specifying default values. This can all be done through the overloaded composable<\/code> function<\/a> we introduced in version 1.0.1-alpha05<\/code>. An example usage would look like this:\n<\/p>\n val navController = rememberNavController()\r\n\r\n TwoPaneLayoutNav(\r\n navController = navController,\r\n singlePaneStartDestination = \"list\",\r\n pane1StartDestination = \"list\",\r\n pane2StartDestination = \"profile?name={name}\",\r\n ) {<\/strong>\r\n <\/strong>composable(\"list\") {<\/strong>\r\n <\/strong>\/\/ list screen code\r\n }<\/strong>\r\n <\/strong>composable(\r\n route = \"detail\/{id}\/{name}\",\r\n arguments = listOf(\r\n navArgument(\"name\") { <\/strong>type = NavType.StringType }<\/strong>,\r\n navArgument(\"id\") { <\/strong>type = NavType.IntType }<\/strong>)\r\n ) { <\/strong>backStackEntry -><\/strong>\r\n <\/strong>val id = backStackEntry.arguments?.getInt(\"id\")\r\n val name = backStackEntry.arguments?.getString(\"name\")\r\n \/\/ detail screen code\r\n }<\/strong>\r\n <\/strong>composable(\r\n route = \"profile?name={name}\",\r\n arguments = listOf(navArgument(\"name\") { <\/strong>defaultValue = \"guest\" }<\/strong>)\r\n ) {<\/strong>\r\n <\/strong>val name = it.arguments?.getString(\"name\")\r\n \/\/ profile screen code\r\n }<\/strong>\r\n }<\/strong><\/pre>\n\n In the code snippet, you can see how we use three different destination formats:\n<\/p>\n
\n- \n Without arguments –
list<\/code>\n<\/li>\n- \n With multiple typed arguments –
detail\/{id}\/{name}<\/code>\n<\/li>\n- \n With an optional argument and default value –
profile?name={name}<\/code>\n<\/li>\n<\/ol>\n\n The result of this setup can be in the animation below, where the id<\/code> and name<\/code> arguments are passed through to the detail<\/code> destination, and the profile<\/code> destination uses the name<\/code> argument if present, otherwise relying on the default argument value.\n<\/p>\n\n ![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2023\/06\/word-image-3274-2.gif\")
\n<\/p>\n
\n The implementation for the example shown in the animation can be found in this PR in the compose-sdk repo<\/a>.\n<\/p>\n\n To learn more about the different navigation argument options that are available for a NavHost<\/code> and TwoPaneLayoutNav<\/code>, check out the Navigating with Compose documentation page.<\/a>\n<\/p>\nResources and feedback<\/h2>\n
\n The code for TwoPaneLayout<\/code> is available on GitHub in our Compose SDK repo<\/a>. \n<\/p>\n\n If you have any questions, use the feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.\n<\/p>\n