이 페이지는 Cloud Translation API를 통해 번역되었습니다.

지원 창 레이아웃 빌드

지원 창 표준 레이아웃이 앱의 주요 기능에 사용자의 관심을 집중시킴 관련 지원 콘텐츠를 표시합니다. 예를 들어, 콘텐츠 창에 최신 영화에 대한 정보가 표시될 수 있고 창에 테마가 비슷하거나 동일한 다른 영화의 목록이 표시됩니다. 주연을 맡을 수도 있습니다. 지원 창에 대한 자세한 내용은 자세한 내용은 Material 3 지원 창 가이드라인

지원 창 구현

SupportingPaneScaffold는 최대 세 개의 창: 기본 창, 지원 창, 선택적 추가 창 발판 는 창 공간을 세 개의 창에 할당하기 위한 모든 계산을 처리합니다. 사용 설정됨 Scaffold는 기본 창을 표시하고 지원 창이 있습니다. 작은 화면에서는 Scaffold가 기본 또는 지원 창이 전체 화면으로 표시됩니다.

기본 콘텐츠가 지원 콘텐츠와 함께 디스플레이의 대부분을 차지합니다. — **그림 1.** 지원 창 레이아웃

종속 항목 추가

SupportingPaneScaffold은(는) Material 3 적응형 레이아웃 라이브러리

다음 세 가지 관련 종속 항목을build.gradle 앱 또는 모듈:

Kotlin

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

Groovy

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'

적응형 — 하위 수준 빌딩 블록, 즉 HingeInfo 및 Posture
adaptive-layout — 다음과 같은 적응형 레이아웃입니다. <ph type="x-smartling-placeholder">SupportingPaneScaffold</ph>
adaptive-navigation: 및 창 사이

를 통해 개인정보처리방침을 정의할 수 있습니다.

탐색기 및 Scaffold 만들기

작은 창에서는 한 번에 하나의 창만 표시되므로 이동 수단: ThreePaneScaffoldNavigator 페인(pane) 다음과 같이 탐색기의 인스턴스를 만듭니다. rememberSupportingPaneScaffoldNavigator 뒤로 동작을 처리하려면 다음을 확인하는 BackHandler를 사용합니다. canNavigateBack() 및 호출 navigateBack():

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}SampleSupportingPaneScaffold.kt

스캐폴드에는 PaneScaffoldDirective가 필요합니다. 화면을 분할하는 방법과 사용할 간격을 제어하고 ThreePaneScaffoldValue는 현재 페인의 상태 (예: 확장 또는 숨겨짐) 기본 탐색기의 scaffoldDirective 및 각각 scaffoldValue를 사용합니다.

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)SampleSupportingPaneScaffold.kt

기본 창과 지원 창은 콘텐츠가 포함된 컴포저블입니다. 사용 중에 기본 창 애니메이션을 적용하는 AnimatedPane 제공합니다. Scaffold 값을 사용하여 지원 창이 활성화되어 있는지 확인합니다. 숨김; 있는 경우 navigateTo(ThreePaneScaffoldRole.Secondary): 확인할 수 있습니다

다음은 Scaffold를 완전히 구현한 것입니다.

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            // Main pane content
            if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
                Button(
                    modifier = Modifier.wrapContentSize(),
                    onClick = {
                        navigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
                    }
                ) {
                    Text("Show supporting pane")
                }
            } else {
                Text("Supporting pane is shown")
            }
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.safeContentPadding()) {
            // Supporting pane content
            Text("Supporting pane")
        }
    },
)SampleSupportingPaneScaffold.kt

창 컴포저블 추출

SupportingPaneScaffold의 개별 창을 자체 창으로 추출 컴포저블을 사용하여 재사용 및 테스트가 가능하도록 만들었습니다. 사용 다음 경우에 AnimatedPane 액세스: ThreePaneScaffoldScope 기본 애니메이션을 원하는 경우:

@Composable
fun ThreePaneScaffoldScope.MainPane(
    shouldShowSupportingPaneButton: Boolean,
    onNavigateToSupportingPane: () -> Unit,
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Main pane content
        if (shouldShowSupportingPaneButton) {
            Button(onClick = onNavigateToSupportingPane) {
                Text("Show supporting pane")
            }
        } else {
            Text("Supporting pane is shown")
        }
    }
}

@Composable
fun ThreePaneScaffoldScope.SupportingPane(
    modifier: Modifier = Modifier,
) {
    AnimatedPane(modifier = modifier.safeContentPadding()) {
        // Supporting pane content
        Text("This is the supporting pane")
    }
}SampleSupportingPaneScaffold.kt

컴포저블로 창을 추출하면 SupportingPaneScaffold (다음을 전체 구현과 비교) (이전 섹션의 Scaffold)

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = {
        MainPane(
            shouldShowSupportingPaneButton = navigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden,
            onNavigateToSupportingPane = { navigator.navigateTo(ThreePaneScaffoldRole.Secondary) }
        )
    },
    supportingPane = { SupportingPane() },
)SampleSupportingPaneScaffold.kt

목록-세부정보 레이아웃 빌드

정렬 선