16
16
17
17
package com.example.compose.snippets.adaptivelayouts
18
18
19
+ import android.os.Parcelable
19
20
import androidx.activity.compose.BackHandler
20
21
import androidx.compose.foundation.background
21
22
import androidx.compose.foundation.clickable
@@ -35,33 +36,25 @@ import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
35
36
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
36
37
import androidx.compose.runtime.Composable
37
38
import androidx.compose.runtime.getValue
38
- import androidx.compose.runtime.mutableStateOf
39
- import androidx.compose.runtime.saveable.Saver
40
- import androidx.compose.runtime.saveable.rememberSaveable
41
39
import androidx.compose.runtime.setValue
42
40
import androidx.compose.ui.Modifier
43
41
import androidx.compose.ui.graphics.Color
44
42
import androidx.compose.ui.tooling.preview.Preview
45
43
import androidx.compose.ui.unit.dp
46
44
import androidx.compose.ui.unit.sp
45
+ import kotlinx.parcelize.Parcelize
47
46
48
47
@OptIn(ExperimentalMaterial3AdaptiveApi ::class )
49
48
@Composable
50
49
fun SampleListDetailPaneScaffoldParts () {
51
50
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02]
52
- val navigator = rememberListDetailPaneScaffoldNavigator<Nothing >()
51
+ val navigator = rememberListDetailPaneScaffoldNavigator<MyItem >()
53
52
54
53
BackHandler (navigator.canNavigateBack()) {
55
54
navigator.navigateBack()
56
55
}
57
56
// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02]
58
57
59
- // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part01]
60
- var selectedItem: MyItem ? by rememberSaveable(stateSaver = MyItem .Saver ) {
61
- mutableStateOf(null )
62
- }
63
- // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part01]
64
-
65
58
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part03]
66
59
ListDetailPaneScaffold (
67
60
directive = navigator.scaffoldDirective,
@@ -78,13 +71,11 @@ fun SampleListDetailPaneScaffoldParts() {
78
71
directive = navigator.scaffoldDirective,
79
72
value = navigator.scaffoldValue,
80
73
listPane = {
81
- AnimatedPane ( Modifier ) {
74
+ AnimatedPane {
82
75
MyList (
83
- onItemClick = { id ->
84
- // Set current item
85
- selectedItem = id
86
- // Switch focus to detail pane
87
- navigator.navigateTo(ListDetailPaneScaffoldRole .Detail )
76
+ onItemClick = { item ->
77
+ // Navigate to the detail pane with the passed item
78
+ navigator.navigateTo(ListDetailPaneScaffoldRole .Detail , item)
88
79
}
89
80
)
90
81
}
@@ -104,9 +95,9 @@ fun SampleListDetailPaneScaffoldParts() {
104
95
{},
105
96
// [END_EXCLUDE]
106
97
detailPane = {
107
- AnimatedPane ( Modifier ) {
108
- selectedItem?. let { item ->
109
- MyDetails (item )
98
+ AnimatedPane {
99
+ navigator.currentDestination?.content?. let {
100
+ MyDetails (it )
110
101
}
111
102
}
112
103
},
@@ -119,13 +110,7 @@ fun SampleListDetailPaneScaffoldParts() {
119
110
@Composable
120
111
fun SampleListDetailPaneScaffoldFull () {
121
112
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_full]
122
- // Currently selected item
123
- var selectedItem: MyItem ? by rememberSaveable(stateSaver = MyItem .Saver ) {
124
- mutableStateOf(null )
125
- }
126
-
127
- // Create the ListDetailPaneScaffoldState
128
- val navigator = rememberListDetailPaneScaffoldNavigator<Nothing >()
113
+ val navigator = rememberListDetailPaneScaffoldNavigator<MyItem >()
129
114
130
115
BackHandler (navigator.canNavigateBack()) {
131
116
navigator.navigateBack()
@@ -135,22 +120,20 @@ fun SampleListDetailPaneScaffoldFull() {
135
120
directive = navigator.scaffoldDirective,
136
121
value = navigator.scaffoldValue,
137
122
listPane = {
138
- AnimatedPane ( Modifier ) {
123
+ AnimatedPane {
139
124
MyList (
140
- onItemClick = { id ->
141
- // Set current item
142
- selectedItem = id
143
- // Display the detail pane
144
- navigator.navigateTo(ListDetailPaneScaffoldRole .Detail )
125
+ onItemClick = { item ->
126
+ // Navigate to the detail pane with the passed item
127
+ navigator.navigateTo(ListDetailPaneScaffoldRole .Detail , item)
145
128
},
146
129
)
147
130
}
148
131
},
149
132
detailPane = {
150
- AnimatedPane ( Modifier ) {
133
+ AnimatedPane {
151
134
// Show the detail pane content if selected item is available
152
- selectedItem?. let { item ->
153
- MyDetails (item )
135
+ navigator.currentDestination?.content?. let {
136
+ MyDetails (it )
154
137
}
155
138
}
156
139
},
@@ -206,19 +189,11 @@ fun MyDetails(item: MyItem) {
206
189
}
207
190
208
191
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_myitem]
209
- class MyItem (val id : Int ) {
210
- companion object {
211
- val Saver : Saver <MyItem ?, Int > = Saver (
212
- { it?.id },
213
- ::MyItem ,
214
- )
215
- }
216
- }
192
+ @Parcelize
193
+ class MyItem (val id : Int ) : Parcelable
217
194
// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_myitem]
218
195
219
196
val shortStrings = listOf (
220
- " Android" ,
221
- " Petit four" ,
222
197
" Cupcake" ,
223
198
" Donut" ,
224
199
" Eclair" ,
0 commit comments