From 0d65dc40ae78649f9414cd2c04f48633812d2cb2 Mon Sep 17 00:00:00 2001 From: Vladimir Mazunin Date: Thu, 29 Jun 2023 21:55:47 +0400 Subject: [PATCH 1/4] added to example handling of window insets with Material2 Scaffold --- .../kotlin/androidx/compose/mpp/demo/App.kt | 38 ++++++++++++++----- 1 file changed, 29 insertions(+), 9 deletions(-) diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt index 86c8fc9796274..5282765a46489 100644 --- a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt +++ b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt @@ -1,21 +1,17 @@ package androidx.compose.mpp.demo import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.PaddingValues -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items -import androidx.compose.material.Icon -import androidx.compose.material.Scaffold -import androidx.compose.material.Text -import androidx.compose.material.TopAppBar +import androidx.compose.material.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.runtime.Composable +import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.mutableStateListOf import androidx.compose.runtime.snapshots.SnapshotStateList +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp @@ -95,6 +91,10 @@ class App( content: @Composable (PaddingValues) -> Unit ) { Scaffold( + /* + Without using TopAppBar, this is recommended approach to apply multiplatform window insets to Material2 Scaffold (otherwise there will be empty space above top app bar - as is here) + */ + modifier = Modifier.windowInsetsPadding(WindowInsets.systemBars), topBar = { TopAppBar( title = { @@ -120,8 +120,28 @@ class App( ) { Scaffold( topBar = { + /* + This is recommend approach of applying multiplatform window insets to Material2 Scaffold with using top app bar. + By that way, it is possible to fill area above top app bar with its background - as it works out of box in android development or with Material3 Scaffold + */ TopAppBar( - title = { Text(navigationStack.first().title) }, + contentPadding = WindowInsets.systemBars.only(WindowInsetsSides.Top).union( + WindowInsets(left = 24.dp) + ).asPaddingValues(), + content = { + Row( + Modifier.fillMaxHeight().weight(1f), + verticalAlignment = Alignment.CenterVertically + ) { + ProvideTextStyle(value = MaterialTheme.typography.h6) { + CompositionLocalProvider( + LocalContentAlpha provides ContentAlpha.high, + content = { Text(navigationStack.first().title) } + ) + + } + } + } ) }, content = content From fef12620c7d2b85f53ec4021284b8cf5f6785617 Mon Sep 17 00:00:00 2001 From: Vladimir Mazunin Date: Thu, 29 Jun 2023 22:13:03 +0400 Subject: [PATCH 2/4] added back button to app bar in SelectionScaffold in example --- .../kotlin/androidx/compose/mpp/demo/App.kt | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt index 5282765a46489..44e2285b49f45 100644 --- a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt +++ b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt @@ -126,19 +126,31 @@ class App( */ TopAppBar( contentPadding = WindowInsets.systemBars.only(WindowInsetsSides.Top).union( - WindowInsets(left = 24.dp) + WindowInsets(left = 20.dp) ).asPaddingValues(), content = { Row( Modifier.fillMaxHeight().weight(1f), verticalAlignment = Alignment.CenterVertically ) { + if (navigationStack.size > 1) { + CompositionLocalProvider( + LocalContentAlpha provides ContentAlpha.high, + content = { + Icon( + Icons.Filled.ArrowBack, + contentDescription = "Back", + modifier = Modifier.clickable { navigationStack.removeLast() } + ) + } + ) + Spacer(Modifier.width(16.dp)) + } ProvideTextStyle(value = MaterialTheme.typography.h6) { CompositionLocalProvider( LocalContentAlpha provides ContentAlpha.high, content = { Text(navigationStack.first().title) } ) - } } } From ad27c5c4565fa9023ee196215d8e21f0b9160e07 Mon Sep 17 00:00:00 2001 From: Vladimir Mazunin Date: Thu, 29 Jun 2023 22:25:37 +0400 Subject: [PATCH 3/4] fixed typo in a comment --- .../demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt index 44e2285b49f45..6ed13d8888099 100644 --- a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt +++ b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt @@ -121,7 +121,7 @@ class App( Scaffold( topBar = { /* - This is recommend approach of applying multiplatform window insets to Material2 Scaffold with using top app bar. + This is recommended approach of applying multiplatform window insets to Material2 Scaffold with using top app bar. By that way, it is possible to fill area above top app bar with its background - as it works out of box in android development or with Material3 Scaffold */ TopAppBar( From 7407ed59ad6636232d34778f569c4fc25dc7fe77 Mon Sep 17 00:00:00 2001 From: "dima.avdeev" Date: Mon, 3 Jul 2023 12:43:29 +0400 Subject: [PATCH 4/4] Simplify CompositionLocalProvider --- .../kotlin/androidx/compose/mpp/demo/App.kt | 38 +++++++++---------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt index 6ed13d8888099..1b1ff91efa432 100644 --- a/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt +++ b/compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/App.kt @@ -129,28 +129,24 @@ class App( WindowInsets(left = 20.dp) ).asPaddingValues(), content = { - Row( - Modifier.fillMaxHeight().weight(1f), - verticalAlignment = Alignment.CenterVertically + CompositionLocalProvider( + LocalContentAlpha provides ContentAlpha.high ) { - if (navigationStack.size > 1) { - CompositionLocalProvider( - LocalContentAlpha provides ContentAlpha.high, - content = { - Icon( - Icons.Filled.ArrowBack, - contentDescription = "Back", - modifier = Modifier.clickable { navigationStack.removeLast() } - ) - } - ) - Spacer(Modifier.width(16.dp)) - } - ProvideTextStyle(value = MaterialTheme.typography.h6) { - CompositionLocalProvider( - LocalContentAlpha provides ContentAlpha.high, - content = { Text(navigationStack.first().title) } - ) + Row( + Modifier.fillMaxHeight().weight(1f), + verticalAlignment = Alignment.CenterVertically + ) { + if (navigationStack.size > 1) { + Icon( + Icons.Filled.ArrowBack, + contentDescription = "Back", + modifier = Modifier.clickable { navigationStack.removeLast() } + ) + Spacer(Modifier.width(16.dp)) + } + ProvideTextStyle(value = MaterialTheme.typography.h6) { + Text(navigationStack.first().title) + } } } }