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

این راهنما توضیح می‌دهد که چگونه در 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"
                    )
                }
            }
        },
        modifier = modifier
    )
}

نکات کلیدی درباره کد

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

نتیجه

نوار برنامه بالای پویا نوشتار «۳ مورد انتخاب شد» را با نماد هم‌رسانی نمایش می‌دهد. این نوشتار و نماد فقط زمانی ظاهر می‌شوند که مواردی انتخاب شده باشد
شکل ۱. نوار برنامه بالای پویا با نوشتار و نماد هم‌رسانی که فقط وقتی موارد انتخاب می‌شوند ظاهر می‌شود.

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

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

@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(
        modifier = modifier,
        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 امکان مدیریت کلیک و کلیک طولانی را برای انتخاب مورد فراهم می‌کند. کلیک کردن کنشی را انجام می‌دهد، درحالی‌که کلیک طولانی روی یک مورد وضعیت انتخاب آن را تغییر می‌دهد.

نتیجه

نوار برنامه بالای پویا نوشتار «۳ مورد انتخاب شد» و پس‌از آن نماد هم‌رسانی را نمایش می‌دهد. در زیر، فهرستی از چند مورد نشان داده می‌شود که در کنار سه مورد انتخاب‌شده علامت تأیید وجود دارد
شکل ۲. فهرستی که در نوار برنامه بالای پویا با موارد خاص انتخاب‌شده ادغام شده است.

منابع بیشتر