【筆記】Jetpack compose 的 DrawerMenu

先把 DrawerMenu 需要顯示的資料及其格式大概定一下吧。DrawerMenuItem 包含每個選單項目的資訊，目前為每個項目的圖示與文字標題。

data class DrawerMenuItem(
    val icon: ImageVector,
    val title: String
)

val drawerMenuItems = listOf<DrawerMenuItem>(
    DrawerMenuItem(Icons.Default.AccountBox, "帳號"),
    DrawerMenuItem(Icons.Default.Email, "信箱"),
    DrawerMenuItem(Icons.Default.Call, "電話")
)

在示範用的 MyApp() Composable 裡面，需要有 drawerState 是一個 DrawerState ，用來追蹤選單是開啟或是關閉的狀態。scope 是一個 CoroutineScope ，利用協程處理非同步狀態，避免點選開啟或關閉選單時，影響或延遲主畫面。items 是等一下要丟到選單中顯示的資料，selectedItem 是用確定被點選的是哪一個選單。

ModalNavigationDrawer：這是一個 Composable 組件，表示模態導覽 Drawer。它有兩個主要部分：drawerContent和content。

@Composable
fun MyApp() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    val items = drawerMenuItems

    val selectedItem = remember { mutableStateOf(items[0]) }

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet {
                Spacer(modifier = Modifier.height(20.dp))
                items.forEach { item ->
                    NavigationDrawerItem(
                        icon = { Icon(imageVector = item.icon, contentDescription = null) },
                        label = {Text(item.title)},
                        selected = item == selectedItem.value,
                        onClick = {
                            scope.launch { drawerState.close() }
                            selectedItem.value = item
                        },
                        modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                    )
                }
            }
        },
        content = {

            Scaffold(
                topBar = {},
                bottomBar = {},
                floatingActionButton = {
                    ExtendedFloatingActionButton(
                        text = { Text(text = "導覽抽屜")},
                        icon = { Icon(imageVector = Icons.Default.Add, contentDescription = null)},
                        onClick = {
                            scope.launch {
                                drawerState.apply {
                                    if(isClosed) open() else close()
                                }
                            }
                        }
                    )
                }
            ) { paddingValues ->
                Column(modifier = Modifier
                    .fillMaxSize()
                    .padding(paddingValues),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Button(onClick = {
                        scope.launch { drawerState.open() }
                    }) {
                        Text(text = "開啟選單")
                    }
                }
            }

        }
    )
}

下面是用內建 Preview 的互動式示範。

其它可參考資料：
https://developer.android.com/jetpack/compose/components/drawer?hl=zh-tw