Updated ListDetailPaneScaffold use to alpha12 (android#255)

This eliminates storing state outside and directly uses the navigator as the source of truth. This also gets rid of the Modifier for AnimatedPane as it's no longer a required argument.
pedrosax · May 1, 2024 · 57ebb93 · 57ebb93
1 parent 568344b
commit 57ebb93
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 46 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -7,6 +7,7 @@ plugins {
     alias(libs.plugins.kotlin.android) apply false
     alias(libs.plugins.kapt) apply false
     alias(libs.plugins.hilt) apply false
+    alias(libs.plugins.kotlin.parcelize) apply false
 }
 
 apply("${project.rootDir}/buildscripts/toml-updater-config.gradle")

diff --git a/compose/snippets/build.gradle.kts b/compose/snippets/build.gradle.kts
@@ -19,6 +19,7 @@ plugins {
     alias(libs.plugins.kotlin.android)
     alias(libs.plugins.kapt)
     alias(libs.plugins.hilt)
+    alias(libs.plugins.kotlin.parcelize)
 }
 
 android {

diff --git a/...rc/main/java/com/example/compose/snippets/adaptivelayouts/SampleListDetailPaneScaffold.kt b/...rc/main/java/com/example/compose/snippets/adaptivelayouts/SampleListDetailPaneScaffold.kt
@@ -16,6 +16,7 @@
 
 package com.example.compose.snippets.adaptivelayouts
 
+import android.os.Parcelable
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -35,33 +36,25 @@ import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
 import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.saveable.Saver
-import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import kotlinx.parcelize.Parcelize
 
 @OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Composable
 fun SampleListDetailPaneScaffoldParts() {
     // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02]
-    val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>()
+    val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
 
     BackHandler(navigator.canNavigateBack()) {
         navigator.navigateBack()
     }
     // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02]
 
-    // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part01]
-    var selectedItem: MyItem? by rememberSaveable(stateSaver = MyItem.Saver) {
-        mutableStateOf(null)
-    }
-    // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part01]
-
     // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part03]
     ListDetailPaneScaffold(
         directive = navigator.scaffoldDirective,
@@ -78,13 +71,11 @@ fun SampleListDetailPaneScaffoldParts() {
         directive = navigator.scaffoldDirective,
         value = navigator.scaffoldValue,
         listPane = {
-            AnimatedPane(Modifier) {
+            AnimatedPane {
                 MyList(
-                    onItemClick = { id ->
-                        // Set current item
-                        selectedItem = id
-                        // Switch focus to detail pane
-                        navigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
+                    onItemClick = { item ->
+                        // Navigate to the detail pane with the passed item
+                        navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item)
                     }
                 )
             }
@@ -104,9 +95,9 @@ fun SampleListDetailPaneScaffoldParts() {
         {},
         // [END_EXCLUDE]
         detailPane = {
-            AnimatedPane(Modifier) {
-                selectedItem?.let { item ->
-                    MyDetails(item)
+            AnimatedPane {
+                navigator.currentDestination?.content?.let {
+                    MyDetails(it)
                 }
             }
         },
@@ -119,13 +110,7 @@ fun SampleListDetailPaneScaffoldParts() {
 @Composable
 fun SampleListDetailPaneScaffoldFull() {
 // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_full]
-    // Currently selected item
-    var selectedItem: MyItem? by rememberSaveable(stateSaver = MyItem.Saver) {
-        mutableStateOf(null)
-    }
-
-    // Create the ListDetailPaneScaffoldState
-    val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>()
+    val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
 
     BackHandler(navigator.canNavigateBack()) {
         navigator.navigateBack()
@@ -135,22 +120,20 @@ fun SampleListDetailPaneScaffoldFull() {
         directive = navigator.scaffoldDirective,
         value = navigator.scaffoldValue,
         listPane = {
-            AnimatedPane(Modifier) {
+            AnimatedPane {
                 MyList(
-                    onItemClick = { id ->
-                        // Set current item
-                        selectedItem = id
-                        // Display the detail pane
-                        navigator.navigateTo(ListDetailPaneScaffoldRole.Detail)
+                    onItemClick = { item ->
+                        // Navigate to the detail pane with the passed item
+                        navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item)
                     },
                 )
             }
         },
         detailPane = {
-            AnimatedPane(Modifier) {
+            AnimatedPane {
                 // Show the detail pane content if selected item is available
-                selectedItem?.let { item ->
-                    MyDetails(item)
+                navigator.currentDestination?.content?.let {
+                    MyDetails(it)
                 }
             }
         },
@@ -206,19 +189,11 @@ fun MyDetails(item: MyItem) {
 }
 
 // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_myitem]
-class MyItem(val id: Int) {
-    companion object {
-        val Saver: Saver<MyItem?, Int> = Saver(
-            { it?.id },
-            ::MyItem,
-        )
-    }
-}
+@Parcelize
+class MyItem(val id: Int) : Parcelable
 // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_myitem]
 
 val shortStrings = listOf(
-    "Android",
-    "Petit four",
     "Cupcake",
     "Donut",
     "Eclair",

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -33,7 +33,7 @@ kotlin = "1.9.20"
 ksp = "1.8.0-1.0.9"
 maps-compose = "4.3.2"
 material = "1.11.0"
-material3-adaptive = "1.0.0-alpha08"
+material3-adaptive = "1.0.0-alpha12"
 material3-adaptive-navigation-suite = "1.0.0-alpha05"
 media3 = "1.2.1"
 # @keep
@@ -118,3 +118,4 @@ hilt = { id = "com.google.dagger.hilt.android", version.ref = "hilt" }
 kapt = { id = "org.jetbrains.kotlin.kapt", version.ref = "kotlin" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
 version-catalog-update = { id = "nl.littlerobots.version-catalog-update", version.ref = "version-catalog-update" }
+kotlin-parcelize = { id = "org.jetbrains.kotlin.plugin.parcelize", version.ref = "kotlin" }