탐색 창

탐색 창 구성요소는 사용자가 탐색할 수 있는 슬라이드인 메뉴입니다. 앱의 다양한 섹션에도 적용됩니다. 사용자는 옆으로 스와이프하여 활성화할 수 있습니다. 메뉴 아이콘을 탭해도 됩니다.

탐색 창을 구현하는 다음 세 가지 사용 사례를 고려하세요.

• 콘텐츠 구성: 사용자가 서로 다른 콘텐츠 간에 전환할 수 있도록 지원합니다. 뉴스 또는 블로그 앱과 같은 카테고리에 적합합니다
• 계정 관리: 계정 설정 및 프로필로 연결되는 빠른 링크를 제공합니다. 사용자 계정이 있는 앱의 섹션
• 기능 검색: 여러 기능과 설정을 한곳에서 정리 복잡한 앱에서 사용자를 쉽게 검색하고 액세스할 수 있습니다.

Material Design에는 두 가지 유형의 탐색 창이 있습니다.

• 표준: 화면 내의 공간을 다른 콘텐츠와 공유합니다.
• 모달: 화면 내에서 다른 콘텐츠 위에 표시됩니다.

예

ModalNavigationDrawer 컴포저블을 사용하여 탐색 창

drawerContent 슬롯을 사용하여 ModalDrawerSheet를 제공하고 창 콘텐츠를 삭제할 수 있습니다.

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer는 다양한 추가 창 매개변수를 허용합니다. 대상 예를 들어, 창이 gesturesEnabled 매개변수를 사용하세요.

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

제어 동작

창을 열고 닫는 방식을 제어하려면 DrawerState를 사용합니다. 해야 할 일 drawerState를 사용하여 DrawerState를 ModalNavigationDrawer에 전달 매개변수 값으로 사용됩니다.

DrawerState는 다음과 같이 open 및 close 함수에 대한 액세스를 제공합니다. 현재 창 상태와 관련된 속성도 포함됩니다. 이러한 함수에는 CoroutineScope가 필요하며 이는 다음을 사용하여 인스턴스화할 수 있습니다. rememberCoroutineScope 다음에서 정지 함수를 호출할 수도 있습니다. UI 이벤트에 대한 응답입니다.

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt