یک نوار برنامه بالا پویا ایجاد کنید

این راهنما نحوه ایجاد یک نوار برنامه بالا پویا در Compose را توضیح می دهد که با انتخاب موارد از لیست، گزینه های آن را تغییر می دهد. می‌توانید عنوان و اقدامات نوار بالای برنامه را بر اساس وضعیت انتخاب تغییر دهید.

رفتار نوار برنامه بالا پویا را اجرا کنید

این کد یک تابع قابل ترکیب برای نوار بالای برنامه تعریف می کند که بر اساس انتخاب آیتم تغییر می کند:

@Composable
fun AppBarSelectionActions(
    selectedItems: Set<Int>,
    modifier: Modifier = Modifier,
) {
    val hasSelection = selectedItems.isNotEmpty()
    val topBarText = if (hasSelection) {
        "Selected ${selectedItems.size} items"
    } else {
        "List of items"
    }

    TopAppBar(
        title = {
            Text(topBarText)
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primaryContainer,
            titleContentColor = MaterialTheme.colorScheme.primary,
        ),
        actions = {
            if (hasSelection) {
                IconButton(onClick = {
                    /* click action */
                }) {
                    Icon(
                        imageVector = Icons.Filled.Share,
                        contentDescription = "Share items"
                    )
                }
            }
        },
    )
}

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

  • AppBarSelectionActions Set ای از شاخص های مورد انتخابی را می پذیرد.
  • topBarText بسته به اینکه آیا هر موردی انتخاب شده باشد تغییر می کند.
    • وقتی موارد انتخاب می شوند، متنی که تعداد موارد انتخاب شده را توصیف می کند در TopAppBar ظاهر می شود.
    • اگر هیچ موردی انتخاب نشده باشد topBarText "فهرست آیتم ها" است.
  • بلوک actions اقدامات نمایش داده شده در نوار بالای برنامه را مشخص می کند. اگر hasSelection درست باشد، یک نماد اشتراک‌گذاری بعد از متن ظاهر می‌شود.
  • لامبدا onClick IconButton وقتی روی نماد کلیک می‌شود، عمل اشتراک‌گذاری را انجام می‌دهد.

نتیجه

نوار پویا بالای برنامه متن 3 مورد انتخاب شده را با نماد اشتراک‌گذاری نمایش می‌دهد. این متن و نماد فقط زمانی ظاهر می شوند که موارد انتخاب شده باشند
شکل 1. یک نوار برنامه بالا پویا با متن و نماد اشتراک گذاری که فقط زمانی ظاهر می شود که موارد انتخاب شده باشند.

لیست قابل انتخاب را در نوار برنامه بالا پویا ادغام کنید

این مثال نشان می دهد که چگونه می توان یک لیست قابل انتخاب را به نوار برنامه بالا پویا اضافه کرد:

@Composable
private fun AppBarMultiSelectionExample(
    modifier: Modifier = Modifier,
) {
    val listItems by remember { mutableStateOf(listOf(1, 2, 3, 4, 5, 6)) }
    var selectedItems by rememberSaveable { mutableStateOf(setOf<Int>()) }

    Scaffold(
        topBar = { AppBarSelectionActions(selectedItems) }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            itemsIndexed(listItems) { _, index ->
                val isItemSelected = selectedItems.contains(index)
                ListItemSelectable(
                    selected = isItemSelected,
                    Modifier
                        .combinedClickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null,
                            onClick = {
                                /* click action */
                            },
                            onLongClick = {
                                if (isItemSelected) selectedItems -= index else selectedItems += index
                            }
                        )
                )
            }
        }
    }
}

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

  • نوار بالا بر اساس تعداد آیتم های فهرست انتخاب شده به روز می شود.
  • selectedItems مجموعه ای از شاخص های آیتم انتخاب شده را نگه می دارد.
  • AppBarMultiSelectionExample از یک Scaffold برای ساختار صفحه استفاده می کند.
    • topBar = { AppBarSelectionActions(selectedItems) } AppBarSelectionActions را به عنوان نوار بالای برنامه تنظیم می کند. AppBarSelectionActions حالت selectedItems را دریافت می کند.
  • LazyColumn موارد را در یک لیست عمودی نمایش می دهد و فقط موارد را روی صفحه نمایش می دهد.
  • ListItemSelectable یک آیتم لیست قابل انتخاب را نشان می دهد.
    • combinedClickable امکان مدیریت کلیک و کلیک طولانی را برای انتخاب آیتم فراهم می کند. یک کلیک یک عمل را انجام می دهد، در حالی که با کلیک طولانی روی یک مورد، وضعیت انتخاب آن تغییر می کند.

نتیجه

یک نوار پویا بالای برنامه متن 3 مورد انتخاب شده و به دنبال آن یک نماد اشتراک‌گذاری را نمایش می‌دهد. در زیر، فهرستی چند مورد را نشان می‌دهد که علامت‌هایی در کنار سه مورد انتخاب شده وجود دارد
شکل 2. لیستی که در یک نوار برنامه بالا پویا با موارد خاص انتخاب شده یکپارچه شده است.

منابع اضافی