از نوار برنامه بالا حرکت کنید

این راهنما نشان می‌دهد که چگونه می‌توانید کاری کنید که آیکون ناوبری در نوار بالای برنامه، اقدامات ناوبری انجام دهد.

مثال

قطعه کد زیر یک مثال مینیمال از نحوه پیاده‌سازی یک نوار بالای برنامه با یک آیکون ناوبری کاربردی است. در این حالت، آیکون کاربر را به مقصد قبلی خود در برنامه می‌برد:

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}

نکات کلیدی در مورد کد

در این مثال به موارد زیر توجه کنید:

  • متد ترکیبی TopBarNavigationExample یک پارامتر navigateBack از نوع () -> Unit تعریف می‌کند.
  • این تابع، مقدار navigateBack برای پارامتر navigationIcon از CenterAlignedTopAppBar ارسال می‌کند.

به این ترتیب، هر زمان که کاربر روی آیکون ناوبری در برنامه بالا کلیک کند، تابع navigateBack() فراخوانی می‌شود.

ارسال یک تابع

این مثال از یک فلش برگشت برای آیکون استفاده می‌کند. به این ترتیب، آرگومان تابع navigateBack() باید کاربر را به مقصد قبلی ببرد.

برای انجام این کار، یک فراخوانی به TopBarNavigationExample به نام NavController.popBackStack() ارسال کنید. این کار را در جایی که گراف ناوبری خود را می‌سازید ، انجام می‌دهید. برای مثال:

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

منابع اضافی

برای اطلاعات بیشتر در مورد نحوه پیاده‌سازی ناوبری در برنامه خود، به مجموعه راهنماهای زیر مراجعه کنید:

،

این راهنما نشان می‌دهد که چگونه می‌توانید کاری کنید که آیکون ناوبری در نوار بالای برنامه، اقدامات ناوبری انجام دهد.

مثال

قطعه کد زیر یک مثال مینیمال از نحوه پیاده‌سازی یک نوار بالای برنامه با یک آیکون ناوبری کاربردی است. در این حالت، آیکون کاربر را به مقصد قبلی خود در برنامه می‌برد:

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}

نکات کلیدی در مورد کد

در این مثال به موارد زیر توجه کنید:

  • متد ترکیبی TopBarNavigationExample یک پارامتر navigateBack از نوع () -> Unit تعریف می‌کند.
  • این تابع، مقدار navigateBack برای پارامتر navigationIcon از CenterAlignedTopAppBar ارسال می‌کند.

به این ترتیب، هر زمان که کاربر روی آیکون ناوبری در برنامه بالا کلیک کند، تابع navigateBack() فراخوانی می‌شود.

ارسال یک تابع

این مثال از یک فلش برگشت برای آیکون استفاده می‌کند. به این ترتیب، آرگومان تابع navigateBack() باید کاربر را به مقصد قبلی ببرد.

برای انجام این کار، یک فراخوانی به TopBarNavigationExample به نام NavController.popBackStack() ارسال کنید. این کار را در جایی که گراف ناوبری خود را می‌سازید ، انجام می‌دهید. برای مثال:

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

منابع اضافی

برای اطلاعات بیشتر در مورد نحوه پیاده‌سازی ناوبری در برنامه خود، به مجموعه راهنماهای زیر مراجعه کنید: