backdropScaffold的使用

compose/src/main/java/org/zhiwei/compose/screen/basic/material3/BottomDrawer.kt

@@ -1,16 +1,28 @@
 package org.zhiwei.compose.screen.basic.material3
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.safeContentPadding
+import androidx.compose.material.BackdropScaffold
+import androidx.compose.material.BackdropValue
 import androidx.compose.material.BottomDrawer
 import androidx.compose.material.BottomDrawerValue
 import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.TopAppBar
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.MoreVert
+import androidx.compose.material.rememberBackdropScaffoldState
 import androidx.compose.material.rememberBottomDrawerState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import androidx.compose.ui.unit.dp
 import org.zhiwei.compose.ui.widget.Title_Desc_Text
 import org.zhiwei.compose.ui.widget.Title_Text
 
@@ -35,6 +47,55 @@ internal fun MaterialBottomDrawerUI(drawerValue: BottomDrawerValue = BottomDrawe
     }
 }
 
+//可以理解为前后面板的一个面板控件，类似与scaffold
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+internal fun MaterialBackdropUI(value: BackdropValue = BackdropValue.Concealed) {
+    val scaffoldState = rememberBackdropScaffoldState(initialValue = value)
+    //此控件也是material，而非material3
+    BackdropScaffold(
+        appBar = {
+            TopAppBar {
+                IconButton(onClick = { /*TODO*/ }) {
+                    Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = null)
+                }
+                Spacer(modifier = Modifier.weight(1f))
+                Icon(imageVector = Icons.Filled.MoreVert, contentDescription = null)
+            }
+        },
+        backLayerContent = {
+            Column(verticalArrangement = Arrangement.Center) {
+                Title_Text(title = "演示BackDropScaffold的使用")
+                Title_Desc_Text(desc = "BackDropScaffold也是Scaffold的一种，里面也有appbar和snackHost")
+            }
+        },
+        frontLayerContent = {
+            //前面板
+            Column {
+                Button_Screen()
+            }
+        },
+        scaffoldState = scaffoldState,
+        peekHeight = 300.dp,//可理解为前面板最高的时候，到顶部的距离
+        headerHeight = 80.dp//前面板最小高度
+    )
+}
+
+
+@OptIn(ExperimentalMaterialApi::class)
+private class BackDropValueProvider : PreviewParameterProvider<BackdropValue> {
+    override val values: Sequence<BackdropValue>
+        get() = sequenceOf(BackdropValue.Revealed, BackdropValue.Concealed)
+
+}
+
+//配置了不同的状态，所以IDE预览可以看到不同的效果
+@OptIn(ExperimentalMaterialApi::class)
+@Preview
+@Composable
+private fun BackDropPreview(@PreviewParameter(BackDropValueProvider::class) value: BackdropValue) {
+    MaterialBackdropUI(value)
+}
 
 @OptIn(ExperimentalMaterialApi::class)
 private class ThisDrawerValue : PreviewParameterProvider<BottomDrawerValue> {

compose/src/main/java/org/zhiwei/compose/screen/basic/material3/BottomSheetScreen.kt

@@ -27,12 +27,14 @@ import org.zhiwei.compose.ui.widget.Title_Text
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalMaterialApi::class)
 @Composable
 internal fun BottomSheet_Screen(modifier: Modifier = Modifier) {
+    //逐一注释，单个运行看效果
 //    Material3SheetUI(modifier)
     //material的控件，这里还有floatActionButton的插槽
 //    MaterialSheetUI(modifier)
 //    Material3ModalBottomSheetUI()
 //    MaterialModalBottomSheetUI()
-    MaterialBottomDrawerUI()
+//    MaterialBottomDrawerUI()
+    MaterialBackdropUI()
 }
 
 @Composable