این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

یک طرح بندی صفحه پشتیبان بسازید

طرح بندی متعارف صفحه پشتیبان، توجه کاربر را روی محتوای اصلی برنامه شما متمرکز می کند و در عین حال محتوای پشتیبانی مرتبط را نیز نمایش می دهد. برای مثال، صفحه محتوای اصلی ممکن است اطلاعاتی درباره یک فیلم اخیر نشان دهد، در حالی که قاب پشتیبان فهرستی از فیلم‌های دیگری را نشان می‌دهد که موضوع مشابهی دارند یا همان کارگردان یا بازیگران بازیگر دارند. برای اطلاعات بیشتر در مورد طرح‌بندی متعارف قاب پشتیبان، دستورالعمل‌های قاب پشتیبان Material 3 را ببینید.

یک پانل پشتیبانی را پیاده سازی کنید

SupportingPaneScaffold از حداکثر سه صفحه تشکیل شده است: یک صفحه اصلی، یک صفحه پشتیبانی و یک صفحه اضافی اختیاری. داربست تمام محاسبات را برای تخصیص فضای پنجره به سه پنجره انجام می دهد. در صفحه‌های بزرگ، داربست قاب اصلی را با قاب پشتیبان در کناره نمایش می‌دهد. در صفحه‌های کوچک، داربست یا صفحه اصلی یا پشتیبان را تمام صفحه نمایش می‌دهد.

محتوای اصلی که بیشتر صفحه نمایش را اشغال می کند و محتوای پشتیبانی در کنار آن است. — **شکل 1.** طرح بندی صفحه پشتیبانی.

وابستگی ها را اضافه کنید

SupportingPaneScaffold بخشی از کتابخانه طرح تطبیقی Material 3 است.

سه وابستگی مرتبط زیر را به فایل build.gradle برنامه یا ماژول خود اضافه کنید:

کاتلین


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

شیار


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

تطبیقی - بلوک‌های ساختمانی سطح پایین مانند HingeInfo و Posture
تطبیق‌آرایی - طرح‌بندی‌های تطبیقی، مانند SupportingPaneScaffold
ناوبری تطبیقی - قابل ترکیب برای پیمایش درون و بین پنجره ها

یک ناوبر و داربست ایجاد کنید

در پنجره‌های کوچک، هر بار فقط یک صفحه نمایش داده می‌شود، بنابراین از یک ThreePaneScaffoldNavigator برای جابه‌جایی به و از پنجره‌ها استفاده کنید. یک نمونه از ناوبر با rememberSupportingPaneScaffoldNavigator ایجاد کنید. برای مدیریت حرکات برگشتی، از BackHandler استفاده کنید که canNavigateBack() را بررسی می کند و navigateBack() را فراخوانی می کند:

val navigator = rememberSupportingPaneScaffoldNavigator()

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

داربست به یک PaneScaffoldDirective نیاز دارد که نحوه تقسیم صفحه و مقدار فاصله استفاده را کنترل می‌کند، و یک ThreePaneScaffoldValue که وضعیت فعلی پنجره‌ها را ارائه می‌کند (مانند باز یا پنهان بودن آنها). برای رفتار پیش‌فرض، به ترتیب از scaffoldDirective و scaffoldValue Navigator استفاده کنید:

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

قاب اصلی و پشتیبان مواردی هستند که حاوی محتوای شما هستند. از AnimatedPane برای اعمال انیمیشن های صفحه پیش فرض در حین پیمایش استفاده کنید. از مقدار داربست برای بررسی اینکه آیا صفحه پشتیبان پنهان است یا خیر استفاده کنید. اگر چنین است، دکمه ای را نمایش دهید که navigateTo(ThreePaneScaffoldRole.Secondary) را فراخوانی می کند تا صفحه پشتیبانی نمایش داده شود.

در اینجا اجرای کامل داربست آمده است:

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 را به اجزای سازنده خود استخراج کنید تا قابل استفاده مجدد و آزمایش شوند. اگر انیمیشن های پیش فرض را می خواهید از ThreePaneScaffoldScope برای دسترسی به AnimatedPane استفاده کنید:

@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 را ساده می کند (موارد زیر را با اجرای کامل داربست در بخش قبل مقایسه کنید):

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

یک پانل پشتیبانی را پیاده سازی کنید

وابستگی ها را اضافه کنید

SupportingPaneScaffold بخشی از کتابخانه طرح تطبیقی Material 3 است.

سه وابستگی مرتبط زیر را به فایل build.gradle برنامه یا ماژول خود اضافه کنید:

کاتلین


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

شیار


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

تطبیقی - بلوک‌های ساختمانی سطح پایین مانند HingeInfo و Posture
تطبیق‌آرایی - طرح‌بندی‌های تطبیقی، مانند SupportingPaneScaffold
ناوبری تطبیقی - قابل ترکیب برای پیمایش درون و بین پنجره ها

یک ناوبر و داربست ایجاد کنید

val navigator = rememberSupportingPaneScaffoldNavigator()

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

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

در اینجا اجرای کامل داربست آمده است:

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

استخراج مواد تشکیل دهنده پنجره

@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

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

یک پانل پشتیبانی را پیاده سازی کنید

وابستگی ها را اضافه کنید

SupportingPaneScaffold بخشی از کتابخانه طرح تطبیقی Material 3 است.

سه وابستگی مرتبط زیر را به فایل build.gradle برنامه یا ماژول خود اضافه کنید:

کاتلین


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

شیار


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

تطبیقی - بلوک‌های ساختمانی سطح پایین مانند HingeInfo و Posture
تطبیق‌آرایی - طرح‌بندی‌های تطبیقی، مانند SupportingPaneScaffold
ناوبری تطبیقی - قابل ترکیب برای پیمایش درون و بین پنجره ها

یک ناوبر و داربست ایجاد کنید

val navigator = rememberSupportingPaneScaffoldNavigator()

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

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

در اینجا اجرای کامل داربست آمده است:

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

استخراج مواد تشکیل دهنده پنجره

@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

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

یک پانل پشتیبانی را پیاده سازی کنید

وابستگی ها را اضافه کنید

SupportingPaneScaffold بخشی از کتابخانه طرح تطبیقی Material 3 است.

سه وابستگی مرتبط زیر را به فایل build.gradle برنامه یا ماژول خود اضافه کنید:

کاتلین


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

شیار


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

تطبیقی - بلوک‌های ساختمانی سطح پایین مانند HingeInfo و Posture
تطبیق‌آرایی - طرح‌بندی‌های تطبیقی، مانند SupportingPaneScaffold
ناوبری تطبیقی - قابل ترکیب برای پیمایش درون و بین پنجره ها

یک ناوبر و داربست ایجاد کنید

val navigator = rememberSupportingPaneScaffoldNavigator()

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

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

در اینجا اجرای کامل داربست آمده است:

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

استخراج مواد تشکیل دهنده پنجره

@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

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

قبلی

یک چیدمان فهرست با جزئیات بسازید

بعدی

بایدها و نبایدهای تطبیقی