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

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

نتیجه

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

منابع اضافی