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

این راهنما توضیح می‌دهد که چگونه یک نوار برنامه بالای پویا در 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 lambda از 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 امکان مدیریت کلیک و کلیک طولانی را برای انتخاب مورد فراهم می‌کند. کلیک کردن کنشی را انجام می‌دهد، درحالی‌که کلیک طولانی روی یک مورد وضعیت انتخاب آن را تغییر می‌دهد.

نتیجه

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

منابع بیشتر