准备写侧边栏

Author: iOrchid

compose/src/main/java/org/zhiwei/compose/model/Screen.kt

@@ -9,9 +9,12 @@ import org.zhiwei.compose.screen.basic.material3.Image_Screen
 import org.zhiwei.compose.screen.basic.material3.LazyGrid_Screen
 import org.zhiwei.compose.screen.basic.material3.LazyList_Screen
 import org.zhiwei.compose.screen.basic.material3.ListItem_Screen
+import org.zhiwei.compose.screen.basic.material3.SideDrawer_Screen
+import org.zhiwei.compose.screen.basic.material3.SwipeDialog_Screen
 import org.zhiwei.compose.screen.basic.material3.TextField_Screen
 import org.zhiwei.compose.screen.basic.material3.Text_Screen
 import org.zhiwei.compose.screen.basic.material3.TopAppbarTabs_Screen
+import org.zhiwei.compose.screen.basic.material3.Widget_Screen
 
 /**
  * 用于配置整个Compose模块内所有可跳转的页面UI，用于Navigation导航
@@ -66,6 +69,22 @@ internal object BasicScreenUIs {
             "BottomBar",
             "BottomNavigationView和BottomAppBar的compose控件的演示。"
         ) { BottomBar_Screen(modifier) },
+        CourseItemModel(
+            "Side Navigation Vs ModalDrawer",
+            "侧边栏控件。"
+        ) { SideDrawer_Screen(modifier) },
+        CourseItemModel(
+            "BottomSheet",
+            "BottomSheet，底部sheet控件,还有BottomDrawer的演示。"
+        ) { SideDrawer_Screen(modifier) },
+        CourseItemModel(
+            "OtherWidget",
+            "提示浮窗SnackBar，进度条Progress，勾选框CheckBox，开关Switch，Slider的使用演示。"
+        ) { Widget_Screen(modifier) },
+        CourseItemModel(
+            "SwipeDialog",
+            "列表中的swipe滑动操作，还有结合checkBox记录状态，以及Dialog的弹窗的使用。"
+        ) { SwipeDialog_Screen(modifier) },
     )
 }
 

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

@@ -278,6 +278,6 @@ private fun HoleBottomAppBar() {
 
 @Preview(showBackground = true, backgroundColor = 0xFFFFFF)
 @Composable
-private fun LazyColumnPreview() {
+private fun BottomBarPreview() {
     BottomBar_Screen()
 }

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

@@ -0,0 +1,17 @@
+package org.zhiwei.compose.screen.basic.material3
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+internal fun BottomSheet_Screen(modifier: Modifier = Modifier) {
+
+}
+
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+private fun BottomSheetPreview() {
+    BottomSheet_Screen()
+}

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

@@ -153,6 +153,6 @@ private fun CustomColumnShow() {
 
 @Preview(showBackground = true, backgroundColor = 0xFFFFFF)
 @Composable
-private fun LazyColumnPreview() {
+private fun LazyGridPreview() {
     LazyGrid_Screen()
 }

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

@@ -310,6 +310,6 @@ private fun StickerHeaderList() {
 
 @Preview(showBackground = true, backgroundColor = 0xFFFFFF)
 @Composable
-private fun LazyColumnPreview() {
+private fun LazyListPreview() {
     LazyList_Screen()
 }

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

@@ -0,0 +1,53 @@
+package org.zhiwei.compose.screen.basic.material3
+
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.FabPosition
+import androidx.compose.material.FloatingActionButton
+import androidx.compose.material.Icon
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.rememberScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+internal fun SideDrawer_Screen(modifier: Modifier = Modifier) {
+    val scaffoldState = rememberScaffoldState()
+    //这里是用material库的scaffold，而非Material3的；scaffold可理解为App界面的脚手架，UI框架或者插槽面板。
+    androidx.compose.material.Scaffold(
+        modifier = modifier,
+        scaffoldState = scaffoldState,
+        topBar = {},
+        bottomBar = {},
+        floatingActionButton = {
+            FloatingActionButton(onClick = { /*TODO*/ }, shape = CircleShape) {
+                Icon(imageVector = Icons.Default.Add, contentDescription = null)
+            }
+        },
+        floatingActionButtonPosition = FabPosition.Center,
+        isFloatingActionButtonDocked = true,//是否显示在bottomBar本体上，而不是Top上，
+        drawerContent = {},
+        drawerGesturesEnabled = true,//是否启用手势可显示侧边栏
+        drawerShape = RoundedCornerShape(5.dp),
+        drawerElevation = 2.dp,
+        drawerBackgroundColor = Color.White,
+        drawerContentColor = Color.Cyan,
+        backgroundColor = Color.White,
+        contentColor = Color.Yellow,
+    ) {
+        //随便写个使用paddingValues的函数，如果不使用，IDE会提示；因为按照设计理念，是要使用这个padding值的
+        check(it.calculateBottomPadding() > 0.dp)
+
+    }
+}
+
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+private fun SideDrawerPreview() {
+    SideDrawer_Screen()
+}

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

@@ -0,0 +1,17 @@
+package org.zhiwei.compose.screen.basic.material3
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+internal fun SwipeDialog_Screen(modifier: Modifier = Modifier) {
+
+}
+
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+private fun SwipeDialogPreview() {
+    SwipeDialog_Screen()
+}

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

@@ -538,6 +538,6 @@ private fun TextColumn(modifier: Modifier = Modifier, content: @Composable () ->
 
 @Preview(showBackground = true, backgroundColor = 0xFFFFFF)
 @Composable
-private fun Text_Screen_Preview() {
+private fun TextScreen_Preview() {
     Text_Screen()
 }

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

@@ -376,6 +376,6 @@ private fun ScrollTabsShow() {
 
 @Preview(showBackground = true, backgroundColor = 0xFFFFFF)
 @Composable
-private fun LazyColumnPreview() {
+private fun TopAppBarPreview() {
     TopAppbarTabs_Screen()
 }

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

@@ -0,0 +1,17 @@
+package org.zhiwei.compose.screen.basic.material3
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+
+@Composable
+internal fun Widget_Screen(modifier: Modifier = Modifier) {
+
+}
+
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+private fun WidgetPreview() {
+    Widget_Screen()
+}