ناوبری با Compose برای Wear OS


عنصر پیمایش در Android Jetpack از برنامه‌های Jetpack Compose پشتیبانی می‌کند. می‌توانید بین عناصر ترکیبی پیمایش کنید و درعین‌حال از زیرساخت و ویژگی‌های عنصر «پیمایش» بهره ببرید.

این صفحه تفاوت‌های آن را با «پیمایش Jetpack» در Compose برای Wear OS شرح می‌دهد.

راه‌اندازی

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

کاتلین

dependencies {
    def wear_compose_version = "1.7.1"
    implementation "androidx.wear.compose:compose-navigation:$wear_compose_version"
}

این مورد به‌جای androidx.navigation:navigation-compose آرتیفکت استفاده می‌شود زیرا پیاده‌سازی‌های جایگزین ویژه Wear OS را ارائه می‌دهد.

ایجاد کنترل‌کننده، میزبان، و گراف پیمایش

پیمایش با «نگارش برای Wear OS» به همان سه مؤلفه موردنیاز در برنامه‌های غیر Wear OS نیاز دارد: کنترل‌کننده پیمایش، میزبان، و گراف.

از rememberSwipeDismissableNavController() برای ایجاد نمونه‌ای از WearNavigator، پیاده‌سازی NavController مناسب برای برنامه‌های Wear OS استفاده کنید:

val navController = rememberSwipeDismissableNavController()

NavController میانای برنامه‌سازی کاربردی اصلی است که برای پیمایش در برنامه‌های Compose استفاده می‌شود. این کلید پیمایش بین عناصر ترکیبی در میزبان پیمایش را کنترل می‌کند که در Wear OS، SwipeDismissableNavHost است.

val navController = rememberSwipeDismissableNavController()
SwipeDismissableNavHost(
    navController = navController,
    startDestination = "message_list"
) {
    // TODO: build navigation graph
}

مانند NavHost قابل ترکیب، این تابع مرجعی به کنترل‌کننده ناوبری، مسیر مقصد شروع، و سازنده گراف ناوبری می‌گیرد که در اینجا به‌صورت لامبدای دنباله‌دار نشان داده می‌شود.

مقصد شروع باید در سازنده گراف ناوبری، همراه با همه مقصدهای دیگری که باید با کنترل‌کننده ناوبری پیمایش‌پذیر باشند، ارائه شود.

در برنامه Wear OS خود، SwipeDismissableNavHost را به‌عنوان محتوای AppScaffold اعلام کنید تا از عناصر سطح بالا مثل زمان، پیمایش، یا نشانگر موقعیت، و نشانگر صفحه پشتیبانی کنید. از شیء AppScaffold در بالای SwipeDismissableNavHost و ScreenScaffold در سطح صفحه استفاده کنید تا به‌طور پیش‌فرض شیء TimeText به صفحه اضافه شود و مطمئن شوید که هنگام پیمایش بین صفحه‌ها به‌درستی پویانمایی می‌شود. علاوه‌براین، ScreenScaffold یک PositionIndicator برای محتوای پیمایش‌شدنی اضافه می‌کند.
    AppScaffold {
        val navController = rememberSwipeDismissableNavController()
        SwipeDismissableNavHost(
            navController = navController,
            startDestination = "message_list"
        ) {
            composable("message_list") {
                MessageList(onMessageClick = { id ->
                    navController.navigate("message_detail/$id")
                })
            }
            composable("message_detail/{id}") {
                MessageDetail(id = it.arguments?.getString("id")!!)
            }
        }
    }
}

// Implementation of one of the screens in the navigation
@Composable
fun MessageDetail(id: String) {
    // .. Screen level content goes here
    val scrollState = rememberTransformingLazyColumnState()
    val transformationSpec = rememberTransformationSpec()

    ScreenScaffold(
        scrollState = scrollState,
    ) { contentPadding ->
        // Screen content goes here
        // ...

برای کسب اطلاعات بیشتر درباره «پیمایش Jetpack»، پیمایش با Compose را ببینید یا آزمایشگاه کد «پیمایش Jetpack Compose» را انجام دهید.