16
16
17
17
package com.example.compose.snippets.adaptivelayouts
18
18
19
+ import android.os.Parcelable
20
+ import androidx.activity.compose.BackHandler
19
21
import androidx.compose.foundation.background
20
22
import androidx.compose.foundation.clickable
21
23
import androidx.compose.foundation.layout.Column
@@ -27,39 +29,36 @@ import androidx.compose.foundation.lazy.LazyColumn
27
29
import androidx.compose.material3.Card
28
30
import androidx.compose.material3.ListItem
29
31
import androidx.compose.material3.Text
30
- import androidx.compose.material3.adaptive.AnimatedPane
31
32
import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
32
- import androidx.compose.material3.adaptive.ListDetailPaneScaffold
33
- import androidx.compose.material3.adaptive.ListDetailPaneScaffoldRole
34
- import androidx.compose.material3.adaptive.rememberListDetailPaneScaffoldNavigator
33
+ import androidx.compose.material3.adaptive.layout.AnimatedPane
34
+ import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
35
+ import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
36
+ import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
35
37
import androidx.compose.runtime.Composable
36
38
import androidx.compose.runtime.getValue
37
- import androidx.compose.runtime.mutableStateOf
38
- import androidx.compose.runtime.saveable.Saver
39
- import androidx.compose.runtime.saveable.rememberSaveable
40
39
import androidx.compose.runtime.setValue
41
40
import androidx.compose.ui.Modifier
42
41
import androidx.compose.ui.graphics.Color
43
42
import androidx.compose.ui.tooling.preview.Preview
44
43
import androidx.compose.ui.unit.dp
45
44
import androidx.compose.ui.unit.sp
45
+ import kotlinx.parcelize.Parcelize
46
46
47
47
@OptIn(ExperimentalMaterial3AdaptiveApi ::class )
48
48
@Composable
49
49
fun SampleListDetailPaneScaffoldParts () {
50
50
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02]
51
- val navigator = rememberListDetailPaneScaffoldNavigator()
52
- // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02]
51
+ val navigator = rememberListDetailPaneScaffoldNavigator<MyItem >()
53
52
54
- // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part01]
55
- var selectedItem: MyItem ? by rememberSaveable(stateSaver = MyItem .Saver ) {
56
- mutableStateOf(null )
53
+ BackHandler (navigator.canNavigateBack()) {
54
+ navigator.navigateBack()
57
55
}
58
- // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part01 ]
56
+ // [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part02 ]
59
57
60
58
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part03]
61
59
ListDetailPaneScaffold (
62
- scaffoldState = navigator.scaffoldState,
60
+ directive = navigator.scaffoldDirective,
61
+ value = navigator.scaffoldValue,
63
62
// [START_EXCLUDE]
64
63
listPane = {},
65
64
detailPane = {},
@@ -69,15 +68,14 @@ fun SampleListDetailPaneScaffoldParts() {
69
68
70
69
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part04]
71
70
ListDetailPaneScaffold (
72
- scaffoldState = navigator.scaffoldState,
71
+ directive = navigator.scaffoldDirective,
72
+ value = navigator.scaffoldValue,
73
73
listPane = {
74
- AnimatedPane ( Modifier ) {
74
+ AnimatedPane {
75
75
MyList (
76
- onItemClick = { id ->
77
- // Set current item
78
- selectedItem = id
79
- // Switch focus to detail pane
80
- navigator.navigateTo(ListDetailPaneScaffoldRole .Detail )
76
+ onItemClick = { item ->
77
+ // Navigate to the detail pane with the passed item
78
+ navigator.navigateTo(ListDetailPaneScaffoldRole .Detail , item)
81
79
}
82
80
)
83
81
}
@@ -90,15 +88,16 @@ fun SampleListDetailPaneScaffoldParts() {
90
88
91
89
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_part05]
92
90
ListDetailPaneScaffold (
93
- scaffoldState = navigator.scaffoldState,
91
+ directive = navigator.scaffoldDirective,
92
+ value = navigator.scaffoldValue,
94
93
listPane =
95
94
// [START_EXCLUDE]
96
95
{},
97
96
// [END_EXCLUDE]
98
97
detailPane = {
99
- AnimatedPane ( Modifier ) {
100
- selectedItem?. let { item ->
101
- MyDetails (item )
98
+ AnimatedPane {
99
+ navigator.currentDestination?.content?. let {
100
+ MyDetails (it )
102
101
}
103
102
}
104
103
},
@@ -111,33 +110,30 @@ fun SampleListDetailPaneScaffoldParts() {
111
110
@Composable
112
111
fun SampleListDetailPaneScaffoldFull () {
113
112
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_full]
114
- // Currently selected item
115
- var selectedItem: MyItem ? by rememberSaveable(stateSaver = MyItem .Saver ) {
116
- mutableStateOf(null )
117
- }
113
+ val navigator = rememberListDetailPaneScaffoldNavigator<MyItem >()
118
114
119
- // Create the ListDetailPaneScaffoldState
120
- val navigator = rememberListDetailPaneScaffoldNavigator()
115
+ BackHandler (navigator.canNavigateBack()) {
116
+ navigator.navigateBack()
117
+ }
121
118
122
119
ListDetailPaneScaffold (
123
- scaffoldState = navigator.scaffoldState,
120
+ directive = navigator.scaffoldDirective,
121
+ value = navigator.scaffoldValue,
124
122
listPane = {
125
- AnimatedPane ( Modifier ) {
123
+ AnimatedPane {
126
124
MyList (
127
- onItemClick = { id ->
128
- // Set current item
129
- selectedItem = id
130
- // Display the detail pane
131
- navigator.navigateTo(ListDetailPaneScaffoldRole .Detail )
125
+ onItemClick = { item ->
126
+ // Navigate to the detail pane with the passed item
127
+ navigator.navigateTo(ListDetailPaneScaffoldRole .Detail , item)
132
128
},
133
129
)
134
130
}
135
131
},
136
132
detailPane = {
137
- AnimatedPane ( Modifier ) {
133
+ AnimatedPane {
138
134
// Show the detail pane content if selected item is available
139
- selectedItem?. let { item ->
140
- MyDetails (item )
135
+ navigator.currentDestination?.content?. let {
136
+ MyDetails (it )
141
137
}
142
138
}
143
139
},
@@ -193,19 +189,11 @@ fun MyDetails(item: MyItem) {
193
189
}
194
190
195
191
// [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_myitem]
196
- class MyItem (val id : Int ) {
197
- companion object {
198
- val Saver : Saver <MyItem ?, Int > = Saver (
199
- { it?.id },
200
- ::MyItem ,
201
- )
202
- }
203
- }
192
+ @Parcelize
193
+ class MyItem (val id : Int ) : Parcelable
204
194
// [END android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_myitem]
205
195
206
196
val shortStrings = listOf (
207
- " Android" ,
208
- " Petit four" ,
209
197
" Cupcake" ,
210
198
" Donut" ,
211
199
" Eclair" ,
0 commit comments